Auf das Express Checkout Element umstellen (2024)

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.

const stripe = Stripe(
'pk_test_qblFNYngBkEdjEZ16jxxoWSM'
);const elements = stripe.elements();

const stripe = Stripe(
'pk_test_qblFNYngBkEdjEZ16jxxoWSM'
See Also
Express Checkout ElementExpress Checkout ElementAccept a payment with the Express Checkout ElementStripe Checkout: Mehr Umsatz mit optimiertem Bezahlvorgang
);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.

curl https://api.stripe.com/v1/payment_intents \  -u 
sk_test_26PHem9AhJZvU623DfE1x4sd
: \  -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.

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.

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

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

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: