Elements

Build your pixelperfect payments experience

Use Stripes suite of rich UI building blocks to design a secure payments experience that perfectly matches your site and helps drive conversion.

Start now Try the demo

Full name

Jane Diaz

Country

United States

Address

Street address

Card

Afterpay

Klarna

Card number

1234 1234 1234 1234

Expiration date

MM / YY

Security code

CVV

Submit order

Email address

jane.diaz@example.com

Country

Netherlands

iDEAL

SEPA Debit

iDEAL Bank

ING Bank

Finish checkout

Name

Jane Diaz

Country

Mainland China

Postal code

City

Region

Address

Street address

Alipay

Card

Pay AED450.00

Customizable components

Choose the elements you need and match them to the look and feel of your site with CSS-level styling.

Optimized for conversion

Save development time and eliminate user confusion with built-in accessibility, error messages, input masking, autofill, and more.

Unlock new markets

Reach more users with 40+ payment methods through a single integration. Easily run A/B tests and manage payment methods from the Dashboard.

Help keep payments safe

Stripes platform meets industry certification standards to help reduce compliance burdens for your business.

Anthropic logo URBN logo Squarespace logo Slack logo FareHarbor logo Xero logo RiverIsland logo Turo logo

Customizable, modular components

Powerful building blocks to help optimize conversion across web andmobile

Use our suite of optimized and composable UIs to seamlessly collect payment details, customer addresses, offer mobile wallets, and more. Businesses using Stripe's Payment Element saw 11.9% more revenue on average.

Built-in payments logic

Stripes payment element comes with masking, styling, error handling, and client-side input validation for card acceptance. It also localizes pricing with Adaptive Pricing, allows you to access 100+ payment methods, and dynamically surfaces relevant payment methods using AI models to your customerseven if you process card payments outside of Stripe.

Cards
ACH Debit
Google Pay
Afterpay / Clearpay
Affirm
iDEAL
Alipay
Klarna
Apple Pay
Konbini
Amazon Pay
BECS Direct Debit
OXXO
Bancontact
Przelewy24
Boleto
SEPA Direct Debit
EPS
Bacs Direct Debit
MobilePay

United States Germany United Kingdom Brazil

Card

ACH bank debit

Card number

1234 1234 1234 1234

Expiration date

MM/YY

Security code

CVV

Pay $175.00

Klarna

Card

PayPal

Name

Alistair Hanton

Land oder Region

Deutschland

Zahle 90.00

Card

Klarna

Clearpay

Card number

1234 1234 1234 1234

Expiration date

MM/YY

Security code

CVV

Pay 235.00

Boleto

Carto

CPF/CNPJ

123.456.789-00

Nome

Jane Diaz

Pague R$160.00

Meet our other Elements

[In-app payments > Image]

In-app payments

Use the in-app payment element to build checkout flows in your mobile app. You can style all elements to match the look and feel of your app and access 100+ global payment methods.

[Buy now, pay later messaging - A checkout experience for an e-commerce site purchasing a wooden stool. The checkout elements show buy now, pay later options Afterpay, Klarna and Affirm.]

Buy now, pay later messaging

Use the payment method messaging element to promote buy now, pay later options before checkout. It automatically determines available plans and conditions, generates a localized description, and matches your page's styling.

[Dynamic mobile wallets visual]

One-click payment buttons

Use the express checkout element to automatically display multiple one-click payment buttons. Supported payment methods include Apple Pay, Google Pay, Amazon Pay, PayPal, and LinkStripe's one-click checkout experience.

[Elements > Shipping Address Visual]

Effortless address collection

Use the address element to collect and validate addresses for billing, shipping, and more. It can help you reduce the risk of shipping goods to the wrong location, and more accurately apply the right sales taxes.

Built by us, designed by you

Control every facet of the experience

Our versatile APIs and libraries let you combine the simplicity of prebuilt components with the freedom of custom UIs. Use React or JavaScript to build your ideal web integration or our iOS, Android, or React Native SDKs to design a streamlined mobile flow.

Explore the docs

Card

Apple Pay

Card number

1234 1234 1234 1234

Expiration date

MM / YY

Security code

CVV

Country

United States

Postal code

12345

Card

Google Pay

Card number

1234 1234 1234 1234

Expiration date

MM / YY

Security code

CVV

Country

United States

Postal code

90210

Card

Apple Pay

Card number

1234 1234 1234 1234

Expiration date

MM / YY

Security code

CVV

Country

United States

Postal code

90210

// Style Elements with JavaScript const appearance = { variables: { fontFamily: "Sohne, system-ui, sans-serif", fontSizeBase: "14px", fontWeightNormal: "500", borderRadius: "8px", colorPrimary: "#FFCE48", colorText: "white", colorTextSecondary: "white", colorTextPlaceholder: "#727F96", tabIconColor: "white", tabIconSelectedColor: "#1A1B25", logoColor: "dark", }, rules: { ".Tab": { backgroundColor: "#0A2540", }, ".Tab--selected": { backgroundColor: "#FFCE48", color: "#1A1B25", }, ".Input": { backgroundColor: "transparent", border: "1.5px solid #FFCE48", }, }, };

// Style Elements with JavaScript const appearance = { theme: "flat", variables: { colorBackground: "#fff", fontSizeBase: "14px", fontWeightNormal: "500", borderRadius: "2px", tabIconSelectedColor: "white", gridRowSpacing: "15px", }, rules: { ".Label": { marginBottom: "6px", }, ".Tab, .Input": { boxShadow: "0px 3px 10px rgba(18, 42, 66, 0.08)", }, ".Tab--selected": { backgroundColor: "#DF1B41", color: "white", }, }, };

// Style Elements with JavaScript const appearance = { variables: { fontFamily: "Verdana", fontSizeBase: "14px", borderRadius: "0", colorBackground: "#dfdfdf", }, rules: { ".Input": { backgroundColor: "#ffffff", boxShadow: "inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080", }, ".Tab, .Block": { boxShadow: "inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf", }, ".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": { backgroundColor: "#ccc", }, }, };

Full customization

Use CSS properties to customize font, color, spacing, and more.

We migrated to Stripe Elements in less than a day with a single developer. Since then, weve seen a 6% increase in conversion at checkout.
Liam Mclaney, Cofounder, OnJam

OnJam logo

With Stripe Elements, we were able to instantly turn on iDEAL, Bancontact, EPS, and Giropay. As we rapidly enter new markets, its important that were able to scale new payment methods without being limited by engineering bandwidth.
Lindsay Simon, Chief Valuations Officer, ValueMyStuff

ValueMyStuff logo

We wanted the checkout experience to feel cohesive with the rest of our product, but didnt want to recreate payments from scratch. Stripe Elements made it super simple to achieve this.
Bridger Maxwell, Cofounder, Scribble

Scribble logo

Integrating with Stripe Elements was surprisingly easy. Having Stripe handle localization, formatting, and automatically displaying relevant local payment methods has made the user experience much better for our global customer base.
Dhiraj Nayak, CTO, 3D Usher

3DUsher logo

OnJam logo
ValueMyStuff logo
Scribble logo
3DUsher logo

Less code, fewer errors

Dont waste time reinventing the paymentswheel

Building a conversion-optimized payments experience is hard. Elements lets you take advantage of Stripes collective experience across front-end, design, and analytics, so that you can spend less time on payments and more time on your product.

UI optimizations

Client-side input validation
Input masking
Card-specific CVC hints
Built-in accessibility (ARIA)
Autofill via browser and authentication services

Mobile-friendly

Responsive layout
Dynamic numeric keypad
Mobile-friendly navigation
Built-in card scanning
Apple Pay
Google Pay

Localized experience

Full-width/CJK numerals
Localized error messages
Right-to-left languages
Smart payment method selection
Dynamic postal code collection

Simplified Compliance

Card numbers encrypted with AES-256
SCA-ready solutions
Effortless PCI validation

Pricing

Know what youll pay

Stripe Elements are included in Stripes integrated pricing and let you accept credit cards, debit cards, mobile wallets and more.

Included

with StripePayments

Pick your path

Other options to start accepting payments

All of Stripes payment UIs give you instant access to 40+ payment methods, 35+ languages, and 135+ currencies. Choose the integration that best suits your business.

Try the demo

Multiple ways to accept payments online

Email

timotheero@stripe.com

Payment method

Card

PayPal

Klarna

Card information

1234 1234 1234 1234

MM/YY

CVC

Prebuilt payment page

Launch faster with a conversion-optimized, full-page checkout

Embed on your site or redirect to a Stripe-hosted page
Customize the colors and fonts to match your brand
Add support for recurring payments and Stripe Tax with no additional integration work

Explore full page

Payment succeeded

Thanks for your purchase! A payment from POWDUR will appear on your statement.

POWDUR

AED65.00