Automatisch vervollständigen
Mit Beispielen beginnen
Um das Address Element in Aktion zu sehen, beginnen Sie mit einem dieser Beispiele:
Ein Address Element erstellen
Wenn Sie ein Address Element erstellen, geben Sie an, ob es im Versand- oder im Abrechnungsmodus verwendet werden soll.
Im Versandmodus führt das Element zwei Dinge aus:
- Eine Versandadresse erfassen.
- Bieten Sie dem Kunden/der Kundin an, diese Adresse auch als Rechnungsadresse zu verwenden.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ , appearance });
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');
Address Element mit anderen Elementen verwenden
You can collect both shipping and billing addresses by using multiple Address Elements, one of each mode, on your page.
If you need to collect both shipping and billing addresses and only want to use one Address Element, use the Address Element in Shipping mode and use the Payment Element to collect only the necessary billing address details.
Wenn Sie das Address Element mit anderen Elementen verwenden, können Sie ein gewisses automatisches Verhalten beim Bestätigen des PaymentIntent oder SetupIntent erwarten. Das Adresselement validiert die Vollständigkeit bei der Bestätigung des PaymentIntent oder SetupIntent und zeigt dann Fehler für jedes Feld an, wenn Validierungsfehler vorliegen.
Eine Adresse verwenden
Das Address Element funktioniert automatisch mit dem Payment oder Express Checkout Element. Wenn eine Kundin/ein Kunde eine Adresse und eine Zahlungsmethode angibt, kombiniert Stripe diese zu einem einzelnen PaymentIntent mit der Adresse im korrekten Feld.
Automatisches Verhalten
Das Standardverhalten des Elements hängt von seinem Modus ab.
Im Versandmodus wird die Adresse in diesen Feldern gespeichert:
- Wird im Feld Versand angezeigt.
- Wenn die Kundin/der Kunde angibt, dass es sich dabei auch um die Rechnungsadresse handelt, erscheint diese auch im Feld billing_details.
Um die Kombination von Informationen zu aktivieren, erstellen Sie alle Elemente aus demselben Elements
-Objekt, wie in diesem Beispiel:
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
addressElement.mount('#address-element');
paymentElement.mount('#payment-element');
Benutzerdefiniertes Verhalten
Normalerweise ist das Standardverhalten des Adresselements ausreichend. In einem komplexen Zahlungsablauf müssen Sie jedoch möglicherweise nutzerdefinierte Antworten auf die Eingaben der Kundinnen/Kunden schreiben. Weitere Informationen finden Sie unter Adresseingabe überwachen.
Automatische Vervollständigung
Das Address Element kann Adressen für 25 Länder automatisch ausfüllen. Wenn Kundinnen/Kunden ein unterstütztes Land für ihre Adresse auswählen, werden ihnen die Optionen zur Vervollständigung automatisch angezeigt. In folgenden Ländern ist die automatische Vervollständigung verfügbar:
Wenn Sie das Address Element und das Payment Element zusammen verwenden, aktiviert Stripe die automatische Vervollständigung ohne Konfiguration.
Wenn Sie nur das Address Element verwenden, müssen Sie Ihren eigenen Google Maps API Places-Bibliotheksschlüssel verwenden, der separat von Ihrem Stripe-Konto verwaltet wird. Übergeben Sie den Schlüssel in der Option autocomplete.apiKey.
Mit Link automatisch ausfüllen
Link, speichert und füllt die Zahlungs- und Versandinformationen automatisch aus. Wenn sich wiederkehrende Link-Kundinnen/Kunden authentifizieren, trägt Stripe deren Versandinformationen automatisch in das Adresselement ein.
Ein Zahlungsformular mit mehreren Elements erstellen
Um das automatische Ausfüllen zu aktivieren, erstellen Sie alle Elemente aus demselben Elements
-Objekt, wie in diesem Beispiel:
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const appearance = { };
const options = { mode: 'shipping' };
const elements = stripe.elements({ });
const linkAuthElement = elements.create('linkAuthentication');
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment');
linkAuthElement.mount('#link-auth-element');
addressElement.mount('#address-element');
paymentElement.mount('#payment-element');
Erscheinungsbild
Verwenden Sie die Appearance API, um das Design aller Elemente zu steuern. Wählen Sie einen Stil oder aktualisieren Sie bestimmte Details.
Wähle Sie zum Beispiel das „flache“ Design und überschreiben Sie die Standardtextfarbe.
Eine vollständige Liste der Designs und Variablen finden Sie in der Dokumentation zur Appearance API.