Configure Stripe for Production and Deploy Next.js Application with Vercel

Instructor: [0:00] Let's push our application to prod, and make it publicly available on the Internet. First thing we want to do is, click Activate Account from our Stripe dashboard. This will then ask us a collection of questions, specific to our business. Once that's finished, you'll see that that badge is gone, and it says that we're in live mode.

[0:16] This will have also removed our customers, and also our products. Let's add our subscription options again. Next, we need to update anywhere where we've referenced localhost in our application. We'll say, that's just in our two Stripe API routes. Let's create a new environment variable for our client URL.

[0:41] Locally, we can set this to http://localhost over port 3000. Then, we can replace that section of our URLs with our client URL environment variable, and the same for our API route for our customer portal. Now we need to create a new GitHub project. I'm going to use the GitHub CLI for this.

[0:58] I'm going to say GitHub repo create and then the name Supabase-SaaS. I want this to be public. I don't need a gitIgnore or a license. I want to update the origin. I can now add all of my code. I can commit with the message implement SaaS app. I can push to origin main.

[1:19] If we head over to Vercel.com and create a free account. We can then say new project and you may need to authorize Vercel to read your GitHub repositories. Then I would like to import this Supabase-SaaS project that I just created. We can skip creating a team.

[1:34] The settings are all correct. We just need to add our environment variables. Our Supabase URL and Supabase key will remain the same. Our publishable key from Stripe will now be available in our dashboard under developers and then API keys.

[2:06] We can reveal our Stripe secret key and copy that across. We can keep our API route secret and stripe sign-in secret the same. Our Supabase service key will stay the same.

[2:30] Our client URL will be created when our project gets deployed, but will likely be https://the name of our GitHub project. In this case, Supabase-SaaS.Vercel.app. We can always update that later if it gives us a different address once we've deployed.

[2:49] Now we can click Deploy. Once that's finished, we can go to our dashboard and confirm that that is, in fact, the domain that they've given us. Let's copy that URL and head back over to our Stripe dashboard. We want to enable our customer portal by going to settings.

[3:04] Then under billing, customer portal. We need to enable any actions we want our customers to be able to perform, and add the products we want them to have access to. Now we can specify where our terms of service are and where our privacy policy is and set our default redirect link and click Save.

[3:24] Then to set up our Webhooks, let's go to developer's webhooks and scroll down to the bottom and click add an endpoint. We want the endpoint URL to be our Vercel app/API/stripe hooks and choose our events to listen to. They were under customer and then customer.subscription.

[3:40] We're now only listening to deleted and also updated. Let's click Add Events and then scroll down and click Add Endpoint. Now that we have a new webhook, we also have a new sign-in secret so let's reveal that and copy. Let's come back over to our project in Vercel and go to settings.

[3:58] We can select environment variables on the left and then find our Stripe sign-in secret, and we can edit the value. Now because we've changed one of our environment variables, we need to redeploy our application. We can go to deployments and click the last deployment.

[4:17] Then click the three little dots for more options and save redeploy. Make sure that include build cache is not ticked and click Redeploy. Now that that's finished, let's head over to our Supabase dashboard and go to authentication, settings and replace our site URL with the URL from the cell.

[4:38] Let's click Save. Then head over to our table editor and delete our test profile, and then authentication and users, and delete our Supabase user. Then come over to database and go to our function hooks. Delete what's currently there.

[4:55] Create a new function hook called, getStripeCustomer. Watch for changes on the profile table, only for the insert action. Set our HTTP request to post. Go to our Vercel URL/API/create stripe customer and add a HTTP param called API route secret.

[5:19] Set it to the value for our API route secret in our .env file. Back in our application, let's refresh to make sure we have the latest version. We can see our list of lessons there. We can click into them to see more details. We don't yet see the premium content. Let's create a new customer by clicking Login, and we can go to our dashboard. We can see, we're not yet subscribed.

[5:45] Let's look at the pricing options, and subscribe to the basic package. We can then use a real credit card to subscribe. When we go back to our dashboard, we'll see we've successfully subscribed to a monthly plan. If we go and look at one of our lessons, we can see that premium content.