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, geben Sie den Adress-Modus an und verbinden Sie es mit dem Container-DOM-Knoten.

Wenn Sie bereits eine Elements-Instanz erstellt haben, können Sie dieselbe Instanz zum Erstellen des Address Element verwenden. Andernfalls erstellen Sie zuerst eine neue Elements-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.

Wenn Sie das Address Element mit einem PaymentIntent oder SetupIntent verwenden, verwenden Sie stripe.confirmPayment bzw. stripe.confirmSetup, um den Intent abzuschließen. Falls vorhanden, werden Validierungsfehler im Address Element angezeigt.

Für andere Use Cases, wie z. B. einen mehrseitigen Bezahlvorgang, können Sie 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 – eines für jeden Modus – auf Ihrer Seite verwenden.

Wenn Sie sowohl Versand- als auch Abrechnungsadressen erfassen müssen und nur ein Address Element verwenden möchten, verwenden Sie das Address Element im Versandmodus und verwenden Sie das Payment Element, um nur die erforderlichen Abrechnungsadressen 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 Address Element validiert die Vollständigkeit bei der Bestätigung des PaymentIntent oder SetupIntent und zeigt dann Fehler für jedes Feld an, wenn Validierungsfehler vorliegen.

Physische Adressen und Telefonnummern erfassen

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

Stripe einrichtenServerseitig

Adressdaten erfassenClientseitig