Physische Adressen und Telefonnummern erfassen

Erfahren Sie, wie Sie bei einmaligen Zahlungsabläufen Adressen und Telefonnummern erfassen.

Um vollständige Adressen für die Rechnungsstellung oder den Versand zu erfassen, verwenden Sie das Address Element. Möglicherweise müssen Sie eine vollständige Rechnungsadresse erfassen, um beispielsweise Steuern zu berechnen. Das Payment Element erfasst nur die zum Abschließen der Zahlung erforderlichen Angaben zur Rechnungsadresse. Sie können es jedoch auch so konfigurieren, dass es auch andere Rechnungsangaben erfasst.

Andere Gründe, das Address Element zu verwenden:

So erfassen Sie Telefonnummern von Kundinnen/Kunden
So aktivieren Sie automatisches Vervollständigen
Um Rechnungsinformationen vorab im Payment Element auszufüllen, geben Sie eine Versandadresse ein

Stripe kombiniert die erfassten Adressinformationen und die Zahlungsmethode, um einen PaymentIntent PaymentIntent zu erstellen.

Design

Größe

Kundenstandort

Telefonnummer

Automatisch vervollständigen

Kontakte

Stripe einrichten
Serverseitig

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Adressdaten erfassen
Clientseitig

Mit dem Address Element können Sie nun Adressdaten auf dem Client erfassen.

Stripe.js einrichten

Das Address Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlvorgangseite ein, indem Sie es dem head Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

Stripe-Instanz erstellen und Bezahlvorgang initialisieren

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

let checkout;
initialize();
async function initialize() {
  const promise = fetch("/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);

  const appearance = {
    theme: 'stripe',
  };
  checkout = stripe.initCheckout({
    clientSecret: promise,
    elementsOptions: { appearance },
  });
}

Address Element zu Ihrer Seite hinzufügen

Das Address Element benötigt einen Platz auf Ihrer Seite. Erstellen Sie in Ihrem Formular einen leeren DOM-Knoten (Container) mit einer eindeutigen ID.

checkout.html
<form id="address-form">
  <h4>Billing Address</h4>
  <div id="billing-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
  <h4>Shipping Address</h4>
  <div id="shipping-address-element">
    <!--Stripe.js injects the Address Element-->
  </div>
</form>

Nachdem dieses Formular geladen wurde, erstellen Sie eine Instanz des Address Element, um eine Rechnungsadresse oder Versandadresse zu erfassen, und verbinden Sie es mit dem Container-DOM-Knoten.

Wenn Sie bereits eine Checkout-Instanz erstellt haben, können Sie dieselbe Instanz zum Erstellen des Address Element verwenden. Andernfalls erstellen Sie zuerst eine neue Checkout-Instanz.

checkout.js
const options = {
  // Fully customizable with the Appearance API.
  appearance: { /* ... */ }
};

const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount("#billing-address-element");
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount("#shipping-address-element");

Adressdaten abrufen
Clientseitig

Sie können die Adressdaten über das Ereignis change abrufen. Das Ereignis change wird immer dann ausgelöst, wenn der/die Nutzer/in ein Feld im Element aktualisiert.

checkout.on('change', (session) => {
  if (event.complete){
    // Extract potentially complete address
    const address = event.value.address;
  }
})

Bei einem einseitigen Bezahlvorgang mit dem Payment Element übergibt das Address Element automatisch die Versand- oder Rechnungsinformationen, wenn Sie die Checkout-Sitzung bestätigen.

Address Element konfigurieren
Clientseitig

Sie können das Address Element nach Ihren Wünschen konfigurieren.

Automatische Vervollständigung

Das Address Element verfügt über eine integrierte Funktion zur automatischen Vervollständigung von Adressen, die die Google Maps API Places Library verwendet. Standardmäßig ist die Autovervollständigung mit einem von Stripe bereitgestellten Google Maps API-Schlüssel aktiviert, wenn eine der folgenden Bedingungen erfüllt ist:

Bei einem einseitigen Bezahlvorgang, bei dem das Payment Element in der gleichen Elements-Gruppe aktiviert ist wie das Address Element.
In einem Bezahlvorgang, bei dem das Address Element in einer aktiven Link-Sitzung verwendet wird.

Adressformular vorab ausfüllen

Sie können updateBillingAddress oder updateShippingAddress verwenden, um eine Adresse vorab auszufüllen.

actions.updateBillingAddress({
  name: 'Jenny Rosen',
  address: {
    line1: '27 Fredrick Ave',
    city: 'Brothers',
    state: 'OR',
    postal_code: '97712',
    country: 'US',
  }
});

Adressdaten validieren
Clientseitig

Stripe bietet einige Möglichkeiten, um eine Adresse auf Vollständigkeit zu überprüfen und Fehler wie „Dieses Feld ist unvollständig“ auszulösen, die an unvollständigen einzelnen Adressfeldern erscheinen.

Sie können Adressen validieren, indem Sie die Checkout-Sitzung bestätigen. Dadurch wird das Address Element automatisch validiert und etwaige Validierungsfehler werden angezeigt.

OptionalErscheinungsbild anpassen
Clientseitig

Nachdem Sie das Address Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an das Design der restlichen Seite anpassen. Weitere Informationen finden Sie auf der Seite Appearance API.

Address Element mit anderen Elementen verwenden

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

Wenn Sie sowohl die Versand- als auch die Rechnungsadresse erfassen müssen und nur ein Address Element verwenden möchten, verwenden Sie das Element „Versandadresse“ zusammen mit dem Payment Element, das nur die erforderlichen Rechnungsadressdaten erfasst.

Wenn Sie das Address Element zusammen mit anderen Elementen verwenden, gibt es einige automatische Funktionen bei der Bestätigung der Checkout-Sitzung. Das Address Element überprüft bei der Bestätigung der Checkout-Sitzung die Vollständigkeit und zeigt dann bei Validierungsfehlern Fehler für jedes Feld an.

Sync billing and shipping addresses

When you use both a Billing Address Element and Shipping Address Element, you can show a checkbox that lets customers sync their billing and shipping addresses.

Pass the syncAddressCheckbox option in elementsOptions when initializing Checkout to configure which Address Element shows the checkbox.

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});

Set the value to 'billing' or 'shipping' to choose which Address Element shows the checkbox. Set it to 'none' to hide the checkbox.

Physische Adressen und Telefonnummern erfassen

Erfahren Sie, wie Sie bei einmaligen Zahlungsabläufen Adressen und Telefonnummern erfassen.

Stripe einrichtenServerseitig

Adressdaten erfassenClientseitig