Auf das Express Checkout Element umstellen (2024)

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 verwendetGehen Sie wie folgt vor
Payment Intents API zum Erstellen und Verfolgen von Zahlungen oder Speichern von Kartendaten während einer ZahlungBefolgen Sie die Schritte in diesem Leitfaden, um das Express Checkout Element zu verwenden.
Charges API mit TokenMigrieren Sie zur Payment Intents API, bevor Sie fortfahren.
Zahlungsmethoden aktivieren

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.

Eine Elements-Instanz aktualisierenClientseitig

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

const stripe = Stripe(

'pk_test_TYooMQauvdEDq54NiTphI7jx'

);const elements = stripe.elements();

const stripe = Stripe(

);const options = { mode: 'payment', amount: 1099, currency: 'usd',};const elements = stripe.elements(options);

Aktualisieren Sie Ihren Erstellungsaufruf für PaymentIntentsServerseitig

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

curl https://api.stripe.com/v1/payment_intents \ -u

sk_test_4eC39HqLyjWDarjtT1zdp7dc

: \ -H "Stripe-Version: 2024-06-20" \ -d "amount"=1099 \ -d "currency"="usd" \ -d "automatic_payment_methods[enabled]"=true \

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.

Das Express Checkout Element hinzufügenClientseitig

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

<div id="payment-request-button"></div>

checkout.html

<div id="express-checkout-element"> <!-- Mount the Express Checkout Element here --></div>

Vorher

Nachher

checkout.js

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'; }});

checkout.js

const expressCheckoutElement = elements.create("expressCheckout");expressCheckoutElement.mount("#express-checkout-element");expressCheckoutElement.on('click', (event) => { const options = { emailRequired: true }; event.resolve(options);});

Die Bestätigung der Zahlungsmethode aktualisierenClientseitig

Ü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.confirmCardPayment.

Anstelle einer PaymentMethod-ID verwendet stripe.confirmPayment die Elements-Instanz aus dem Express Checkout Element und das Client-Geheimnis aus dem erstellten PaymentIntent.

Beim Aufruf versucht stripe.confirmPayment, 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_required einstellen. Dies gilt nicht für das Express Checkout Element.

Im folgenden Beispiel wird stripe.confirmCardPayment durch stripe.confirmPayment ersetzt.

Vorher

Nachher

paymentRequest.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`. }});

Ereignisse nach der Zahlung verarbeitenServerseitig

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_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

EreignisBeschreibungAktion
payment_intent.succeededWird 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.processingWird 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_intent.succeeded- oder ein payment_intent.payment_failed-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_failedWird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt.Wenn eine Zahlung von processing zu payment_failed übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an.
Auf das Express Checkout Element umstellen (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Kareem Mueller DO

Last Updated:

Views: 5639

Rating: 4.6 / 5 (46 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Kareem Mueller DO

Birthday: 1997-01-04

Address: Apt. 156 12935 Runolfsdottir Mission, Greenfort, MN 74384-6749

Phone: +16704982844747

Job: Corporate Administration Planner

Hobby: Mountain biking, Jewelry making, Stone skipping, Lacemaking, Knife making, Scrapbooking, Letterboxing

Introduction: My name is Kareem Mueller DO, I am a vivacious, super, thoughtful, excited, handsome, beautiful, combative person who loves writing and wants to share my knowledge and understanding with you.