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');
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.