@stripe/react-stripe-js

What is @stripe/react-stripe-js?

The @stripe/react-stripe-js package is a React wrapper for Stripe.js. It provides a set of React components and hooks that make it easier to integrate Stripe's payment processing capabilities into a React application. With this package, developers can add Stripe Elements to their app, which are pre-built UI components that help you collect sensitive payment information securely.

What are @stripe/react-stripe-js's main functionalities?

Loading Stripe.js

This code demonstrates how to load Stripe.js using the loadStripe function and then use the Elements component to wrap your payment form. The Elements component provides a Stripe context to all other Stripe components.

import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';

const stripePromise = loadStripe('your_stripe_public_key');

function App() {
  return (
    <Elements stripe={stripePromise}>
      {/* Your checkout form */}
    </Elements>
  );
}

Creating a Card Element

This code shows how to use the CardElement component to create a form field for entering credit card information. It handles sensitive data without you having to deal with PCI compliance.

import { CardElement } from '@stripe/react-stripe-js';

function CardForm() {
  return (
    <CardElement />
  );
}

Using the useStripe and useElements hooks

This code sample illustrates how to use the useStripe and useElements hooks to create a payment form. The useStripe hook provides access to the Stripe object, and the useElements hook provides access to the Elements instance, which is used to safely collect payment information.

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

function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const card = elements.getElement(CardElement);
    const result = await stripe.createToken(card);
    if (result.error) {
      console.log(result.error.message);
    } else {
      console.log(result.token);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button type='submit' disabled={!stripe}>Pay</button>
    </form>
  );
}

Other packages similar to @stripe/react-stripe-js

react-stripe-elements

This is an earlier package created by Stripe for React which provides similar functionality to @stripe/react-stripe-js. However, @stripe/react-stripe-js is the newer library that leverages React's hooks API for a more modern and cleaner integration with React applications.

tipsi-stripe

Tipsi-stripe is a React Native library for integrating Stripe. It is similar to @stripe/react-stripe-js but is specifically designed for React Native apps instead of web apps. It provides a different set of APIs and components suitable for mobile app development.

react-payment-inputs

React-payment-inputs is a set of React components for building payment forms, similar to Stripe's Elements. While it provides UI components for payment inputs, it does not tie you to a specific payment processor like Stripe, giving you the flexibility to use it with other payment gateways.

README

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.

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

Using hooks

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
  PaymentElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

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

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (elements == null) {
      return;
    }

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      // Show error to your customer
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret from your server endpoint
    const res = await fetch('/create-intent', {
      method: 'POST',
    });

    const {client_secret: clientSecret} = await res.json();

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || !elements}>
        Pay
      </button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  },
};

const App = () => (
  <Elements stripe={stripePromise} options={options}>
    <CheckoutForm />
  </Elements>
);

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

Using class components

import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {
  PaymentElement,
  Elements,
  ElementsConsumer,
} from '@stripe/react-stripe-js';

class CheckoutForm extends React.Component {
  handleSubmit = async (event) => {
    event.preventDefault();
    const {stripe, elements} = this.props;

    if (elements == null) {
      return;
    }

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      // Show error to your customer
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });

    const {client_secret: clientSecret} = await res.json();

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  render() {
    const {stripe} = this.props;
    return (
      <form onSubmit={this.handleSubmit}>
        <PaymentElement />
        <button type="submit" disabled={!stripe}>
          Pay
        </button>
      </form>
    );
  }
}

const InjectedCheckoutForm = () => (
  <ElementsConsumer>
    {({stripe, elements}) => (
      <CheckoutForm stripe={stripe} elements={elements} />
    )}
  </ElementsConsumer>
);

const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');

const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {
    /*...*/
  },
};

const App = () => (
  <Elements stripe={stripePromise} options={options}>
    <InjectedCheckoutForm />
  </Elements>
);

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