Kartenzahlungen ohne Webhooks akzeptieren
Vorsicht
Stripe empfiehlt, das neuere Payment Element zu verwenden, statt des Card Element. Dadurch können Sie mehrere Zahlungsmethoden mit einem einzelnen Element akzeptieren. Erfahren Sie mehr darüber, wann Sie das Card Element und das Payment Element verwenden sollten.
Wenn Sie mehr Support und Zukunftssicherheit wünschen, nutzen Sie die Standard-Integration für asynchrone Zahlungen.
Mit dieser Integration können Sie auf die Antwort des Clients warten und eine Zahlung auf dem Server abschließen, ohne Webhooks verwenden oder Offline-Ereignisse verarbeiten zu müssen. Auch wenn es zunächst einfacher erscheint, lässt sich diese Integration nur schwer skalieren, wenn Ihr Unternehmen wächst. Es gelten mehrere Beschränkungen:
- Unterstützt nur Karten – Sie müssen mehr programmieren, um ACH und andere beliebte regionale Zahlungsmethoden separat zu unterstützen.
- Risiko der doppelten Abbuchung: Wenn bei jedem Zahlungsversuch Ihrer Kund/innen gleichzeitig ein neuer PaymentIntent erstellt wird, laufen Sie Gefahr, das Kundenkonto aus Versehen doppelt zu belasten. Beachten Sie dazu die Best Practices.
- Zusätzlicher Trip zum Client: Für Karten mit 3D Secure oder solche, die Vorschriften wie denen zur starken Kundenauthentifizierung (SCA) unterliegen, sind zusätzliche Schritte auf dem Client erforderlich.
Beachten Sie diese Beschränkungen, wenn Sie die Integration durchführen möchten. Verwenden Sie andernfalls die Standard-Integration.
Stripe einrichten
Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.
Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:
Kartenangaben erfassenClientseitig
Erfassen Sie Kartendaten auf dem Client mit Stripe.js und Stripe Elements. Elements beinhaltet vorgefertigte Komponenten der Nutzeroberfläche zur Erfassung und Validierung von Kartennummern, Postleitzahlen und Ablaufdaten.
Ein Stripe Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert.
Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber aktivieren, wenn Sie bereit sind, Live-Zahlungen anzunehmen.
PaymentMethod an Ihren Server übermittelnClientseitig
Wenn die PaymentMethod erfolgreich erstellt wurde, senden Sie ihre ID an den Server.
const stripePaymentMethodHandler = async (result) => { if (result.error) { // Show error in payment form } else { // Otherwise send paymentMethod.id to your server (see Step 4) const res = await fetch('/pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ payment_method_id: result.paymentMethod.id, }), }) const paymentResponse = await res.json(); // Handle server response (see Step 4) handleServerResponse(paymentResponse); } }
PaymentIntent erneut bestätigenServerseitig
Dieser Code wird nur ausgeführt, wenn für eine Zahlung weitere Authentifizierungsschritte erforderlich sind, entsprechend der Vorgehensweise im vorherigen Schritt. Der Code selbst ist aber nicht optional, da bei jeder Zahlung ein solcher weiterer Schritt notwendig werden kann.
Bestätigen Sie den PaymentIntent erneut mit demselben Endpoint, den Sie zuvor eingerichtet haben, um die Zahlung abzuschließen und die Bestellung abzuwickeln. Stellen Sie sicher, dass diese Bestätigung innerhalb einer Stunde nach dem Zahlungsversuch erfolgt. Andernfalls schlägt die Zahlung fehl und der Status wird auf requires_payment_method
zurückgesetzt.
Mögliche weitere Aktionen handhabenClientseitig
Schreiben Sie Code für Situationen, in denen Ihre Kund/innen eingreifen müssen. In der Regel werden Zahlungen erfolgreich durchgeführt, nachdem Sie sie in Schritt 4 auf dem Server bestätigt haben. Erfordert der PaymentIntent allerdings weitere Schritte von den Kund/innen, wie etwa die Authentifizierung mit 3D Secure, kommt dieser Code zum Einsatz.
Verwenden Sie stripe.handleCardAction, um die Nutzeroberfläche für die Verarbeitung von Kundeneingaben auszulösen. Bei erfolgreicher Authentifizierung erhält der PaymentIntent den Status requires_confirmation
. Bestätigen Sie dann die PaymentIntent erneut auf Ihrem Server, um die Zahlung abzuschließen.
Verwenden Sie beim Testen eine Testkartennummer, die eine Authentifizierung erfordert (zum Beispiel ), um diesen Ablauf zu erzwingen. Wenn Sie eine Karte verwenden, die keine Authentifizierung erfordert (zum Beispiel ), wird dieser Teil des Ablaufs übersprungen und mit Schritt 4 abgeschlossen.
const handleServerResponse = async (response) => { if (response.error) { // Show error from server on payment form } else if (response.requires_action) { // Use Stripe.js to handle the required card action const { error: errorAction, paymentIntent } = await stripe.handleCardAction(response.payment_intent_client_secret); if (errorAction) { // Show error from Stripe.js in payment form } else { // The card action has been handled // The PaymentIntent can be confirmed again on the server const serverResponse = await fetch('/pay', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ payment_intent_id: paymentIntent.id }) }); handleServerResponse(await serverResponse.json()); } } else { // Show success message } }
Notiz
Die Ausführung von stripe.handleCardAction
kann einige Sekunden dauern. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Lassen Sie stattdessen ein Wartesymbol einblenden, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, lassen Sie eine Fehlermeldung für die Kundin/den Kunden anzeigen, aktivieren Sie das Formular erneut und blenden Sie das Wartesymbol aus. Falls die Kundin/der Kunde weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, führt Stripe.js durch diesen Prozess.
PaymentIntent erneut bestätigenServerseitig
Dieser Code wird nur ausgeführt, wenn für eine Zahlung weitere Authentifizierungsschritte erforderlich sind, entsprechend der Vorgehensweise im vorherigen Schritt. Der Code selbst ist aber nicht optional, da bei jeder Zahlung ein solcher weiterer Schritt notwendig werden kann.
Bestätigen Sie den PaymentIntent erneut mit demselben Endpoint, den Sie zuvor eingerichtet haben, um die Zahlung abzuschließen und die Bestellung abzuwickeln. Stellen Sie sicher, dass diese Bestätigung innerhalb einer Stunde nach dem Zahlungsversuch erfolgt. Andernfalls schlägt die Zahlung fehl und der Status wird auf requires_payment_method
zurückgesetzt.
Integration testen
Sie können im Test-Modus mehrere Testkarten einsetzen, um sicherzustellen, dass Ihre Integration bereit für den Einsatz in einer Produktionsumgebung ist. Die Karten können Sie mit beliebigen Prüfziffern (CVCs) und Ablaufdaten verwenden.
Nummer | Beschreibung |
---|---|
Zahlung ist erfolgreich und wird sofort verarbeitet. | |
Erfordert Authentifizierung. Stripe veranlasst ein Modal, das den Kunden um Authentifizierung bittet. | |
Zahlung schlägt immer mit dem Ablehnungscode insufficient_funds fehl. |
Eine vollständige Liste der Testkarten finden Sie in unserem Leitfaden zum Testbetrieb.