Accept a payment with the Express Checkout Element

Use a single integration to accept payments through one-click payment buttons.

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

Customers see different payment buttons depending on what their device and browser combination supports. Compatible devices automatically support Google Pay and Link. Supporting Apple Pay and PayPal requires additional steps.

Option	Description
Merchant country	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

We recommend that you collect payment details before creating an Intent when using the Express Checkout Element. If you previously integrated with the Payment Element, you might need to update your integration to this preferred approach.

Before you begin

Add a payment method to your browser. For example, you can add a card to your Google Pay account or to your Wallet for Safari.
Serve your application over HTTPS. This is required in development and in production. You can use a service such as ngrok.
Register your domain in both a sandbox and live mode.
Create a PayPal Sandbox account to test your integration.

Set up Stripe
Server-side

First, create a Stripe account or sign in.

Use our official libraries to access the Stripe API from your application:

Enable payment methods

By default, Stripe uses your payment methods settings to determine which payment methods are enabled in the Express Checkout Element.

To manually override which payment methods are enabled, list any that you want to enable using the payment_method_types attribute.

If you collect payments before creating an intent, then list payment methods in the paymentMethodTypes attribute on your Elements provider options.
If you create an intent before rendering Elements, then list payment methods in the payment_method_types attribute on your Intent.

Supported payment methods

Apple Pay and Google Pay are automatically enabled when using card payment method type. When using Link, you must also pass the card payment method type.

Payment method name	Payment method API parameters
Apple Pay	`card`
Google Pay	`card`
Link	`link, card`
PayPal	`paypal`
Amazon Pay	`amazon_pay`
Klarna	`klarna`

Set up Stripe Elements
Client-side

The Express Checkout Element is automatically available as a feature of Stripe.js. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Create an instance of Stripe with the following JavaScript on your checkout page:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Then, create an instance of Elements with the mode (payment, setup, or subscription), amount, and currency. These values determine which payment methods to show to your customer. See the next step for more configurable Elements options.

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);

OptionalAdditional Elements options
Client-side

The Elements object accepts additional options that influence payment collection. Based on the options provided, the Express Checkout Element displays available payment methods from those you’ve enabled. Learn more about payment method support.

Property	Type	Description	Required
`mode`	`payment` `setup` `subscription`	Indicates whether the Express Checkout Element is used with a PaymentIntent, SetupIntent, or Subscription.	Yes
`currency`	`string`	The currency of the amount to charge the customer.	Yes
`amount`	`number`	The amount to charge the customer, shown in Apple Pay, Google Pay, or BNPL UIs.	For `payment` and `subscription` mode
`setupFutureUsage`	`off_session` `on_session`	Indicates that you intend to make future payments with the payment details collected by the Express Checkout Element. Not supported for PayPal or Klarna using the Express Checkout Element.	No
`captureMethod`	`automatic` `automatic_async` `manual`	Controls when to capture the funds from the customer’s account.	No
`onBehalfOf`	`string`	Connect only. The Stripe account ID, which is the business of record. See use cases to determine if this option is relevant for your integration.	No
`paymentMethodTypes`	`string[]`	A list of payment method types to render. You can omit this attribute to manage your payment methods in the Stripe Dashboard.	No
`paymentMethodConfiguration`	`string`	The payment method configuration to use when managing your payment methods in the Stripe Dashboard. If not specified, your default configuration is used.	No
`paymentMethodCreation`	`manual`	Allows PaymentMethods to be created from the Elements instance using stripe.createPaymentMethod.	No
`paymentMethodOptions`	`{us_bank_account: {verification_method: string}}`	Verification options for the `us_bank_account` payment method. Accepts the same verification methods as Payment Intents.	No
`paymentMethodOptions`	`{card: {installments: {enabled: boolean}}}`	Allows manually enabling the card installment plan selection UI if applicable when you aren’t managing your payment methods in the Stripe Dashboard. You must set `mode='payment'` and explicitly specify `paymentMethodTypes`. Otherwise an error is raised. Incompatible with `paymentMethodCreation='manual'`.	No

Create and mount the Express Checkout Element
Client-side

The Express Checkout Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https://, rather than http://, for your integration to work.

The Express Checkout Element needs a place to live on your payment page. Create an empty DOM node (container) with a unique ID in your payment form.

checkout.html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

When the form has loaded, create an instance of the Express Checkout Element and mount it to the container DOM node:

checkout.js
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');

Collect customer details and display line items
Client-side

Pass options when creating the Express Checkout Element.

Collect payer information

Set emailRequired: true to collect emails, and phoneNumberRequired: true to collect phone numbers. billingAddressRequired is true by default.

checkout.js
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});

PayPal customer information

PayPal normally doesn’t provide the customer’s billing address (except for the country) or phone number. If they aren’t provided, the confirm event has empty strings for those properties. If you require the customer’s billing address or phone number, then the Express Checkout Element doesn’t display the PayPal button unless that information is available.

Collect shipping information

Set shippingAddressRequired: true and pass an array of shippingRates.

checkout.js
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});

Listen to the shippingaddresschange event to detect when a customer selects a shipping address. You must call either resolve or reject if you choose to handle this event.

Note

To maintain privacy, browsers might anonymize the shipping address by removing sensitive information that isn’t necessary to calculate shipping costs. Depending on the country, some fields can be missing or partially redacted. For example, the shipping address in the US can only contain a city, state, and postal code. The full shipping address appears in the confirm event object after the purchase is confirmed in the browser’s payment interface.

checkout.js
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Listen to the shippingratechange event to detect when a customer selects a shipping rate. You must call either resolve or reject if you choose to handle this event.

checkout.js
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Listen to the cancel event to detect when a customer dismisses the payment interface. Reset the amount to the initial amount.

checkout.js
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});

Display line items

Pass in an array of lineItems:

checkout.js
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});

Configure the Apple Pay interface

Learn how to configure the Apple Pay interface.

Merchant initiated transactions (MIT)

You can set up recurring payments, deferred payments, or automatic reload payments when a user checks out with Apple Pay by requesting the relevant merchant token type in the Express Checkout Element click event. We recommend implementing Apple Pay merchant tokens to align with Apple Pay’s latest guidelines and to future proof your integration.

OptionalListen to the ready event
Client-side

After mounting, the Express Checkout Element won’t show buttons for a brief period. To animate the Element when buttons appear, listen to the ready event. Inspect the availablePaymentMethods value to determine which buttons, if any, display in the Express Checkout Element.

checkout.js
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});

OptionalControl when to show payment buttons
Client-side

You can manage the payment methods that appear in the Express Checkout Element in several ways:

In the Stripe Dashboard’s payment methods settings.
By using the paymentMethods property to disable payment buttons. Using this property gives you finer control over what your customers see.

The Express Checkout Element displays Apple Pay or Google Pay when the customer is on a supported platform and has an active card. If you want to always display Apple Pay and Google Pay even when the customer doesn’t have an active card, you can also configure this with paymentMethods.

OptionalStyle the button
Client-side

You can style each payment method button differently. For examples of button themes and types, see Google’s and Apple’s resources. You can also use the borderRadius variable in the Appearance API:

checkout.js
const appearance = {
  variables: {
    // This controls the border-radius of the rendered Express Checkout Element
    borderRadius: '4px',
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

elements.create('expressCheckout', {
  // Specify a type per payment method
  // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});

OptionalCreate a ConfirmationToken
Client-side

When the customer authorizes a payment, you can create a ConfirmationToken to send to your server for additional validation or business logic prior to confirmation. You must immediately use the created ConfirmationToken to confirm a PaymentIntent or SetupIntent.

checkout-confirmation.js
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  ...

  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create a ConfirmationToken using the details collected by the Express Checkout Element
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
        }
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: confirmationToken.id
  });
  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent
  const {error: confirmError} = await stripe.confirmPayment({
    clientSecret,
    confirmParams: {
      confirmation_token: confirmationToken.id
    },
  });

  if (confirmError) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(confirmError);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

Create a PaymentIntent
Server-side

Stripe uses a PaymentIntent object to represent your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process.

Create a PaymentIntent on your server with an amount and currency. This must match what you set on the stripe.elements instance in step 3. Always decide how much to charge on the server-side, a trusted environment, as opposed to the client-side. This prevents malicious customers from choosing their own prices.

The returned PaymentIntent includes a client secret, which the client-side uses to securely complete the payment process instead of passing the entire PaymentIntent object. You can use different approaches to pass the client secret to the client-side.

Submit the payment to Stripe
Client-side

Use stripe.confirmPayment to complete the payment using details from the Express Checkout Element.

Note

For Amazon Pay, Klarna, and PayPal, the amount you confirm in the PaymentIntent must match the amount the buyer pre-authorized. If the amounts don’t match, the payment is declined.

Provide a return_url to this function to indicate where Stripe should redirect the user after they complete the payment. Your user might be initially redirected to an intermediate site before being redirected to the return_url. Payments immediately redirect to the return_url when a payment is successful.

If you don’t want to redirect after payment completion, set redirect to if_required. This only redirects customers that check out with redirect-based payment methods.

checkout.js
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

Test the integration

Before you go live, test each payment method integration. To determine a payment method’s browser compatibility, see supported browsers. If you use the Express Checkout Element within an iframe, the iframe must have the allow attribute set to payment *.

Caution

Don’t store real user data in sandbox Link accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

Currently, Link only works with credit cards, debit cards, and qualified US bank account purchases. Link requires domain registration.

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

Value	Outcome
Any other 6 digits not listed below	Success
000001	Error, code invalid
000002	Error, code expired
000003	Error, max attempts exceeded

OptionalUse the Express Checkout Element with Stripe Connect

Connect platforms that either create direct charges or add the token to a Customer on the connected account must take additional steps.

On your frontend, before creating the ExpressCheckoutElement, set the stripeAccount option on the Stripe instance:

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  apiVersion: "2025-08-27.basil",
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'
,
});

Disclose Stripe to your customers

Stripe collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Stripe to use data in these ways. For more information, visit our privacy center.

Accept a payment with the Express Checkout Element

Use a single integration to accept payments through one-click payment buttons.

Before you begin

Set up StripeServer-side

Enable payment methods

Supported payment methods

Set up Stripe ElementsClient-side

OptionalAdditional Elements optionsClient-side

Create and mount the Express Checkout ElementClient-side

Collect customer details and display line itemsClient-side

Collect payer information

PayPal customer information

Collect shipping information

Note

Display line items

Configure the Apple Pay interface

Merchant initiated transactions (MIT)

OptionalListen to the ready eventClient-side

OptionalControl when to show payment buttonsClient-side

OptionalStyle the buttonClient-side

OptionalCreate a ConfirmationTokenClient-side

Create a PaymentIntentServer-side

Submit the payment to StripeClient-side

Note

Test the integration

Caution

OptionalUse the Express Checkout Element with Stripe Connect

Disclose Stripe to your customers

See also

Set up Stripe
Server-side

Set up Stripe Elements
Client-side

OptionalAdditional Elements options
Client-side

Create and mount the Express Checkout Element
Client-side

Collect customer details and display line items
Client-side

OptionalListen to the ready event
Client-side

OptionalControl when to show payment buttons
Client-side

OptionalStyle the button
Client-side

OptionalCreate a ConfirmationToken
Client-side

Create a PaymentIntent
Server-side

Submit the payment to Stripe
Client-side