Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Get started
About Stripe payments
Start an integration
Payment Links
Checkout
Web Elements
    Overview
    Elements
    Address Element
    Express Checkout Element
    Payment Element
      Quickstart
      Add external payment methods
      Customize payment methods
      Card Element comparison
      Migrate to the Payment Element
    Link Authentication Element
    Payment Method Messaging Element
    Other Guides
    Elements Appearance API
    Link purchase protection
Mobile Elements
Payment scenarios
During the payment
After the payment
Add payment methods
More payment scenarios
Faster checkout with Link
Other Stripe products
Connect
Terminal
Radar
Financial Connections
Crypto
Identity
Climate
Resources
About the APIs
Implementation guides
Regulation support
Testing
Elements
·
HomePaymentsWeb Elements

Stripe Payment Element

Accept payment methods from around the globe with a secure, embeddable UI component.

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.

Customer location
Size
Theme
Layout
This demo only displays Google Pay or Apple Pay if you have an active card with either wallet.

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

Quickstart

Code and instructions for accepting a payment using the Payment Element.

Clone a sample app on GitHub
HTML · React · Vue
API reference

Create a Payment Element

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

index.js
View full sample
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.

A form with contact info, shipping address, and payment fields. The contact info is labeled Link Authentication Element, the shipping address is labeled Address Element, and the payment fields are labeled Payment Element

For the complete code for this Link example, see Add Link to an Elements integration.

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.

A variety of payment methods.

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.

Examples of the three checkout forms. The image shows the tab option, where customers pick from payment methods shown as tabs or the two accordion options, where payment methods are vertically listed. You can choose to either display radio buttons or not in the accordion view.

Payment Element with different layouts.

The tabs layout displays payment methods horizontally using tabs. To use this layout, set the value for layout.type to tabs. You can also specify other properties, such as layout.defaultCollapsed.

index.js
View full sample
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.

Examples of light and dark modes for the payment element checkout form.

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

index.js
View full sample
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.

index.js
View full sample
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.

layoutLayout for the Payment Element.
defaultValuesInitial customer information to display in the Payment Element.
businessInformation about your business to display in the Payment Element.
paymentMethodOrderOrder to list payment methods in.
fieldsWhether to display certain fields.
readOnlyWhether payment details can be changed.
termsWhether mandates or other legal agreements are displayed in the Payment Element. The default behavior is to show them only when necessary.
walletsWhether to show wallets like Apple Pay or Google Pay. The default is to show them when possible.
Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g., )
The Stripe Shell is best experienced on desktop.
$