Address Element

Verwenden Sie das Address Element, um vollständige Rechnungs- und Versandadressen zu erfassen.

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.

Design

Größe

Kundenstandort

Telefonnummer

Automatisch vervollständigen

Kontakte

Option	Beschreibung
Theme	Use the dropdown to choose a theme or customize the theme with the Elements Appearance API.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Address Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Customer location	Use the dropdown to choose a location for accepting complete addresses. Changing the location localizes the UI language and displays locally relevant payment methods.
Telefonnummer	Enable this option to allow phone number collection when the address form is expanded or using a contact.
Autocomplete	Enable this option to decrease checkout time, reduce validation errors, and increase checkout conversion with built-in address autocomplete. Stripe supports 236 regional address formats, including right-to-left address formats.
Contacts	Enable this option to add a new address or change an existing address or phone number.

Mit Beispielen beginnen

Um das Address Element in Aktion zu sehen, beginnen Sie mit einem dieser Beispiele:

Adressen der Kund/innen erfassen

Code und Anweisungen zum Speichern einer Adresse mit dem Address Element.

Kopieren Sie eine Beispiel-App in GitHub

HTML · React

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.

index.js
Vollständiges Beispiel anzeigen
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.

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:

index.js
Vollständiges Beispiel anzeigen
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:

Australien

Belgien

Brasilien

Deutschland

Frankreich

Indien

Irland

Italien

Japan

Kanada

Malaysia

Mexiko

Niederlande

Norwegen

Philippinen

Polen

Russland

Schweden

Schweiz

Singapur

Spanien

Südafrika

Türkei

Vereinigte Staaten

Vereinigtes Königreich

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.

Notiz

Durch die Verwendung der Funktion zur automatischen Vervollständigung erklären Sie sich mit den Nutzungsbedingungen der Google Maps Platform einverstanden. Wenn Sie gegen diese Richtlinie verstoßen, deaktivieren wir möglicherweise die automatische Vervollständigung oder ergreifen andere erforderliche Maßnahmen.

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:

index.js
Vollständiges Beispiel anzeigen
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.

Beispiele für helle und dunkle Modi für das Adresselement.

Wähle Sie zum Beispiel das „flache“ Design und überschreiben Sie die Standardtextfarbe.

index.js
Vollständiges Beispiel anzeigen
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.