Stripe Payment Element

Beta

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, SEPA Direct Debit, BECS Direct Debit in Australia, OXXO, Boleto, Konbini, and Cartes Bancaires with Visa and Mastercard.

Stripe also plans to support ACH Debits, Klarna, and Cartes Bancaires with Card Brand Choice.

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>
  );
}

Join the Payment Element Beta