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
      Quickstart
      Customize the Payment Element
      Card Element comparison
      Migrate to the Payment Element
    Payment Request Button
    Other Guides
    Elements Appearance API
About the APIs
Regulation support
Implementation guides
Testing
Elements
·
HomePaymentsStripe Elements

Stripe Payment Element

Accept payment methods from around the globe with a single secure, embeddable UI component.
Customer location
Size
Theme
Layout
This demo only displays Google Pay or Apple Pay if you have an active card with either wallet.

NEED SOMETHING DIFFERENT?

To place payment method input fields in separate parts of the page, browse more Elements.

The Payment Element is an embeddable UI component that lets you accept up to 25+ payment methods with a single integration. Whether you’re just collecting card payments or dozens of payment methods, the Payment Element is the easiest way to build an embedded and customized payments experience. If you have a mobile app as well, use our equivalent integrations for iOS, Android, and React Native.

  • Automatically adjusts input fields to collect information based on the payment method and country.
  • Dynamically sorts payment methods based on a customer’s locale and location to optimize for conversion.
  • Reduces friction for card payments with input validation, masking, styling and error handling.
  • Adds new payment methods without any front-end changes, and gives you access to new payment methods as soon as Stripe supports them.

If you’re looking for the Card Element, read this to determine whether to use the Payment Element or the Card Element.

Start with a guide

Accept a payment
Quickstart

Accept one-time payments for cards and dozens of other payment methods.

Integrate the Payment Element
Web · iOS · Android · React Native
Set up future payments

Save payment details to charge your customers later.

Save a card during payment

Save payment details during a payment.

Migrate to the Payment Element

Learn how to migrate your existing integration with individual payment method Elements to the web Payment Element.

View the Stripe.js reference

Enhance your integration

Customize the style

Customize the look and feel of the web Payment Element with the Elements Appearance API to match the design of your site.

Subscriptions

Create and manage subscriptions to accept recurring payments.

Link

Enable a frictionless checkout experience for your customers.

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.
$