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 method buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna and Amazon Pay.

Customers see different payment buttons depending on their device and browser. Compatible devices automatically support Google Pay and Link. You must complete additional steps to support Apple Pay and PayPal.

Try the demo

Toggle the prebuilt options in the demo to change the background colour, layout, size and shipping address collection. 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.

Before you begin

1. Add a payment method to your browser. For example, you can add a card to your Google Pay account or to your Apple Wallet.
2. Serve your application over HTTPS. This is required in development and in production. You can use a service such as ngrok .
3. Register your domain in both a sandbox and live mode.

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:

Command Line

Select a language

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

# Available as a gem
sudo gem install stripe

Gemfile

Select a language

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Enable payment methods

By default, Stripe uses your payment method settings to determine which payment methods the Express Checkout Element presents. You can also configure specific payment methods on your Checkout Session using the payment_method_types attribute.

Supported payment methods

The card payment method type automatically enables Apple Pay and Google Pay. When using Link, you must also pass the card payment method type.

Create a Checkout Session Server-side

Create a Checkout Session on your server to control the payment flow. The Checkout Session defines your line items, shipping options and other settings for the payment.

Command Line

Select a language

cURL

Stripe CLI

Ruby

Python

PHP

Java

Node.js

Go

.NET

No results

Set ui_mode to elements to integrate with the Express Checkout Element. The returned Checkout Session includes a client secret, which the client uses to securely display the checkout interface.

You can configure additional options on the Checkout Session:

• phone_number_collection : Collect customer phone numbers
• shipping_address_collection : Collect shipping addresses
• shipping_options : Provide shipping rate options
• automatic_tax : Enable automatic tax calculation

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

Retrieve the client secret from your server:

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_GvF3BSyx8RSXMK5yAFhqEd3H');

Create a fetchClientSecret function to retrieve the client secret from your server:

checkout.js

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
 .then((response) => response.json())
 .then((json) => json.client_secret);

Create the Checkout instance:

checkout.js

const checkout = stripe.initCheckoutElementsSdk({
 clientSecret
});

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 = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');

Collect customer details and display line items Client-side

The Checkout Session you created on the server automatically determines the line items, total amount and available payment methods. The Express Checkout Element uses this information to display the appropriate interface.

Handle payment confirmation

Listen to the confirm event when your customer finalises their payment:

checkout.js

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
 expressCheckoutElement.on('confirm', (event) => {
 loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
 });
}

Optional Listen to the availablepaymentmethodschange event Client-side

Optional Style the button Client-side

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.

Link supports credit cards, debit cards and qualified US bank account purchases.

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:

Optional Use the Express Checkout Element with Stripe Connect

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.

See also

• Stripe Elements
• Checkout Sessions
• Finalise payments on the server