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.

Change indicator Add the following line below the const config = { line in your src/config.ts.

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

Change indicator Run the following in the packages/frontend/ directory.

$ pnpm add --save @stripe/stripe-js

And load the Stripe config in our settings page.

Change indicator Add the following below the imports in src/containers/Settings.tsx.

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

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.

Next, we’ll build our billing form.