Überwachen Sie die Adresseingabe
Mit dem Address Element können Sie lokale und internationale Versand- oder Rechnungsadressen von Ihren Kund/innen erfassen.
Stripe einrichtenServerseitig
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 erfassenClientseitig
Mit dem Address Element können Sie nun Adressdaten auf dem Client erfassen.
Einrichten von Stripe.js
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.
<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:
// 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.
<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.
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 abrufenClientseitig
Sie können die Adressdaten abrufen, indem Sie das change
-Ereignis überwachen. Das change
-Ereignis wird immer dann ausgelöst, wenn der/die Nutzer/in ein Feld im Element aktualisiert.
addressElement.on('change', (event) => { if (event.complete){ // Extract potentially complete address const address = event.value.address; } })
Alternativ können Sie getValue
verwenden.
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 konfigurierenClientseitig
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 autocomplete
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 vorausfüllen können. Ein Address Element mit allen vorausgefü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 validierenClientseitig
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.