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.

Changelog

React Stripe.js adheres to Semantic Versioning.

v7.0.0-beta.0 2019-12-18

• No code changes from the last alpha release
• Add official docs
• Add a migration guide
• Update Readme

v7.0.0-alpha.5 2019-12-17

• Fix a vulnerability in a build dependency
• Code quality

v7.0.0-alpha.4 2019-12-06

New Features

• Add support for passing an Element component to elements.getElement

const cardElement = elements.getElement(CardElement);

• Add a new hook, useStripe which returns the Stripe object passed to <Elements>

const stripe = useStripe();

• Expand <ElementsConsumer> to provide both the Elements and Stripe objects.

<ElementsConsumer>
  {({stripe, elements}) => (
    <MyCheckoutForm stripe={stripe} elements={elements} />
  )}
</ElementsConsumer>

Breaking Changes

• Passing undefined to the stripe prop of <Elements> is no longer possible. If you are async loading Stripe.js, you will need to explicitly pass null.
• The value provided by <ElementsConsumer> has changed to support providing Stripe as well as Elements.

v7.0.0-alpha.3 - 2019-11-15

Fix minified UMD build

v7.0.0-alpha.2 - 2019-11-15

Fix dependencies

v7.0.0-alpha.1 - 2019-11-15

Breaking Changes

• Drop injectElements since it is easy to implement with ElementsConsumer if users want to use the HOC pattern.

Fixes

• Better errors when trying to call useElements or mount components that rely on Elements context outside of an provider.
• Test cleanup

v7.0.0-alpha.0 - 2019-11-05

Initial alpha release

For changes to versions before v7.0.0 please refer to the react-stripe-elements changelog.