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.

Jetzt starten

Sie können das Address-Element entweder mit der Integration von Checkout-Elementen (Elements mit Checkout Sessions API) oder mit der Advanced-Integration (Elements mit Payment Intents API) verwenden. Vergleichen Sie die Funktionen und die Verfügbarkeit, um zu ermitteln, welche Integration für Ihren Anwendungsfall geeignet ist.

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

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

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 Address Element ausreichend. In einem komplexen Zahlungsablauf müssen Sie jedoch möglicherweise benutzerdefinierte Antworten auf die Eingaben der Kund/innen 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.

Automatisches Ausfüllen mit Link

Link speichert und füllt die Zahlungs- und Versandinformationen für die von Ihnen aktivierten Optionen automatisch aus. Wenn beispielsweise der Kunde/die Kundin von Link über eine gespeicherte Telefonnummer verfügt, füllt Stripe das Feld für die Telefonnummer nur automatisch aus, wenn die Erfassung der Telefonnummer aktiviert ist. Wenn sich wiederkehrende Kunden/Kundinnen von authentifizieren, füllt Stripe ihre Versandinformationen automatisch im Address Element 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_f3duw0VsAEM2TJFMtWQ90QAT');

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

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

Eine vollständige Liste der Themen und Variablen finden Sie in der Appearance API-Dokumentation für die Integration von Elements mit Checkout Sessions API oder unter Advanced-Integration.