Express Checkout Element (2024)

The Express Checkout Element gives you a single integration for accepting payments through one-click payment buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, and Amazon Pay.

With this integration, you can:

• Dynamically sort payment buttons based on a customer’s location.
• Add payment buttons without any frontend changes.
• Integrate Elements seamlessly by reusing an existing Elements instance to save time.

Create an Express Checkout Element

This code creates an elements group with an Express Checkout Element and mounts it to the 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')

Make sure the #express-checkout-element container has enough space to display the payment buttons by setting its width to at least 150px.

Payment methods

The Express Checkout Element presents one-click payment methods that are active, supported, and set up.

• Some payment methods require activation in the Dashboard.
• Payment methods are only available when the customer uses a supported browser and pays in a supported currency.
• Some payment methods require setup actions from the customer. For example, a customer won’t see a Google Pay button if they don’t have Google Pay set up.

The element sorts payment methods by relevance to your customer.

To control these behaviors, you can customize the payment methods.

Supported browsers

Certain payment methods work with specific browsers.

Layout

By default, when the Express Checkout Element displays multiple buttons, it arranges the buttons in a grid based on available space, and shows an overflow menu if necessary.

You can override this default and specify a grid layout yourself with the layout option.

Text

You can control a button’s text by selecting a buttonType. Each wallet offers its own types.

This example code includes the call to action “Buy” or “Buy now” for buttons that support it. Then, it specifies the locale de to get their German equivalents.

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

Appearance

You can’t fully customize the appearance of Express Checkout Element buttons because each payment method sets its own logo and brand colors. You can customize the following options:

• Button height
• Border radius using variables with the Appearance API
• Button themes

This example code sets up an elements group with a light theme and 36px border radius, makes buttons 50px tall, and overrides the theme to use the white-outline version of the Apple Pay button.

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

We support the following themes:

Customize payment methods

You can’t specify which payment methods to display. For example, you can’t force a Google Pay button to appear if your customer’s device doesn’t support Google Pay.

But you can customize payment method behavior in various ways, such as:

• You can activate or deactivate payment methods from the Dashboard.
• You can override Stripe’s default logic of sorting payment methods by relevance. Use the paymentMethodOrder option to set your preferred order.
• If there is too little room in the layout, low-relevance payment methods might appear in an overflow menu. Customize when the menu appears using the layout option.
• To prevent Apple Pay or Google Pay from appearing, set paymentMethods.applePay or paymentMethods.googlePay to never.
• To allow Apple Pay or Google Pay to appear when they’re not set up, set paymentMethods.applePay or paymentMethods.googlePay to always. This still won’t force them to appear on unsupported platforms, or when the payment is in an unsupported currency.