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 include Stripe.js in our HTML.

Append the following to the <head> block in our public/index.html.

<script src="https://js.stripe.com/v3/"></script>

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 [stripe, setStripe] = useState(null);

useEffect(() => {
  setStripe(window.Stripe(config.STRIPE_KEY));
}, []);

This loads the Stripe object from Stripe.js with the Stripe key when our settings page loads. And saves it to the state.

Next, we’ll build our billing form.