Back in the Setup a Stripe account chapter, we had two keys in the Stripe console. The Secret key that we used in the backend and the Publishable key. The Publishable key is meant to be used in the frontend.

Add the following line below the const config = { line in your src/config.js.

STRIPE_KEY: "YOUR_STRIPE_PUBLIC_KEY",

Make sure to replace, YOUR_STRIPE_PUBLIC_KEY with the Publishable key from the Setup a Stripe account chapter.

Let’s also add the Stripe.js packages

Run the following in the frontend/ directory and not in your project root.

$ npm install @stripe/stripe-js

And load the Stripe config in our settings page.

Add the following at top of the Settings component in src/containers/Settings.js above the billUser() function.

const stripePromise = loadStripe(config.STRIPE_KEY);

This loads the Stripe object from Stripe.js with the Stripe key when our settings page loads. We’ll be using this in the coming chapters.

We’ll also import this function at the top.

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

Next, we’ll build our billing form.