Zahlungen mit dem Express Checkout Element annehmen
Verwenden Sie eine einzige Integration, um Zahlungen über die Zahlungsschaltflächen mit einem Klick anzunehmen.
Das Express Checkout Element bietet Ihnen einen zentrale Integration, mit der Sie Zahlungen über Schaltflächen mit nur einem Klick annehmen können, einschließlich Link, PayPal, Apple Pay, Google Pay und Amazon Pay.
Kundinnen/Kunden sehen unterschiedliche Zahlungsschaltflächen, je nachdem, welche Kombination von Gerät und Browser unterstützt wird. Kompatible Geräte unterstützen Google Pay und Link automatisch. Die Unterstützung von Apple Pay und PayPal erfordert zusätzliche Schritte.
Wir empfehlen Ihnen, bei Verwendung des Express Checkout Element Zahlungsdetails zu erfassen, bevor ein Intent erstellt wird. Wenn Sie zuvor das Payment Element integriert haben, müssen Sie möglicherweise Ihre Integration auf diese bessere Option aktualisieren.
Bevor Sie loslegen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
- Ihrem Browser eine Zahlungsmethode hinzufügen. Beispiel: Sie können Ihrem Google Pay-Konto bzw. Ihrer Wallet für Safari eine Karte hinzufügen.
- Ihre Anwendung über HTTPS bereitstellen. Dies ist eine Voraussetzung sowohl in der Entwicklung als auch in der Produktion. Sie können einen Dienst wie ngrok verwenden.
- Registrieren und verifizieren Sie Ihre Domain im Test-Modus und im Live-Modus.
- Erstellen Sie ein PayPal Sandbox-Konto, um Ihre Integration zu testen.
Stripe einrichtenServerseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
Zahlungsmethoden aktivieren![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
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 und Kunden relevant sind. Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf unserer Seite Integrationsoptionen für Zahlungsmethoden und der Preisseite für Gebühren.
Erstellen und verbinden Sie das Express Bezahlvorgang ElementClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Das Express Checkout Element enthält einen iFrame, der die Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss außerdem mit https://
und nicht mit http://
beginnen, damit Ihre Integration funktioniert.
Kundendaten erfassen und Einzelposten anzeigenClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Handhaben Sie das Klickereignis, um Optionen an das Express Checkout Element zu übergeben. Deaktivieren Sie die Interaktion auf Ihrer Checkout-Seite, nachdem Sie das Klickereignis erhalten haben.
Erstellen Sie ein PaymentIntentServerseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Das PaymentIntent-Objekt von Stripe repräsentiert Ihre Absicht, Zahlungen einzuziehen, und dokumentiert Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang.
Erstellen Sie einen PaymentIntent mit einem Betrag und einer Währung auf Ihrem Server. Dies muss mit den Angaben übereinstimmen, die Sie für die Instanz stripe.
in Schritt 3 festgelegt haben. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, wie viel Sie berechnen möchten, und nicht auf dem Client. So wird verhindert, dass böswillige Kunden und Kundinnen ihre eigenen Preise festlegen.
Der zurückgegebene PaymentIntent enthält ein Client-Geheimnis, das clientseitig verwendet wird, um den Zahlungsvorgang sicher abzuschließen, ohne das gesamte PaymentIntent-Objekt zu übergeben. Es gibt verschiedene Möglichkeiten, das Client-Geheimnis an den Client zu übergeben.
Zahlung an Stripe sendenClientseitig![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Verwenden Sie stripe.confirmPayment, um die Zahlung mit den Angaben aus dem Express Checkout Element abzuschließen.
Notiz
Für Amazon Pay muss der Betrag, den Sie im PaymentIntent bestätigen, mit dem Betrag übereinstimmen, den der Käufer/die Käuferin vorab autorisiert hat, um zu verhindern, dass die Zahlung abgelehnt wird.
Geben Sie eine return_url für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Website weitergeleitet, bevor sie zur return_
weitergeleitet werden. Payments leitet bei erfolgreicher Zahlung sofort zur return_
weiter.
Wenn Sie nach Zahlungsabschluss keine Weiterleitung wünschen, legen Sie redirect auf if_
fest. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.
Integration testen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Testen Sie die Integration der einzelnen Zahlungsmethoden, bevor Sie live gehen. Informationen zur Kompatibilität der Browser mit einer Zahlungsmethode finden Sie unter unterstützte Browser. Wenn Sie das Express Checkout Element in einem iFrame verwenden, muss das allow-Attribut des iFrame auf payment *
gesetzt werden.
Disclose Stripe to your customers![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Stripe to use data in these ways. For more information, visit our privacy center.