Physische Adressen erfassen

Rechnungsadresse erfassen

Standardmäßig erfasst eine Checkout-Sitzung die minimalen Rechnungsdetails, die für die Zahlung über das Payment Element erforderlich sind.

Billing Address Element verwenden

Mit dem Billing Address Element können Sie vollständige Rechnungsadressen erfassen.

Übergeben Sie zunächst billing_address_collection=required, wenn Sie die Checkout-Sitzung erstellen.

<div id="billing-address"></div>

const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Nutzerdefinierte Formulare verwenden

Sie können Ihr eigenes Formular erstellen, um Rechnungsadressen zu erfassen.

• Wenn Ihre Bezahlseite einen speziellen Adresserfassungsschritt vor der Bestätigung enthält, rufen Sie updateBillingAddress auf, wenn Ihre Kundin/Ihre Kunde die Adresse übermittelt.
• Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie billingAddress an „bestätigen“ übergeben.

Rechnungsadressen zu Teil erfassen

Um nur einen Teil der Rechnungsadressen zu erfassen, z. B. nur das Land und die Postleitzahl, übergeben Sie billing_address_collection=auto.

Wenn Sie nur einen Teil der Rechnungsadressen erfassen, müssen Sie die Adressen manuell erfassen. Standardmäßig erfasst das Payment Element automatisch die minimalen Rechnungsdetails, die für die Zahlung erforderlich sind. Um eine doppelte Erfassung von Rechnungsdetails zu vermeiden, übergeben Sie fields.billingDetails=never beim Erstellen des Payment Element. Wenn Sie nur einen Teil der Rechnungsdaten (z. B. den Namen der Kundin/des Kunden) erfassen möchten, übergeben Sie never nur für die Felder, die Sie selbst erfassen möchten.

Versandadresse erfassen

Um die Versandadresse eines Kunden/einer Kundin zu erfassen, übergeben Sie beim Erstellen der Checkout-Sitzung den Parameter shipping_address_collection.

Wenn Sie eine Versandadresse erfassen, müssen Sie auch angeben, in welche Länder der Versand zulässig ist. Konfigurieren Sie die Eigenschaft allowed_countries mit einem Array aus zweistelligen ISO-Ländercodes.

So verwenden Sie das Shipping Address Element

Mit dem Shipping Address Element können Sie komplette Versandadressen erfassen.

<div id="shipping-address"></div>

const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Änderungen der Checkout-Sitzung überwachen

Sie können Änderungen an der Checkout-Sitzung überwachen, indem Sie einen Ereignis-Listener hinzufügen, um adressbezogene Änderungen zu verarbeiten.

<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>

stripe.initCheckout({clientSecret}).then((checkout) => {
  const subtotal = document.getElementById('subtotal');
  const shipping = document.getElementById('shipping');
  const total = document.getElementById('total');

  checkout.on('change', (session) => {
    subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
    shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
    total.textContent = `Total: ${session.total.total.amount}`;
  })
})

Ein nutzerdefiniertes Formular verwenden

Sie können Ihr eigenes Formular erstellen, um Versandadressen zu erfassen.

• Wenn es auf Ihrer Zahlungsseite einen speziellen Schritt zur Adresserfassung vor der Bestätigung gibt, rufen Sie updateShippingAddress auf, wenn Ihre Kundin/Ihr Kunde die Adresse übermittelt.
• Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie shippingAddress an „bestätigen“ übergeben.