Zahlungen für bestehende Kundinnen/Kunden

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

Eine Checkout-Sitzung ermöglicht es Käuferinnen und Käufern, ihre Zahlungsinformationen einzugeben. Wenn der/die Käufer/in ein/e bestehende/r Kunde/Kundin ist, können Sie die Checkout-Sitzung so konfigurieren, dass die Details mit einer der gespeicherten Karten des Kunden/der Kundin vorausgefüllt werden.

Checkout-Sitzung erstellen
Serverseitig

Checkout unterstützt die Wiederverwendung vorhandener Kundenobjekte mit customer-Parameter. Bei der Wiederverwendung bestehender Kundinnen/Kunden werden alle von Checkout erstellten Objekte, wie Payment Intents und Subscriptions, diesem Kundenobjekt zugeordnet.

Erstellen Sie von Ihrem Server aus eine Checkout-Sitzung und setzen Sie den ui_mode-Endpoint auf embedded.

Um Kundinnen/Kunden zu einer nutzerdefinierten Seite zurückzuleiten, die Sie auf Ihrer Website hosten, geben Sie die URL dieser Seite im Parameter return_url an. Fügen Sie die Vorlagenvariable {CHECKOUT_SESSION_ID} in die URL ein, um den Status der Sitzung auf der Rückgabeseite abzurufen. Checkout ersetzt die Variable vor der Weiterleitung automatisch durch die Checkout-Sitzungs-ID.

Erfahren Sie mehr über das Konfigurieren der Rückgabeseite und andere Optionen zum Anpassen des Weiterleitungsverhaltens.

Nachdem Sie die Checkout-Sitzung erstellt haben, verwenden Sie das client_secret, das in der Antwort auf Checkout verbinden zurückgegeben wurde.

OptionalWeitere gespeicherte Zahlungsmethoden anzeigen
Serverseitig

Checkout verbinden
Clientseitig

Checkout ist als Teil von Stripe.js verfügbar. Nehmen Sie das Stripe.js-Skript in Ihre Seite auf, indem Sie es zum Header Ihrer HTML-Datei hinzufügen. Als Nächstes erstellen Sie einen leeren DOM-Knoten (Container), der zum Verbinden verwendet wird.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Initialisieren Sie Stripe.js mit Ihrem veröffentlichbaren API-Schlüssel.

Erstellen Sie eine asynchrone fetchClientSecret-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an options, wenn Sie die Checkout-Instanz erstellen:

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout wird in einem iFrame gerendert, der Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe sendet.

Häufiger Fehler

Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da bei einigen Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung erforderlich ist.

Erscheinungsbild anpassen

Passen Sie Checkout an das Design Ihrer Website an, indem Sie Hintergrundfarbe, Schaltflächenfarbe, Rahmenradius und Schriftarten in den Branding-Einstellungen Ihres Kontos festlegen.

Checkout wird standardmäßig ohne externes Padding oder Ränder gerendert. Um Ihren gewünschten Rand hinzuzufügen (z. B. 16px auf allen Seiten), empfehlen wir, ein Container-Element zu verwenden.

Felder auf der Zahlungsseite vorab ausfüllen

Wenn alle folgenden Bedingungen erfüllt sind, füllt Checkout die Felder E-Mail, Name, Karte und Rechnungsadresse auf der Zahlungsseite vorab mit den Angaben aus der gespeicherten Karte des Kunden/der Kundin aus:

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 Ihr Kunde/Ihre Kundin mehrere gespeicherte Karten hat, übernimmt Checkout die Details der Karte vorab, wobei die folgende Priorisierung gilt:

Im payment-Modus übernimmt Stripe die Angaben zur neuesten gespeicherten Karte der Kundin/des Kunden vorab in die Felder.
Im subscription-Modus füllt Stripe die Standardzahlungsmethode des Kunden/der Kundin vorab aus, wenn es sich um eine Karte handelt. Andernfalls übernimmt Stripe die neueste gespeicherte Karte vorab.

Wenn Checkout eine Versandadresse erfasst, füllt Checkout die Felder für die Versandadresse vorab aus, wenn die shipping.address des Kunden/der Kundin mit den unterstützten Ländern der Checkout-Sitzung übereinstimmt.

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.

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.