Add a Stripe API Key as an Environment Variable in Next.js & Vercel
With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.
Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.
We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend NEXT_PUBLIC to the variable name make it available in the client) as well as in production on Vercel.
Lecturer: [0:00] We're going to start off with our Space Jelly Shop Next.js app. To accept payments for our products, we're going to use Stripe Checkout. In order to use Stripe, we need to use an API key in order to interface with its API.
[0:11] The first thing we want to do is find our API key. We can navigate over to the Developer section in the left-side bar. Once on that page, we can select the next menu item called API Keys where we'll see our publishable key, which is what we'll use to interface with the Stripe API.
[0:25] In order to use that API key inside of our app, we're going to use an environment variable. What this will do is allow us to set our key externally as a variable allowing us to easily rotate that API key and change it for different environments.
[0:38] In order to use an environment variable, the first thing I'm going to do is inside of my app, create a new file called .env.local. Inside this file, I'm going to create a new key called NEXT_PUBLIC_STRIPE_API_KEY. We're going to set that equal to our key value, which we can grab from the Stripe dashboard and paste right inside of our environment file.
[0:59] The reason we're prefixing this with NEXT_PUBLIC is so that this variable will also be available on the client. Otherwise, if we didn't include this prefix, we would only be able to use this variable when things are getting processed in Node.
[1:11] Before we move on, we should note that when using environment variables, you want to make sure that if it's a private key, it's not getting saved by Git. Because the .env.local file is common practice for Next.js, if we look inside of our gitignore file and scroll to the bottom, we could see that it's already set there.
[1:28] If you're using secret environment variables and you don't see your .env file inside of this gitignore file, you want to make sure you add it so that you don't accidentally save it and compromise that key. In order to test this out, I'm going to console log out that value.
[1:40] I'm going to console.log, and I'm going to paste that value. We're going to access it from process.env. that variable name. Now if I load my app and I look inside the developer tools, I can see my API key. Additionally, if we look inside of our terminal, we can also see that we were able to access that variable inside the compilation process.
[2:01] Finally, we have this available for our local environment, but what about when we have it deployed to Vercel? In order to make that variable available when we deploy our app, we can head into our Vercel dashboard where we can go to the Settings tab.
[2:13] If we scroll down on the left sidebar, we can see the option for environment variables where we start to see a new form where we can create a new variable where here, because our environment variable is a public key, we can select plain text where we can paste in our variable name.
[2:26] We can also go back and copy our API key from Stripe and paste that in as the value. Because we're using only one API key for testing this out, we can keep this available for all of our environments. To add it, let's hit Save. Once saved, we can scroll down to the bottom of our page and see our API key.
[2:42] In review, in order to use Stripe Checkout, we needed to add a Stripe API key so we could interface with the Stripe API. To do that, we went into our Developer settings where we first were able to find our Stripe API key where we then created an env.local file so that we could use that key locally.
[2:57] Then we added it to Vercel where we can use it on our deployed environment where now we'll be ready to integrate Stripe.