Stellen Sie Ihre bestehende Integration mit dem Payment Request Button Element auf das Express Checkout Element um.
Mit dem Payment Request Button Element können Sie Kartenzahlungen nur über Apple Pay, Google Pay oder Link annehmen. Wenn Sie zum Express Checkout Element migrieren, können Sie Kartenzahlungen oder Wallet-Zahlungen über eine oder mehrere Zahlungsschaltflächen annehmen, darunter PayPal. Weitere Informationen finden Sie in unserem Vergleichsleitfaden.
Wenn Ihre bestehende Integration Folgendes verwendet | Gehen Sie wie folgt vor |
---|---|
Payment Intents API zum Erstellen und Verfolgen von Zahlungen oder Speichern von Kartendaten während einer Zahlung | Befolgen Sie die Schritte in diesem Leitfaden, um das Express Checkout Element zu verwenden. |
Charges API mit Token | Migrieren Sie zur Payment Intents API, bevor Sie fortfahren. |
Aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten, in Ihren Einstellungen für Zahlungsmethoden. Sie müssen mindestens eine Zahlungsmethode aktivieren.
Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden. Sie können zusätzliche Zahlungsmethoden aktivieren, die für Ihr Unternehmen und Ihre Kundinnen/Kunden relevant sind. Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite Integrationsoptionen für Zahlungsmethoden und der Preisseite für Gebühren.
Aktualisieren Sie als Nächstes Ihren clientseitigen Code, um den Modus (Zahlung), den Betrag und die Währung zu übergeben. Diese Werte bestimmen, welche Zahlungsmethoden Sie Ihren Kundinnen/Kunden anzeigen möchten.
Wenn Sie beispielsweise die Währung eur
für die PaymentIntent
übergeben und OXXO im Dashboard aktivieren, wird Ihrem Kunden/Ihrer Kundin OXXO nicht angezeigt, da OXXO keine eur
-Zahlungen unterstützt.
Stripe überprüft die Währung, Einschränkungen der Zahlungsmethode und andere Parameter, um eine Liste der unterstützten Zahlungsmethoden zu erstellen. Wir priorisieren Zahlungsmethoden, die die Konversion erhöhen und für die Währung und den Standort der/s Kund/in am relevantesten sind.
Vorher Nachher 'pk_test_TYooMQauvdEDq54NiTphI7jx'const stripe = Stripe(
const stripe = Stripe();const options = { mode: 'payment', amount: 1099, currency: 'usd',};const elements = stripe.elements(options);
Der PaymentIntent
enthält die Zahlungsmethoden, die Ihren Kundinnen und Kunden während des Bezahlvorgangs angezeigt werden. Zahlungsmethoden können Sie über das Dashboard verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion.
Command Line sk_test_4eC39HqLyjWDarjtT1zdp7dccurl https://api.stripe.com/v1/payment_intents \ -u
Wenn Ihre bestehende Integration mehrere Zahlungsmethoden unterstützt oder Sie zusätzlich zu Karten weitere Zahlungsmethoden nutzen möchten, können Sie im Dashboard weitere Zahlungsmethoden aktivieren.
Ersetzen Sie das Payment Request Button Element durch das Express Checkout Element. Die folgenden Beispiele zeigen, wie PaymentRequestButtonElement
durch ExpressCheckoutElement
ersetzt wird.
Sie müssen kein paymentRequest
-Objekt mehr erstellen. Übergeben Sie die Eigenschaften stattdessen einmal über das click
-Ereignis.
Vorher Nachher checkout.html checkout.html Vorher Nachher checkout.js checkout.js<div id="payment-request-button"></div>
<div id="express-checkout-element"> <!-- Mount the Express Checkout Element here --></div>
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true,});const paymentRequestButton = elements.create('paymentRequestButton', { paymentRequest: paymentRequest,});paymentRequestButton.mount("#payment-request-button");paymentRequest.canMakePayment().then(function(result) { if (result) { prButton.mount('#payment-request-button'); } else { document.getElementById('payment-request-button').style.display = 'none'; }});
const expressCheckoutElement = elements.create("expressCheckout");expressCheckoutElement.mount("#express-checkout-element");expressCheckoutElement.on('click', (event) => { const options = { emailRequired: true }; event.resolve(options);});
Überwachen Sie das Ereignis bestätigen, um die Bestätigung zu verarbeiten. Um Zahlungsinformationen zu erfassen und an Stripe zu übermitteln, verwenden Sie stripe.confirmPayment anstelle einzelner Bestätigungsmethoden wie stripe.
.
Anstelle einer PaymentMethod-ID verwendet stripe.
die Elements-Instanz aus dem Express Checkout Element und das Client-Geheimnis aus dem erstellten PaymentIntent
.
Beim Aufruf versucht stripe.
, alle erforderlichen Aktionen durchzuführen, wie z. B. die Authentifizierung Ihrer Kundinnen/Kunden durch Anzeigen eines 3DS-Dialogfelds oder die Weiterleitung an eine Bankautorisierungsseite. Nach der Bestätigung werden Nutzer/innen an die von Ihnen konfigurierte return_url weitergeleitet. Diese entspricht einer Seite auf Ihrer Website, die den Zahlungsstatus angibt.
Wenn Sie möchten, dass der Bezahlvorgang für Kartenzahlungen nur für Zahlungen umgeleitet wird, die dies erfordern, können Sie weiterleiten auf if_
einstellen. Dies gilt nicht für das Express Checkout Element.
Im folgenden Beispiel wird stripe.
durch stripe.
ersetzt.
Vorher NachherpaymentRequest.on('paymentmethod', function(ev) { stripe.confirmCardPayment( '{{CLIENT_SECRET}}', {payment_method: ev.paymentMethod.id}, {handleActions: false} ).then(function(confirmResult) { if (confirmResult.error) { ev.complete('fail'); } else { ev.complete('success'); if (confirmResult.paymentIntent.status === "requires_action") { stripe.confirmCardPayment(clientSecret).then( function(result) { if (result.error) { // The payment failed -- ask your customer for a new payment method. } else { // The payment succeeded. } } ); } else { // The payment succeeded. } } });});
expressCheckoutElement.on('confirm', async (event) => { const {error} = await stripe.confirmPayment({ // `Elements` instance that's used to create the Express Checkout Element. elements, // `clientSecret` from the created PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, // Uncomment below if you only want redirect for redirect-based payments. // redirect: 'if_required', }); if (error) { // This point is reached only if there's an immediate error when confirming the payment. Show the error to your customer (for example, payment details incomplete). } else { // Your customer will be redirected to your `return_url`. }});
Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.
Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.
Neben der Abwicklung des payment_
-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:
Ereignis | Beschreibung | Aktion |
---|---|---|
payment_intent.succeeded | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und wickeln Sie die Bestellung ab. |
payment_intent.processing | Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein payment_ - oder ein payment_ -Ereignis. | Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt. |
payment_intent.payment_failed | Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt. | Wenn eine Zahlung von processing zu payment_ übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an. |