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 UIs
Payment scenarios
In-person payments
Other Stripe products

Collect payment detailsBeta

Accept payment methods with a secure, embeddable UI component.

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 CheckoutProvider.

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

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

export default CheckoutForm;

The following props are supported:

OptionalCustomize the look and feel of Elements

Use the Appearance API to control the style of all elements. Choose a theme or fine-tune the appearance with variables and rules.

App.jsx
<CheckoutProvider
  stripe={stripe}
  options={{clientSecret}}
  elementsOptions={{appearance: {/* appearance */}}}
>
  <CheckoutForm />
</CheckoutProvider>
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