Adding Stripe.js to React

Stripe.js

We have already prepared a template at codesandbox.io to start with in the DesignCode team that includes some UI and routing so we can focus on implementing Stripe right away. Let's start with creating a new code sandbox by forking the Stripe Checkout Template . Just double-click on it.

We will be using the Stripe.js library to integrate the payment system so add the package @stripe/stripe-js as a dependency.

npm install @stripe/stripe-js

Then import the loadStripe function to create a Stripe object once Stripe has finished loading. We need to pass in a publishable key. If you haven't opened an account with Stripe yet, follow the Creating Stripe Account and Product tutorial. Access your Stripe dashboard, go to Developers and then API keys from the side bar. Retrieve the publishable key by copying it. Make sure to save that key in a .env file to avoid committing it. The key has to be prefixed with " REACTAPP " to allow the use of this key in client side. For more info, see the documentation on how to add custom environment variables.

// Checkout.js
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);

// .env
REACT_APP_STRIPE_KEY=YOUR_PUPLISHABLE_KEY

Defer Stripe Loading

If you wish to defer instantiating Stripe, which should improve the performance of your website, you can load Stripe only when the user checkouts. We can create a function to load Stripe if it's null or return it if there's already an instance of it.

// Checkout.js
import { loadStripe } from "@stripe/stripe-js"

let stripePromise

const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
  }

  return stripePromise;
};

And then call that function right before you redirect the user to Checkout.

const stripe = await getStripe();

Import as a side effect

It is recommended to include Stripe.js throughout your whole site as this allows Stripe to detect suspicious user behaviour and prevents frauds. Stripe offers advanced fraud functionality, to your advantage I might say, by tracking the customer's activity as they browse your website and other sites that also accept payments via Stripe. Card testing is a real serious problem, I would say that the benefit of detecting fraud outweighs the disadvantage of user tracking. To read more about it, visit their documentation on the subject.

To include Stripe.js in the root of a React application, import it in App.js.

// App.js
import "@stripe/stripe-js";