Zahlung annehmen
Erstellen Sie ein Zahlungsformular oder verwenden Sie eine vorgefertigte Bezahlseite, um mit der Annahme von Online-Zahlungen zu beginnen.
Betten Sie mit Stripe Checkout ein vorgefertigtes Zahlungsformular auf Ihrer Website ein. Sehen Sie sich diese Integration im Vergleich zu anderen Integrationstypen von Stripe an.
Integrationsaufwand
Integration
Vorgefertigtes Zahlungsformular auf Ihrer Website einbetten
Anpassung der Nutzeroberfläche
Verwenden Sie die Branding-Einstellungen im Stripe-Dashboard, um Checkout an Ihr Website-Design anzupassen.
Stripe einrichtenServerseitig
Registrieren Sie sich zunächst für ein Stripe-Konto.
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
Checkout-Sitzung erstellenServerseitig
Erstellen Sie auf Ihrem Server eine Checkout-Sitzung und legen Sie den ui_mode auf embedded
fest. Sie können die Checkout-Sitzung mit den Posten so konfigurieren, dass auch Optionen wie die Währung enthalten sind.
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.
Checkout verbindenClientseitig
Checkout renders in an iframe that securely sends payment information to Stripe over an HTTPS connection.
Häufiger Fehler
Avoid placing Checkout within another iframe because some payment methods require redirecting to another page for payment confirmation.
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.
Eine Rückgabeseite anzeigen
Nachdem Ihre Kundinnen/Kunden einen Zahlungsversuch unternommen haben, leitet Stripe sie auf eine Rückgabeseite weiter, die Sie auf Ihrer Website hosten. Als Sie die Checkout-Sitzung erstellt haben, haben Sie die URL der Rückgabeseite im Parameter return_url angegeben. Lesen Sie mehr über andere Optionen zum Anpassen des Weiterleitungsverhaltens.
Rufen Sie beim Rendern Ihrer Rückgabeseite den Status der Checkout-Sitzung mithilfe der ID der Checkout-Sitzung in der URL ab. Gehen Sie je nach Sitzungsstatus wie folgt mit dem Ergebnis um:
complete
: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern.open
: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihre Kundinnen/Kunden es nochmals versuchen können.
const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page }
Auf Weiterleitung basierende Zahlungsmethoden
Während der Zahlung leiten einige Zahlungsmethoden die Kundin/den Kunden auf eine Zwischenseite weiter, zum Beispiel eine Bankautorisierungsseite. Wenn sie diese Seite ausgefüllt haben, leitet Stripe sie zu Ihrer Rückgabeseite weiter.
Erfahren Sie mehr über auf Weiterleitung basierende Zahlungsmethoden und das Weiterleitungsverhalten.
Integration testen
So testen Sie die Integration Ihres eingebetteten Zahlungsformulars:
- Erstellen Sie eine eingebettete Checkout-Sitzung und verbinden Sie Checkout auf Ihrer Seite.
- Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein.
- Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein.
- Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein.
- Geben Sie eine beliebige Postleitzahl ein.
- Klicken Sie auf Bezahlen. Sie werden zu Ihrer
return_url
weitergeleitet. - Gehen Sie zum Dashboard und suchen Sie auf der Seite Zahlungsseite nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt.
- Klicken Sie auf Ihre Zahlung, um weitere Details anzuzeigen, wie beispielsweise eine Checkout-Zusammenfassung mit Rechnungsinformationen und die Liste der gekauften Artikel. Sie können diese Informationen zur Abwicklung der Bestellung verwenden.
Erfahren Sie mehr über das Testen Ihrer Integration.
Hier finden Sie weitere Informationen zum Testen Ihrer Integration.