Zahlungsdaten bei der Zahlung speichern

Damit Kundinnen und Kunden ihre Zahlungsmethoden für die zukünftige Verwendung speichern können, geben Sie beim Erstellen der Checkout-Sitzung den Parameter saved_payment_method_options.payment_method_save an.

Zum Speichern einer Zahlungsmethode ist ein Kunden-Objekt erforderlich. Übergeben Sie einen/eine bestehende/n Kunden/Kundin oder, um einen neuen Kunden/eine neue Kundin zu erstellen, setzen Sie die customer_creation der Checkout-Sitzung auf always.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
{{PRICE_ID}} \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]"=enabled

Nachdem Sie die Checkout-Sitzung erstellt haben, verwenden Sie das in der Antwort zurückgegebene Client-Geheimnis, um Ihre Bezahlseite zu erstellen.

In den meisten Fällen müssen Sie die Zustimmung eines Kunden/einer Kundin einholen, bevor Sie seine/ihre Zahlungsmethoden speichern. Das folgende Beispiel zeigt, wie Sie mithilfe eines Kontrollkästchens die Zustimmung einholen.

<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

Informieren Sie Stripe darüber, ob Ihr Kunde/Ihre Kundin seine/ihre Einwilligung gegeben hat, wenn Sie „confirm“ aufrufen, indem Sie den Parameter savePaymentMethod übergeben. Wenn Sie die Zahlungsdaten eines Kunden/einer Kundin speichern, sind Sie für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich.

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    checkout.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Sie können zuvor gespeicherte Zahlungsmethoden erneut anzeigen, sodass Ihre Kundinnen/Kunden sie während des Bezahlvorgangs verwenden können.

Kundin/Kunden identifizieren

Jede gespeicherte Zahlungsmethode ist mit einem Kunden-Objekt verknüpft. Bevor Sie die Checkout-Sitzung erstellen, authentifizieren Sie Ihre Kundin/Ihren Kunden und übergeben Sie die entsprechende Kunden-ID an die Checkout-Sitzung.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
{{PRICE_ID}} \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer=
{{CUSTOMER_ID}}

Gespeicherte Zahlungsmethoden rendern

Verwenden Sie das Array savedPaymentMethods im Frontend, um die verfügbaren Zahlungsmethoden der Kundin/des Kunden zu rendern.

<div id="saved-payment-methods"></div>

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
});

Mit einer gespeicherten Zahlungsmethode bestätigen

Wenn Ihre Kundin/Ihr Kunde eine gespeicherte Zahlungsmethode ausgewählt hat und bereit ist, den Bezahlvorgang abzuschließen, rufen Sie bestätigen auf und übergeben die paymentMethod-ID.

<button id="pay-button">Pay</button>

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});