Überwachen Sie die Adresseingabe

Erfassen Sie Adressen, um sie mithilfe eines Ereignis-Listeners auf benutzerdefinierte Weise zu verwenden.

Design

Größe

Kundenstandort

Telefonnummer

Automatisch vervollständigen

Kontakte

Mit dem Address Element können Sie lokale und internationale Versand- oder Rechnungsadressen von Ihren Kund/innen erfassen.

Stripe einrichten
Serverseitig

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Adressdaten erfassen
Clientseitig

Mit dem Address Element können Sie nun Adressdaten auf dem Client erfassen.

Stripe.js einrichten

Das Address Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es dem head Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Stripe-Instanz erstellen

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Address Element zu Ihrer Seite hinzufügen

Das Address Element benötigt einen Platz auf Ihrer Seite. Erstellen Sie in Ihrem Formular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID.

checkout.html
<form id="address-form">
  <h3>Address</h3>
  <div id="address-element">
    <!-- Elements will create form elements here -->
  </div>
</form>

Nachdem dieses Formular geladen wurde, erstellen Sie eine Instanz des Address Element, geben Sie den Adressmodus an und verbinden Sie sie mit dem Container-DOM-Knoten.

Wenn Sie bereits eine Elements-Instanz erstellt haben, können Sie dieselbe Instanz zum Erstellen des Address Element verwenden. Erstellen Sie andernfalls zuerst eine neue Elements-Instanz.

checkout.js
const options = {
  // Fully customizable with appearance API.
  appearance: { /* ... */ }
};

// Only need to create this if no elements group exist yet.
// Create a new Elements instance if needed, passing the
// optional appearance object.
const elements = stripe.elements(options);

// Create and mount the Address Element in shipping mode
const addressElement = elements.create("address", {
  mode: "shipping",
});
addressElement.mount("#address-element");

Adressdaten abrufen
Clientseitig

Sie können die Adressdaten abrufen, indem Sie das change-Ereignis überwachen. Das change-Ereignis wird immer dann ausgelöst, wenn Nutzer/innen ein Feld im Element aktualisieren.

addressElement.on('change', (event) => {
  if (event.complete){
    // Extract potentially complete address
    const address = event.value.address;
  }
})

Alternativ können Sie getValue verwenden.

checkout.js
const handleNextStep = async () => {
  const addressElement = elements.getElement('address');

  const {complete, value} = await addressElement.getValue();

  if (complete) {
    // Allow user to proceed to the next step
    // Optionally, use value to store the address details
  }
};

Bei einem einseitigen Bezahlvorgang mit dem Payment Element übergibt das Address Element automatisch die Versand- oder Rechnungsinformationen, wenn Sie den PaymentIntent oder SetupIntent bestätigen.

Bei einem mehrseitigen Bezahlvorgang können Sie den PaymentIntent manuell aktualisieren oder das Customer-Objekt mit den vom change-Ereignis oder der getValue-Methode erhaltenen Daten aktualisieren, bevor Sie zum nächsten Schritt übergehen.

Address Element konfigurieren
Clientseitig

Sie können das Address Element nach Ihren Wünschen konfigurieren.

Automatische Vervollständigung

Das Address Element verfügt über eine integrierte Funktion zur automatischen Vervollständigung von Adressen, die die Google Maps API Places Library verwendet. Standardmäßig ist die Autovervollständigung mit einem von Stripe bereitgestellten Google Maps API-Schlüssel aktiviert, wenn eine der folgenden Bedingungen erfüllt ist:

Bei einem einseitigen Bezahlvorgang, bei dem das Payment Element in der gleichen Elementgruppe wie das Address Element ist.
Bei einem Bezahlvorgang, bei dem das Address Element in einer aktiven Link-Sitzung verwendet wird.

Um die automatische Vervollständigung im Address Element für alle anderen Szenarien zu aktivieren, können Sie die Option automatische Vervollständigung verwenden, wobei mode auf google_maps_api festgelegt wird. Legen Sie apiKey als Ihren eigenen Google Maps API-Schlüssel fest, der so konfiguriert ist, dass die Verwendung der Places API zulässig ist. Ihr Google Maps API-Schlüssel wird nur verwendet, wenn der von Stripe bereitgestellte Google Maps API-Schlüssel nicht verfügbar ist.

Notiz

Wenn Sie eine CSP bereitgestellt haben und die automatische Vervollständigung mit Ihrem eigenen Google Maps API-Schlüssel aktivieren möchten, fügen Sie https://maps.googleapis.com als connect-src- and script-src-Direktive ein. Die aktuellen CSP-Anforderungen finden Sie im offiziellen Leitfaden zur Google Maps API.

const addressElement = elements.create("address", {
  mode: "shipping",
  autocomplete: {
    mode: "google_maps_api",
    apiKey: "{YOUR_GOOGLE_MAPS_API_KEY}",
  },
});

Adressformular vorab ausfüllen

Das Address Element akzeptiert ein defaultValues-Objekt, mit dem Sie das Adressformular beim Laden der Seite vorab ausfüllen können. Ein Address Element mit allen vorab ausgefüllten Werten ähnelt dem Folgenden:

const addressElement = elements.create("address", {
  mode: "shipping",
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    },
  },
});

Andere Optionen

Eine vollständige Liste der Optionen finden Sie unter Stripe.js.

// Sample of a options object
const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US'],
  blockPoBox: true,
  fields: {
    phone: 'always',
  },
  validation: {
    phone: {
      required: 'never',
    },
  },
});

Adressdaten validieren
Clientseitig

Stripe bietet einige Möglichkeiten, um eine Adresse auf Vollständigkeit zu überprüfen und Fehler wie „Dieses Feld ist unvollständig“ auszulösen, die auf unvollständigen einzelnen Adressfelder erscheinen.

Wenn Sie das Address Element mit einem Payment Intent oder Setup Intent verwenden, verwenden Sie stripe.confirmPayment oder stripe.confirmSetup, um die Absicht zu vervollständigen. Dann erscheinen, falls vorhanden, Validierungsfehler im Address Element.

Verwenden Sie für andere Anwendungsfälle, wie z. B. einen mehrseitigen Checkout-Ablauf, getValue, um Validierungsfehler auszulösen, die im Address Element angezeigt werden.

Überwachen Sie die Adresseingabe

Erfassen Sie Adressen, um sie mithilfe eines Ereignis-Listeners auf benutzerdefinierte Weise zu verwenden.

Stripe einrichtenServerseitig

Adressdaten erfassenClientseitig