Zahlungen für bestehende Kundinnen/Kunden

Erfahren Sie, wie Sie eine bestehende Zahlungsmethode belasten, während ein Kunde/eine Kundin On-Session ist.

Eine Bezahlvorgang ermöglicht es Käuferinnen und Käufern, ihre Zahlungen einzugeben. Wenn der/die Käufer/in ein/e bestehende/r Kunde/Kundin ist, können Sie den Bezahlvorgang so konfigurieren, dass die Angaben mit einer der gespeicherten Karten des Kunden/der Kundin vorausgefüllt werden. Bei der Bezahlvorgangs-Sitzung werden bis zu 50 gespeicherte Karten angezeigt, mit denen der Kunde zahlen kann.

Payment Element mit einer gespeicherten Karte

Checkout-Sitzung erstellen
Clientseitig
Serverseitig

Checkout-Sitzungen unterstützen die Wiederverwendung bestehender Kunden-Objekte über den Kunden-Parameter. Bei der Wiederverwendung bestehender Kundinnen und Kunden werden alle von Checkout erstellten Objekte, wie PaymentIntents und Abos, mit diesem Kunden-Objekt verknüpft.

OptionalWeitere gespeicherte Zahlungsmethoden anzeigen
Serverseitig

Compliance

Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten eines Kunden/einer Kundin speichern. Wenn Sie einem Kunden/einer Kundin zuvor genutzte Zahlungsmethoden für zukünftige Einkäufe anzeigen, stellen Sie sicher, dass Sie die Zustimmung eingeholt haben, um die Details der Zahlungsmethode für diese spezifische zukünftige Verwendung zu speichern.

Standardmäßig werden nur Zahlungsmethoden angezeigt, die auf Erneute Anzeige immer zulassen eingestellt sind.

Apple Pay und Google Pay können während einer Checkout-Sitzung nicht wiederverwendet werden, daher erscheinen diese Zahlungsmethoden nicht in der Liste der gespeicherten Optionen. Sie müssen die Nutzeroberfläche von Google Pay und Apple Pay sowie die Nutzeroberfläche der Zahlungsanforderung jedes Mal anzeigen, wenn die Checkout-Sitzung aktiv ist.

Sie können andere zuvor gespeicherte Zahlungsmethoden anzeigen, indem Sie weitere Werte für die erneute Anzeige in die Checkout-Sitzung aufnehmen oder die Einstellung allow_redisplay einer Zahlungsmethode auf immer setzen.

Verwenden Sie den allow_redisplay_filtersParameter, um anzugeben, welche gespeicherten Zahlungsmethoden in Checkout angezeigt werden sollen. Sie können jeden der gültigen Werte festlegen: limited, unspecified und always.

Wenn Sie in Ihrer Checkout-Sitzung die Filterung für die erneute Anzeige angeben, wird das Standardverhalten außer Kraft gesetzt. Sie müssen daher den Wert always angeben, um die gespeicherten Zahlungsmethoden anzuzeigen.

Aktualisieren Sie die Zahlungsmethode, um den Wert allow_redisplay für einzelne Zahlungsmethoden festzulegen.
Command Line
Sprache auswählen
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}} \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :" \ -d allow_redisplay=always

Das Payment Element anzeigen
Clientseitig

Einrichten von Stripe.js

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem sie es zum 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 es nicht selbst.

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

Erstellen Sie auf Ihrer Zahlungsseite eine Instanz von Stripe mit dem folgenden JavaScript:

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'
);

Payment Element zu Ihrer Zahlungsseite hinzufügen

Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Checkout will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Rufen Sie die Checkout-Sitzung client_secret aus dem vorherigen Schritt ab, um das Checkout-Objekt zu initialisieren. Erstellen und mounten Sie dann das Payment Element.

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

// Initialize Checkout
const checkout = stripe.initCheckout({
  clientSecret: promise,
});

// Create and mount the Payment Element
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Felder auf der Zahlungsseite vorab ausfüllen

Wenn alle folgenden Bedingungen zutreffen, enthält das Sitzungsobjekt die Angaben E-Mail, Name, Karte und Rechnungsadresse, basierend auf den Daten der gespeicherten Karte der Kundin/des Kunden. Diese Informationen stehen Ihnen zur Anzeige auf Ihrer Zahlungsseite sowie dem Payment Element zur Verfügung, um die gespeicherte Karte darzustellen:

Checkout befindet sich im Modus payment oder subscription. Im Modus setup wird das Vorausfüllen von Feldern nicht unterstützt.
Die Kundin/der Kunde verfügt über eine gespeicherte Karte. Checkout unterstützt nur das Vorabausfüllen von Kartenzahlungsmethoden.
Bei der gespeicherten Karte ist allow_redisplay auf always festgelegt oder Sie haben die Standardeinstellung für die Anzeige angepasst.
Die Zahlungsmethode beinhaltet billing_details, die vom Wert billing_address_collection der Checkout-Sitzung benötigt werden:
- auto erfordert Werte für email, name und address[country]. Für Rechnungsadressen in den USA, Kanada und Großbritannien ist auch address[postal_code] erforderlich.
- required erfordert Werte für email, name und alle address-Felder.

Wenn Ihre Kundin/Ihr Kunde mehrere gespeicherte Karten hat, zeigt das Payment Element die gespeicherte Karte entsprechend der folgenden Priorisierung an:

Im payment-Modus füllt Stripe die Felder mit der zuletzt gespeicherten Karte der Kundin/des Kunden vorab aus.
Im subscription-Modus füllt Stripe die Standardzahlungsmethode der Kundin/des Kunden im Voraus aus, sofern es sich um eine Karte handelt. Andernfalls füllt Stripe die neueste gespeicherte Karte vorab aus.

Beim Erfassen einer Lieferadresse enthält das Sitzungsobjekt die Felder der Lieferadresse, sofern die shipping.address der Kundin/des Kunden zu den unterstützten Ländern der Checkout-Session gehört.

Damit Ihre Kundschaft gespeicherte Karten während eines Bezahlvorgangs entfernen kann, setzen Sie save_payment_method_options[payment_method_remove] auf aktiviert.

Zeitüberschreitung beim vorab Ausfüllen

Die vorausgefüllte Zahlungsmethode wird nach Erstellung der Checkout-Sitzung 30 Minuten lang angezeigt. Nach Ablauf wird die Zahlungsmethode aus Sicherheitsgründen nicht mehr vorab ausgefüllt, wenn dieselbe Checkout-Sitzung geladen wird.

Zahlung an Stripe senden
Clientseitig

Rendern Sie eine Schaltfläche Bezahlen, die Bestätigen von der Instanz Checkout aufruft, um die Zahlung abzusenden.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Ereignisse nach der Zahlung verarbeiten
Serverseitig

Stripe sendet das Ereignis checkout.session.completed, wenn ein Kunde/eine Kundin eine Zahlung in der Checkout-Sitzung abschließt. Verwenden Sie das Webhook-Tool des Dashboards oder befolgen Sie die Webhook-Anleitung, um diese Ereignisse zu empfangen und zu verarbeiten. Dies kann zu Folgendem führen:

Senden Sie eine Bestellbestätigung per E-Mail an Ihre Kundinnen/Kunden.
Protokollieren Sie den Verkauf in einer Datenbank.
Starten Sie einen Versand-Workflow.

Überwachen Sie diese Ereignisse, anstatt darauf zu warten, dass Ihre Kundinnen/Kunden auf Ihre Website zurückgeleitet werden. Es ist unzuverlässig, die Ausführung nur über die Landingpage Ihrer Zahlungsseite auszulösen. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Weitere Informationen finden Sie in unserem Fulfillment-Leitfaden für Checkout.

Verarbeiten Sie die folgenden Ereignisse, wenn Sie Zahlungen mit Checkout einziehen:

Ereignis	Beschreibung	Aktion
checkout.session.completed	Wird gesendet, wenn ein Kunde/eine Kundin eine Checkout-Sitzung erfolgreich abschließt.	Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
checkout.session.async_payment_succeeded	Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, erfolgreich ausgeführt wird.	Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
checkout.session.async_payment_failed	Wird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, fehlschlägt.	Benachrichtigen Sie die Kundin/den Kunden über den Fehler und bitten Sie ihn/sie, für einen erneuten Zahlungsversuch zur Sitzung zurückzukehren.