React Stripe.js

React components for Stripe.js and Elements.

Requirements

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.

Getting started

• Learn how to accept a payment
• Add React Stripe.js to your React app
• Try it out using CodeSandbox

Documentation

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

Minimal example

First, install React Stripe.js and Stripe.js.

1npm install @stripe/react-stripe-js @stripe/stripe-js

Using hooks

1import React, {useState} from 'react';
2import ReactDOM from 'react-dom';
3import {loadStripe} from '@stripe/stripe-js';
4import {
5  PaymentElement,
6  Elements,
7  useStripe,
8  useElements,
9} from '@stripe/react-stripe-js';
10
11const CheckoutForm = () => {
12  const stripe = useStripe();
13  const elements = useElements();
14
15  const [errorMessage, setErrorMessage] = useState(null);
16
17  const handleSubmit = async (event) => {
18    event.preventDefault();
19
20    if (elements == null) {
21      return;
22    }
23
24    // Trigger form validation and wallet collection
25    const {error: submitError} = await elements.submit();
26    if (submitError) {
27      // Show error to your customer
28      setErrorMessage(submitError.message);
29      return;
30    }
31
32    // Create the PaymentIntent and obtain clientSecret from your server endpoint
33    const res = await fetch('/create-intent', {
34      method: 'POST',
35    });
36
37    const {client_secret: clientSecret} = await res.json();
38
39    const {error} = await stripe.confirmPayment({
40      //`Elements` instance that was used to create the Payment Element
41      elements,
42      clientSecret,
43      confirmParams: {
44        return_url: 'https://example.com/order/123/complete',
45      },
46    });
47
48    if (error) {
49      // This point will only be reached if there is an immediate error when
50      // confirming the payment. Show error to your customer (for example, payment
51      // details incomplete)
52      setErrorMessage(error.message);
53    } else {
54      // Your customer will be redirected to your `return_url`. For some payment
55      // methods like iDEAL, your customer will be redirected to an intermediate
56      // site first to authorize the payment, then redirected to the `return_url`.
57    }
58  };
59
60  return (
61    <form onSubmit={handleSubmit}>
62      <PaymentElement />
63      <button type="submit" disabled={!stripe || !elements}>
64        Pay
65      </button>
66      {/* Show error message to your customers */}
67      {errorMessage && <div>{errorMessage}</div>}
68    </form>
69  );
70};
71
72const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
73
74const options = {
75  mode: 'payment',
76  amount: 1099,
77  currency: 'usd',
78  // Fully customizable with appearance API.
79  appearance: {
80    /*...*/
81  },
82};
83
84const App = () => (
85  <Elements stripe={stripePromise} options={options}>
86    <CheckoutForm />
87  </Elements>
88);
89
90ReactDOM.render(<App />, document.body);

Using class components

1import React from 'react';
2import ReactDOM from 'react-dom';
3import {loadStripe} from '@stripe/stripe-js';
4import {
5  PaymentElement,
6  Elements,
7  ElementsConsumer,
8} from '@stripe/react-stripe-js';
9
10class CheckoutForm extends React.Component {
11  handleSubmit = async (event) => {
12    event.preventDefault();
13    const {stripe, elements} = this.props;
14
15    if (elements == null) {
16      return;
17    }
18
19    // Trigger form validation and wallet collection
20    const {error: submitError} = await elements.submit();
21    if (submitError) {
22      // Show error to your customer
23      return;
24    }
25
26    // Create the PaymentIntent and obtain clientSecret
27    const res = await fetch('/create-intent', {
28      method: 'POST',
29    });
30
31    const {client_secret: clientSecret} = await res.json();
32
33    const {error} = await stripe.confirmPayment({
34      //`Elements` instance that was used to create the Payment Element
35      elements,
36      clientSecret,
37      confirmParams: {
38        return_url: 'https://example.com/order/123/complete',
39      },
40    });
41
42    if (error) {
43      // This point will only be reached if there is an immediate error when
44      // confirming the payment. Show error to your customer (for example, payment
45      // details incomplete)
46    } else {
47      // Your customer will be redirected to your `return_url`. For some payment
48      // methods like iDEAL, your customer will be redirected to an intermediate
49      // site first to authorize the payment, then redirected to the `return_url`.
50    }
51  };
52
53  render() {
54    const {stripe} = this.props;
55    return (
56      <form onSubmit={this.handleSubmit}>
57        <PaymentElement />
58        <button type="submit" disabled={!stripe}>
59          Pay
60        </button>
61      </form>
62    );
63  }
64}
65
66const InjectedCheckoutForm = () => (
67  <ElementsConsumer>
68    {({stripe, elements}) => (
69      <CheckoutForm stripe={stripe} elements={elements} />
70    )}
71  </ElementsConsumer>
72);
73
74const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
75
76const options = {
77  mode: 'payment',
78  amount: 1099,
79  currency: 'usd',
80  // Fully customizable with appearance API.
81  appearance: {
82    /*...*/
83  },
84};
85
86const App = () => (
87  <Elements stripe={stripePromise} options={options}>
88    <InjectedCheckoutForm />
89  </Elements>
90);
91
92ReactDOM.render(<App />, document.body);

TypeScript support

React Stripe.js is packaged with TypeScript declarations. Some types are pulled from @stripe/stripe-js—be sure to add @stripe/stripe-js as a dependency to your project for full TypeScript support.

Typings in React Stripe.js follow the same versioning policy as @stripe/stripe-js.

Contributing

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