Address Element

Das Address Element ist eine integrierbare Komponente der Nutzeroberfläche zum Akzeptieren vollständiger Adressen. Mit diesem können Sie Versandadressen erfassen oder vollständige Rechnungsadressen erhalten, z. B. für Steuerzwecke.

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

Sie können sowohl Versand- als auch Rechnungsadressen erfassen, indem Sie auf Ihrer Seite mehrere Address Elements, eines pro Modus, verwenden.

Wenn Sie sowohl die Versand- als auch die Rechnungsadresse erfassen müssen und nur ein Adresselement verwenden möchten, verwenden Sie das Adresselement im Versandmodus und verwenden Sie das Payment Element, um nur die erforderlichen Rechnungsadressen zu erfassen.

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

Wenn Ihr Kunde/Ihre Kundin ein unterstütztes Land für seine/ihre Adresse auswählt, werden ihm/ihr die Optionen zur automatischen Vervollständigung angezeigt. Das Address Element kann Adressen für die folgenden Länder automatisch ausfüllen:

Wenn Sie das Address Element und das Payment Element zusammen verwenden, aktiviert Stripe die automatische Vervollständigung ohne Konfiguration. Dies geschieht mithilfe eines von Stripe bereitgestellten Google Maps API-Schlüssels.

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 für die von Ihnen aktivierten Optionen automatisch aus. Wenn der Link-Kunde beispielsweise eine Telefonnummer gespeichert hat, füllt Stripe die Telefonnummer nur dann automatisch aus, wenn die Erfassung von Telefonnummern aktiviert ist. Wenn sich wiederkehrende Link-Kundinnen/Kunden authentifizieren, füllt Stripe ihre Versandinformationen automatisch im Adresselement aus.

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.