Express Checkout Element (2025)

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

Express Checkout Element (1)

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 erstellenExpress Checkout Element (4)

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

const appearance = { /* appearance */ }const options = { /* options */ }const elements = stripe.elements({ mode: 'payment', amount: 1099, currency: 'usd', appearance,})const expressCheckoutElement = elements.create('expressCheckout', options)expressCheckoutElement.mount('#express-checkout-element')

Stellen Sie sicher, dass Container #express-checkout-element genügend Platz hat, um die Zahlungsschaltflächen anzuzeigen, indem Sie seine Breite auf mindestens 150px einstellen.

ZahlungsmethodenExpress Checkout Element (5)

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 BrowserExpress Checkout Element (6)

Bestimmte Zahlungsmethoden funktionieren mit speziellen Browsern.

Apple PayGoogle PayLinkPayPalAmazon Pay
Chrome1
Edge
Firefox
Opera
Safari2
Chrome unter iOS 16+
Firefox unter iOS 16+
Edge in iOS 16+

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

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

AnordnungExpress Checkout Element (7)

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.

TextExpress Checkout Element (8)

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.

Dieser Beispielcode enthält den Handlungsaufruf „Kaufen“ oder „Jetzt kaufen“ für Schaltflächen, die dies unterstützen. Dann wird das Gebietsschema de angegeben, um deren deutsche Entsprechungen zu erhalten.

const expressCheckoutOptions = { buttonType: { applePay: 'buy', googlePay: 'buy', paypal: 'buynow' }}const elements = stripe.elements({ locale: 'de', mode: 'payment',

ErscheinungsbildExpress Checkout Element (9)

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 anpassenExpress Checkout Element (10)

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.

Express Checkout Element (2025)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Arielle Torp

Last Updated:

Views: 5629

Rating: 4 / 5 (41 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Arielle Torp

Birthday: 1997-09-20

Address: 87313 Erdman Vista, North Dustinborough, WA 37563

Phone: +97216742823598

Job: Central Technology Officer

Hobby: Taekwondo, Macrame, Foreign language learning, Kite flying, Cooking, Skiing, Computer programming

Introduction: My name is Arielle Torp, I am a comfortable, kind, zealous, lovely, jolly, colorful, adventurous person who loves writing and wants to share my knowledge and understanding with you.