Künftige Zahlungen einrichten

Erfahren Sie, wie Sie Zahlungsdaten in einer Checkout-Sitzung speichern und Ihre Kundinnen und Kunden später belasten können.

Verwenden Sie den Einrichtungsmodus von Checkout, um Zahlungsdaten von Kundinnen/Kunden zu erfassen, die Sie später wiederverwenden können. Der Einrichtungsmodus verwendet die Setup Intents API, um Zahlungsmethoden zu erstellen.

Stripe einrichten
Serverseitig

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Checkout-Sitzung erstellen
Serverseitig

Erstellen Sie von Ihrem Server aus eine Checkout-Sitzung und setzen Sie den ui_mode-Endpoint auf embedded. Um eine Checkout-Sitzung im Setup-Modus zu erstellen, legen Sie den Modus auf setup fest.

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.

Sie können optional den Kundenparameter angeben, um die erstellte Zahlungsmethode automatisch einem bestehenden Kunden/einer bestehenden Kundin zuzuordnen.

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

Zahlungsmethoden

Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden. Sie können einzelne Zahlungsmethoden im Stripe Dashboard aktivieren oder deaktivieren. In Checkout wertet Stripe die Währung und etwaige Einschränkungen aus und zeigt den Kundinnen/Kunden dann dynamisch die unterstützten Zahlungsmethoden an.

Um zu sehen, wie Ihre Zahlungsmethoden Kundinnen und Kunden angezeigt werden, geben Sie eine Transaktions-ID ein oder legen Sie einen Bestellbetrag und eine Währung im Dashboard fest.

Sie können Apple Pay und Google Pay in Ihren Einstellungen für Zahlungsmethoden aktivieren. Standardmäßig ist Apple Pay aktiviert und Google Pay deaktiviert. In einigen Fällen filtert Stripe die Optionen jedoch heraus, auch wenn sie aktiviert sind. Wir filtern Google Pay, wenn Sie automatische Steuern aktivieren, ohne eine Versandadresse zu erfassen.

Die von Stripe gehosteten Checkout-Seiten benötigen keine Integrationsänderungen, um Apple Pay oder Google Pay zu aktivieren. Stripe verarbeitet diese Zahlungen genauso wie andere Kartenzahlungen.

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.

Checkout-Sitzung abrufen
Serverseitig

Nachdem eine Kundin/ein Kunde die Checkout-Sitzung erfolgreich durchlaufen hat, müssen Sie das Session-Objekt abrufen. Es gibt dafür zwei Möglichkeiten:

Asynchron: Verarbeiten Sie checkout.session.completedWebhooks, die ein Session-Objekt enthalten. Hier erfahren Sie mehr über das Einrichten von Webhooks
Synchron: Rufen Sie die Sitzungs-ID von der return_url, wenn ein/e Nutzer/in auf Ihre Seite zurückgeleitet wird. Verwenden Sie die Sitzungs-ID, um das Sitzungsobjekt abzurufen.

Die Wahl hängt von Ihrer Toleranz gegenüber Kaufabbrüchen ab, da Kundinnen/Kunden in manchen Fällen nach erfolgreicher Zahlung nicht zur return_url weitergeleitet werden. Das passiert zum Beispiel, wenn sie die Registerkarte im Browser schließen, bevor die Weiterleitung erfolgt ist. Die Verarbeitung von Webhooks verhindert diese Form von Kaufabbrüchen in Ihrer Integration.

Nachdem Sie das Session-Objekt abgerufen haben, erfassen Sie den Wert des Schlüssels setup_intent. Dabei handelt es sich um die ID des während der Checkout-Sitzung erstellten SetupIntent. Ein SetupIntent ist ein Objekt, mit dem die Bankkontoinformationen von Kundinnen und Kunden für zukünftige Zahlungen eingerichtet werden.

Beispiel-Nutzlast von checkout.session.completed:

{
  "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0",
  "object": "event",
  "api_version": "2019-03-14",
  "created": 1561420781,
  "data": {
    "object": {
      "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k",
      "object": "checkout.session",
      "billing_address_collection": null,
      "client_reference_id": null,
      "customer": "",
      "customer_email": null,
      "display_items": [],
      "mode": "setup",
      "setup_intent": "seti_1EzVO3HssDVaQm2PJjXHmLlM",
      "submit_type": null,
      "subscription": null,
      "success_url": "https://example.com/success"
    }
  },
  "livemode": false,
  "pending_webhooks": 1,
  "request": {
    "id": null,
    "idempotency_key": null
  },
  "type": "checkout.session.completed"
}

Beachten Sie die setup_intent-ID für den nächsten Schritt.

SetupIntent abrufen
Serverseitig

Verwenden Sie die SetupIntent-ID, um das SetupIntent-Objekt abzurufen. Das zurückgegebene Objekt enthält eine payment_method-ID, die Sie im nächsten Schritt einem Kunden/einer Kundin zuordnen können.

Notiz

Wenn Sie diese Informationen synchron über die Stripe-API anfordern (anstatt Webhooks zu verarbeiten), können Sie den vorherigen Schritt mit diesem Schritt kombinieren, indem Sie das SetupIntent-Objekt in der Anfrage an den Endpoint /v1/checkout/session erweitern. So müssen Sie nicht zwei Netzwerkanforderungen stellen, um auf die neu erstellte PaymentMethod-ID zugreifen zu können.

Die Zahlungsmethode später belasten
Serverseitig

Wenn Sie die Checkout-Sitzung nicht mit einem bestehenden Kunden/einer bestehenden Kundin erstellt haben, verwenden Sie die ID der PaymentMethod, um die PaymentMethod an einen Kunden/eine Kundin anzuhängen. Nachdem Sie die PaymentMethod einem Kunden/einer Kundin zugeordnet haben, können Sie eine Off-Session-Zahlung mit einem PaymentIntent vornehmen:

Setzen Sie customer auf die ID der Kundin/des Kunden und payment_method auf die ID der PaymentMethod.
Legen Sie off_session auf true fest, um anzugeben, dass sich die Kundin/der Kunde während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts, nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundeninformationen aus einer vorherigen On-Session-Transaktion an. Wenn die Bedingungen für eine Ausnahme nicht erfüllt sind, gibt der PaymentIntent möglicherweise einen Fehler aus.
Legen Sie den Wert der Eigenschaft „confirm“ des PaymentIntent auf true fest. Dadurch erfolgt die Bestätigung sofort, wenn Sie den PaymentIntent erstellen.

Schlägt ein Zahlungsversuch fehl, schlägt die Anfrage ebenfalls mit einem HTTP-Statuscode 402 fehl, und der Status des PaymentIntent lautet requires_payment_method. Fordern Sie Ihre Kundinnen/Kunden auf, zu Ihrer Anwendung zurückzukehren (z. B. per E-Mail oder In-App-Benachrichtigung) und leiten Sie sie zu einer neuen Checkout-Sitzung weiter, um eine andere Zahlungsmethode auszuwählen.

Künftige Zahlungen einrichten

Erfahren Sie, wie Sie Zahlungsdaten in einer Checkout-Sitzung speichern und Ihre Kundinnen und Kunden später belasten können.

Stripe einrichtenServerseitig

Checkout-Sitzung erstellenServerseitig