Express Checkout Element

The Express Checkout Element is an integration for accepting payments through one-click payment method buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and Amazon Pay.

With this integration, you can:

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

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 dont see the demo, try viewing this page in a supported browser.

Start with a guide

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 wont see a Google Pay button if they dont have Google Pay set up.
• Register your domain in both your testing environment and live mode.

The element sorts payment methods by relevance to your customer.

You can also add custom payment methods to the Express Checkout Element button row using the customPaymentMethods option on stripe.elements().

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

Supported browsers

Certain payment methods work with specific browsers.

In-app webview support

In-app webview support differs from browser support. The table lists which Express Checkout Element payment methods support in-app webviews.

Webview support is in addition to each payment methods standard browser and eligibility requirements. Use the Express Checkout Element availablepaymentmethodschange event to detect which payment methods are available in your customers current environment. For mobile app integrations, consider using the iOS SDK or Android SDK.

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 buttons 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 cant 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 control which payment methods appear. However, wallet availability still applies. For example, you cant force a Google Pay button to appear if your customers device doesnt 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 Stripes 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 theyre not set up, set paymentMethods.applePay or paymentMethods.googlePay to always. This still wont force them to appear on unsupported platforms, or when the payment is in an unsupported currency.
• You can add custom payment method buttons using the customPaymentMethods option. A custom payment method button doesnt appear if you provide an ID that isnt a valid cpmt_ ID set up in the Dashboard, or if its handleRender method throws an error.

Check available payment methods

Listen for the availablepaymentmethodschange event to check which wallets are available for the Express Checkout Element to display. If no wallets are available, provide another option for your customer to pay.

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <ExpressCheckoutElement
        onAvailablePaymentMethodsChange={({ paymentMethods }) => {
          if (paymentMethods) {
            setEceActive(true);

Alternatively, hide the entire Express Checkout Element until you know the element has methods to display.

() => {
  const [eceActive, setEceActive] = useState(false);

  return (
    <div>
      <OneClickCheckoutContainer hidden={!eceActive}>
        <ExpressCheckoutElement
          onAvailablePaymentMethodsChange={({ paymentMethods }) => {
            if (paymentMethods) {

The same event is available on the element object when created without React.

const expressCheckoutElement = elements.create("expressCheckout", { ... });

expressCheckoutElement.on("availablepaymentmethodschange", ({ paymentMethods }) => {
  console.log(paymentMethods);
});

expressCheckoutElement.mount("#express-checkout-element");