Express Checkout Element

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.

Try the demo

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.

Start with a guide

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')

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.

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.

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',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

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:

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.