Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in
OverviewUpgrade your integration
Online payments
OverviewFind your use case
Payment methods
Payment interfaces
Payment scenarios
In-person payments
Other Stripe products

Collect payment detailsBeta

Accept payment methods with a secure, embeddable UI component.

Private preview

The Custom Checkout integration is in private preview. To request access, click here.

The Payment Element is a UI component that accepts many payment methods, validates input, and handles errors.

Customer location
Size
Theme
Layout
To see how Link works for a returning user, enter the email demo@stripe.com. To see how Link works during a new signup, enter any other email and complete the rest of the form.

Render a Payment Element

Mount the PaymentElement component within the CustomCheckoutProvider.

CheckoutForm.jsx
import React from 'react';
import {PaymentElement, useCustomCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCustomCheckout();
  return (
    <form>
      <PaymentElement options={{layout: 'accordion'}}/>
    </form>
  )
};

export default CheckoutForm;

The following props are supported:

Next steps

Next, build a pay button to complete checkout.

Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
On this page
Render a Payment Element
Next steps
Products Used
Checkout
Elements