Skip to content
Create account
 or
Sign in
The Stripe Docs logo
/
Create account
Sign in

Collect payment detailsBeta

Accept payment methods with a secure, embeddable UI component.

Beta

The Custom Checkout integration is in private beta. 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
This demo only displays Google Pay or Apple Pay if you have an active card with either wallet.

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:

Warning

Custom Checkout doesn’t support Klarna or Sofort.

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