Address Element

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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const elements = stripe.elements({ 
clientSecret, 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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({ 
clientSecret
 });
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment', paymentElementOptions);
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 = { /* appearance */ };
const options = { mode: 'shipping' };
const paymentElementOptions = { layout: 'accordion'};
const elements = stripe.elements({ 
clientSecret
 });
const linkAuthElement = elements.create('linkAuthentication');
const addressElement = elements.create('address', options);
const paymentElement = elements.create('payment', paymentElementOptions);
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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Eine vollständige Liste der Designs und Variablen finden Sie in der Dokumentation zur Appearance API.