Express Checkout Element
Show multiple one-click payment buttons with a single component.
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.
Beta
Klarna on the Express Checkout Element is launching a limited beta in mid October. Reach out here to gain access.
Try the demo
In the following demo, you can toggle some of the prebuilt options to change the background color, layout, size, and shipping address collection of the payment interface. The demo displays Google Pay and Apple Pay only on their available platforms. Payment Method buttons are only shown in their supported countries.
If you don’t see the demo, try viewing this page in a supported browser.
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')
Note
Express Checkout Element dynamically resizes Payment Method buttons to fill available space, but individual buttons can have different minimum widths depending on the Payment Method. Be sure to test at different screen sizes, especially if mounting Express Checkout Element in a narrow container.
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.
Apple Pay | Google Pay | Link | PayPal | Amazon Pay | |
---|---|---|---|---|---|
Chrome1 | |||||
Edge | |||||
Firefox | |||||
Opera | |||||
Safari | 2 | ||||
Chrome on iOS 16+ | |||||
Firefox on iOS 16+ | |||||
Edge on iOS 16+ |
1Other chromium browsers might be supported. For more information, see supported browsers.
2When using an iframe, its origin must match the top-level origin (except for Safari 17 when specifying allow="payment"
attribute). Two pages have the same origin if the protocol, host (full domain name), and port (if specified) are the same for both pages.
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', klarna: 'pay', } } const elements = stripe.elements({ locale: 'de',
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
Note
The Apple Pay button automatically resizes when border radius increases beyond a certain threshold. If modifying the default border radius, make sure to test it with all active payment methods.
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.