Create a Stripe Customer with Next.js API Routes
Every transaction in Stripe is associated with a customer. Since we want our user to be able to see their transaction history in Stripe, we need to keep a track of their customer ID in our profile table.
In this video, we create a new Stripe account and configure our Next.js application to use its publishable and secret API keys. Additionally, we discuss by adding NEXT_PUBLIC_ to our environment variable names, it exposes them to the client - running in the user's browser. This is entirely safe for our publishable key - which can be public - but not our secret key - which should always be kept private.
To create a Stripe customer, we need to use our private API key, meaninh this logic will need to be executed on the server. Next.js makes this simple with API routes - special serverless functions that will be created for any .js files in the pages/api directory.
We create a new API route to handle adding a stripe customer and updating the user's profile with their customer ID.
Instructor: [0:00] In our profile table, we want to keep a track of our Stripe customer. This is a unique identifier that's given to us by Stripe, any time we create a new customer in their system. Let's create a new column. This is going to be called Stripe Customer. It's going to be of type, text. We can click Save to create our column.
[0:18] Let's head to stripe.com and set up a free account. Once you're on the dashboard, you can come up to the top-left here and say New Account. I'm going to call mine supabase-saas, and I am, indeed, in Australia. You'll see we've been assigned some API Keys, which we can access from here, or we can go to the Developers panel and then over to API keys.
[0:37] I'm going to click to copy my publishable key, and then head back over to my application, open up .env.local, and create a new environment variable called next_public_stripekey. We're going to say equals, and paste that value in. I'm going to go back to the Stripe dashboard and reveal my secret key, and click to copy that one as well, and create a new environment variable for Stripe secret key. You'll see our other environment variables have next_public_ prepended on them. This makes them available to the client. These will be available in our user's browser.
[1:13] Whereas if we leave that off, this will only be available server side. In Next.js, that's our getServerSideProps and getStaticProps functions and also any API routes that we declare in this folder. Let's create a new API route to handle creating a Stripe customer for us.
[1:28] Let's create a handler function and make that our default export. Next, we need to install the Stripe package from npm. Then we can rerun our development server. Let's import that package in our API route.
[1:43] In our handler function, we can create a new Stripe client by calling init Stripe and passing in process.mf.Stripe_secret_key. Now we can call Stripe.customers.create. This takes a configuration object, where we will pass in the user's email.
[2:01] We'll be getting that from the request.body.record.email. That request object will be a parameter that's automatically passed to our handler along with our response. Stripe.customers.create is going to give us back a customer object.
[2:17] As a response, we can send back a message that that Stripe customer was created for that particular ID. We can save that function and I can see that I've left the E off init Stripe. That looks much better.
[2:29] Using the Thunder Client VS code extension, I can make a request to this API route by entering in our URL. I can send across the email field that our API route is expecting. When I send that request, you'll see that we have our new Stripe customer created. If we go back to our Stripe dashboard and click on Customers, we can see our new john@test.com customer.
[2:51] We want to take the ID of a new customer and write it into our Supabase database. Back over in our API route, let's import our Supabase Client. Remember, we're an extra layer deep, because we're inside that API folder.
[3:06] We can say, we want to await supabase .from('our_profile_table'). We want to update the column for Stripe customer with our new customer ID, for a row where the ID is equal to our request.body.record.ID. If we open up our Thunder Client again, and again, if we make a request to our API route, we just need to also pass in an ID. I'm going to set this to our current user's ID.
[3:36] You'll see our new Stripe customer has been created. If we go back to our Supabase database and refresh, we'll see that our Stripe customer ID has been written to our profile for our logged-in user.
I am using Prettier, installed as an extension in VS Code.
FYI, I installed stripe v9.1.0 and struggled a bit with initializing it. ended up with something like that:
// create-stripe-customer.ts
import Stripe from 'stripe'
...
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2020-08-27',
})
and it works fine.
Excellent call out! Thanks! 🙌
Autoformatting question - What configuration or extensions do you use/recommend (for whichever tool), for automatically wrapping-and-indenting chained method calls, like what I see happening with your supabase calls?