Sign in
An image of the Stripe logo
Create account
Sign in
Home
Payments
Business operations
Financial services
Developer tools
No-code
All products
Home
Payments
Business operations
Home
Payments
Business operations
Financial services
Developer tools
Support
Overview
Online payments
Products and prices
Invoicing
Subscriptions
Quotes
In-person payments
Multiparty payments
After the payment
Add payment methods
Payment Links
Stripe Checkout
Stripe Elements
    Overview
    Elements
    Address Element
    Payment Element
    Payment Request Button
    Other Guides
    Elements Appearance API
About the APIs
Regulation support
Implementation guides
Testing
HomePayments

Stripe Elements

Create your own checkout flows with prebuilt UI components.

Web Elements

Stripe Elements is a set of prebuilt UI components for building your web checkout flow. It’s available as a feature of Stripe.js, our foundational JavaScript library for building payment flows. Stripe.js tokenizes sensitive payment details within an Element without ever having them touch your server.

Elements features include:

  • Automatic input formatting as customers type
  • Complete UI translations to match your customer’s preferred language
  • Responsive design to fit seamlessly on any screen size
  • Custom styling rules so you can match the look and feel of your site
  • One-click checkout with Link
Get started with Elements
Payment Element
Recommended
Accept a payment with one or multiple payment methods securely, including cards.
Wallet Button Element
Display popular Wallets like Apple Pay and Google Pay.
Card Element
Accept card payments, including advanced card use cases.
Link Authentication Element
Recommended
Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.
Address Element
Collect address information and display Link saved addresses.

Don’t see your element here? There are more elements listed in the Stripe.js API Reference.

If you plan to accept card payments, read more about when to use the Payment Element and Card Element.

Customize the appearance of Elements

Pick from prebuilt themes, add your own color and size variables, or adjust individual components for more advanced use cases.

Get started

Mobile Native Elements

Stripe Elements is also a set of prebuilt UI components for building your mobile native checkout flow. It’s available as a feature of our Mobile SDKs (iOS, Android, and React Native).

Elements features include:

  • Automatic input formatting as customers type
  • Complete UI translations to match your customer’s preferred language
  • Mobile specific behaviors, with single-step bottom sheets and multi-step inline options
  • Device hardware integrations such as card scanning with the camera
  • UI customization, including colors and fonts
Get started with Elements
Mobile Payment Element
Accept a payment with one or multiple payment methods across mobile platforms.
Mobile Address Element
Collect local and international addresses for your customers.

Sign up for updates

Sign up to be notified of new features and betas.

Provide your email to receive early access to eligible beta features for Stripe Elements.
Read our privacy policy.
Was this page helpful?
Questions? Contact us.
Watch our developer tutorials.
Check out our product changelog.
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. Login 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.
$