React Stripe.js

React components for Stripe.js and Stripe Elements.

Getting Started

• Add React Stripe.js to your React app
• Try it out using CodeSandbox

Documentation

• React Stripe.js Docs
• Migrate from react-stripe-elements
• Legacy react-stripe-elements docs
• Examples

Minimal Example

import React from 'react';
import ReactDOM from 'react-dom';

import {
  CardElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

const stripe = window.Stripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const MyCheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    ev.preventDefault();
    const {error, paymentMethod} = await stripe.createPaymentMethod({
      type: 'card',
      card: elements.getElement(CardElement),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>Pay</button>
    </form>
  );
};

const App = () => {
  return (
    <Elements stripe={stripe}>
      <MyCheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.body);

Minimum Requirements

React Stripe.js depends on the React Hooks API. The minimum supported version of React is v16.8. If you use an older version, upgrade React to use this library. If you prefer not to upgrade your React version, we recommend using legacy react-stripe-elements.

Contributing

If you would like to contribute to React Stripe.js, please make sure to read our contributor guidelines.