Express Checkout Element (2025)

Zeigen Sie mehrere Schaltflächen für Zahlungen mit einem Klick mit einer einzigen Komponente an.

Das Express Checkout Element bietet Ihnen eine zentrale Integration, mit der Sie Zahlungen über eine Schaltfläche mit nur einem Klick annehmen können. Zu den unterstützten Zahlungsmethoden zählen Link, Apple Pay, Google Pay, PayPal und Amazon Pay.

Mit dieser Integration können Sie Folgendes durchführen:

Sortieren Sie die Zahlungsschaltflächen dynamisch nach dem Kundenstandort.
Fügen Sie Zahlungsschaltflächen ohne Änderungen am Frontend hinzu.
Integrieren Sie Elements nahtlos und sparen Zeit, indem Sie eine vorhandene Elements-Instanz wiederverwenden.

Demoversion testen

In der folgenden Demo können Sie einige der vorgefertigten Optionen ein- und ausschalten, um die Hintergrundfarbe, das Layout, die Größe und die Versandadressenerfassung der Zahlungsoberfläche zu ändern. Die Demo zeigt Google Pay und Apple Pay nur auf den jeweils verfügbaren Plattformen an. Schaltflächen für Zahlungsmethoden werden nur in den unterstützten Ländern angezeigt.

Wenn Sie die Demo nicht sehen, versuchen Sie, diese Seite in einem unterstützten Browser anzuzeigen.

Mit einem Leitfaden beginnen

Zahlung annehmenErstellen Sie eine Integration mit dem Express Checkout Element.

Auf das Express Checkout Element umstellenStellen Sie vom Payment Request Button Element auf das Web-Express Checkout Element um.

Stripe.js-Referenz anzeigen

Ein Express Checkout Element erstellen

Dieser Code erstellt eine Elements-Gruppe mit einem Express Checkout Element und verbindet es mit dem DOM.

Zahlungsmethoden

Das Express Checkout Element zeigt aktive, unterstützte und eingerichtete Ein-Klick-Zahlungsmethoden an.

Einige Zahlungsmethoden erfordern eine Aktivierung im Dashboard.
Zahlungsmethoden sind nur verfügbar, wenn der Kunde/die Kundin einen unterstützten Browser verwendet und in einer unterstützten Währung bezahlt.
Einige Zahlungsmethoden erfordern Einrichtungsschritte vom Kunden/von der Kundin. Beispielsweise wird einem Kunden/einer Kundin eine Google Pay-Schaltfläche nicht angezeigt, wenn Google Pay nicht eingerichtet ist.

Das Element sortiert Zahlungsmethoden nach Relevanz für Ihre Kundinnen und Kunden.

Um dieses Verhalten zu steuern, können Sie die Zahlungsmethoden anpassen.

Unterstützte Browser

Bestimmte Zahlungsmethoden funktionieren mit speziellen Browsern.

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay
Chrome¹
Edge
Firefox
Opera
Safari	²
Chrome unter iOS 16+
Firefox unter iOS 16+
Edge in iOS 16+

¹Andere Chromium-Browser werden möglicherweise unterstützt. Weitere Informationen finden Sie unter unterstützte Browser.

²Wenn Sie einen iFrame verwenden, muss sein Ursprung mit dem Ursprung der obersten Ebene übereinstimmen (mit Ausnahme von Safari 17, wenn Sie das Attribut allow="payment" angeben). Zwei Seiten haben denselben Ursprung, wenn Protokoll, Host (vollständiger Domain-Name) und Port (falls angegeben) für beide Seiten gleich sind.

Anordnung

Wenn das Express Checkout Element mehrere Schaltflächen anzeigt, werden die Schaltflächen standardmäßig in einem Raster basierend auf dem verfügbaren Platz angeordnet, und bei Bedarf wird ein Überlaufmenü angezeigt.

Sie können diese Standardeinstellung überschreiben und selbst ein Rasterlayout mit der Option für das Layout angeben.

Text

Sie können den Text einer Schaltfläche steuern, indem Sie einen buttonType auswählen. Jedes Wallet bietet seine eigenen Typen.

Link bietet nur einen Schaltflächentyp mit der Handlungsaufforderung „Schneller bezahlen“ an.

Wir versuchen, das Gebietsschema Ihres Kunden/Ihrer Kundin zu erkennen, um den Text der Schaltfläche lokalisieren zu können. Sie können auch ein Gebietsschema angeben.

Erscheinungsbild

Sie können das Erscheinungsbild der Express Checkout Element-Schaltflächen nicht vollständig anpassen, da jede Zahlungsmethode ihr eigenes Logo und eigene Markenfarben hat. Sie können die folgenden Optionen anpassen:

Tastenhöhe
Radius der Umrandung mithilfe von Variablen mit der Appearance API
Schaltflächendesigns

Dieser Beispielcode richtet eine Elementgruppe mit einem hellen Design und einem Rahmenradius ein, legt die Höhe der Schaltflächen auf 50px fest und setzt das Design außer Kraft, um die Version der Apple Pay-Schaltfläche mit weißer Umrandung zu verwenden.

const appearance = { theme: 'stripe', variables: { borderRadius: '36px', }}const expressCheckoutOptions = { buttonHeight: 50, buttonTheme: {

Wir unterstützen folgende Designs:

Link verfügt über ein einzelnes Schaltflächendesign, das auf hellem oder dunklem Hintergrund gelesen werden kann.

Zahlungsmethoden anpassen

Sie können nicht angeben, welche Zahlungsmethoden angezeigt werden sollen. Beispielsweise können Sie die Anzeige einer Google Pay-Schaltfläche nicht erzwingen, wenn das Gerät Ihres Kunden/Ihrer Kundin Google Pay nicht unterstützt.

Sie können das Verhalten der Zahlungsmethode jedoch auf verschiedene Weise anpassen, z. B.:

Sie können Zahlungsmethoden über das Dashboard aktivieren und deaktivieren.
Sie können die Standardlogik von Stripe zum Sortieren von Zahlungsmethoden nach Relevanz außer Kraft setzen. Verwenden Sie die Option paymentMethodOrder, um Ihre bevorzugte Reihenfolge festzulegen.
Wenn zu wenig Platz im Layout vorhanden ist, werden möglicherweise weniger relevante Zahlungsmethoden in einem Überlaufmenü angezeigt. Passen Sie mit der Option Layout an, wann das Menü angezeigt wird.
Um das Erscheinen von Apple Pay oder Google Pay zu verhindern, legen Sie paymentMethods.applePay oder paymentMethods.googlePay auf never fest.
Damit Apple Pay oder Google Pay angezeigt wird, wenn die Optionen nicht eingerichtet sind, setzen Sie paymentMethods.applePay oder paymentMethods.googlePay auf always. Dadurch werden sie immer noch nicht auf unterstützten Plattformen angezeigt oder wenn die Zahlung in einer nicht unterstützten Währung erfolgt.

Regionale Aspekte
Finnland
Schweden

Laut der Bestimmungen in Finnland und Schweden müssen Sie in diesen beiden Ländern beim Bezahlvorgang zuerst die Zahlung per Debitkarte anbieten, bevor Sie Kreditkartenzahlungen anzeigen dürfen.