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 customer’s 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 don’t 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 won’t see a Google Pay button if they don’t 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.

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

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.

Check available payment methods

Listen for the ready 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
        onReady={({ availablePaymentMethods }) => {
          if (availablePaymentMethods) {
            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
          onReady={({ availablePaymentMethods }) => {
            if (availablePaymentMethods) {

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

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

expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => {
  console.log(availablePaymentMethods);
});

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