Stripe Payment Element

The Payment Element is a UI component for the web that accepts 40+ payment methods, validates input, and handles errors. Use it alone or with other elements in your web app’s frontend.

To try the Payment Element for yourself, start with one of these examples:

Create a Payment Element

This code creates a Payment Element and mounts it to the DOM:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = { /* options */ };
const elements = stripe.elements({ 
clientSecret
, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Accepting payments with the Payment Element requires additional backend code. See the quickstart or sample app to learn how this works.

Combine elements

The Payment Element interoperates with other elements. For instance, this form uses one additional element to autofill checkout details, and another to collect the shipping address.

For the complete code for this Link example, see Accept a payment with Link.

Payment methods

The Payment Element displays every payment method that’s activated and available.

• Some payment methods require activation in the Dashboard.
• Payment methods are unavailable when they don’t support the currency or terms of the current payment.

It sorts these payment methods by relevance to your customer’s location and locale.

For instance, if a customer in Germany is paying in EUR, they see all the active payment methods that accept EUR, starting with ones that are widely used in Germany.

Show payment methods in order of relevance to your customer

You can also override some of these behaviors. To control payment methods yourself, see Customize payment methods

Layout

You can customize the Payment Element’s layout to fit your checkout flow. The following image is the same Payment Element rendered using different layout configurations.

Payment Element with different layouts.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Appearance

Use the Appearance API to control the style of all elements. Choose a theme or update specific details.

For instance, choose the “flat” theme and override the primary text color.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {
  theme: 'flat'
  variables: { colorPrimaryText: '#262626' }
};

See the Appearance API documentation for a full list of themes and variables.

Options

Stripe elements support more options than these. For instance, display your business name using the business option.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

The Payment Element supports the following options. See each options’s reference entry for more information.