Stripe Payment ElementBeta
The Payment Element is in private beta. Sign up for early access.
Stripe’s new Elements
Stripe is working on an expanded suite of embeddable components to help you build custom payment forms on web and mobile, all aimed at increasing your checkout conversion.
The Payment Element is the first of these new components, displaying multiple payment methods in a customized UI embedded into your checkout page. The Payment Element is available for JavaScript and React. If you have a mobile app as well, use our equivalent integration for iOS, Android, and React Native.
Easy implementation and optimization
After you complete your initial integration, no additional engineering effort is required to add payment methods. After deciding on the payment methods you want to surface, the Payment Element selects the payment options that are most likely to convert each customer, which includes adjustments based on each customer’s currency and country.
The Payment Element currently supports Cards, iDEAL, Bancontact, AfterPay Clearpay, Giropay, EPS, Alipay, Sofort, P24, and Cartes Bancaires with Visa and Mastercard.
Stripe also plans to support SEPA Direct Debit, ACH Debits, Klarna, Cartes Bancaires with Card Brand Choice, OXXO, and Boleto.
Flexible checkout experience
Enhance your checkout page by combining your custom code with the Payment Element. Use the Element by itself or embed it side-by-side with other payment options.
Customizable to your brand
Style and branding can be customized to match your site, including fonts, colors, and spacing.
Setting up the Payment Element
Stripe created the Payment Element to help you reduce engineering time and maintenance effort. The Payment Element is a single component that you embed into your existing checkout page:
function CheckoutPage() { const options = { clientSecret: '{PAYMENT_INTENT_SECRET}', appearance: { // Customize the Element appearance to match your page }, }; return ( <div> <h1>Check out</h1> <PaymentElement options={options} /> </div> ); }