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.
Beta
Klarna on the Express Checkout Element is launching a limited beta in mid October. Reach out here to gain access.
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.
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.
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.
Zahlungsmethoden
Das Express Checkout Element zeigt aktive, unterstützte und eingerichtete Ein-Klick-Zahlungsmethoden an.
- Some payment methods require activation in the 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 | |
|---|---|---|---|---|---|
| Chrome1 | |||||
| Edge | |||||
| Firefox | |||||
| Opera | |||||
| Safari | 2 | ||||
| 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.
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.
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',
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
neverfest. - 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
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.
