Stripe Integration

For subscriptions, we are using Stripe. Now we are going to show you how to integrate Stripe in the Next.js template and how you can add products from the Stripe Dashboard.

Getting the Stripe Secret Key

To get the Stripe secret key you have to have a Stripe account. If you don’t have one go ahead and create it.

For this integration, we are using the Test Mode. Before you deploy your site, make sure to Activate your Stripe account and integrate it with a real Secret Key.

1. Go to the Developers tab.

2. Then go to the API Keys tab, after that scroll down to the Secret Key and copy it.

Now add it to the .env file.

STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY

Create Product on Stripe Dashboard

So, we’ve added the Secret key to the .env file. Now let’s go ahead and see how you can add a product from the Stripe Dashboard.

1. Go to the Products tab.

2. Then click on the Add a Product button

3. Now add all the details about the product. Then click on the Save Product button to save it.

After you create the Product you'll see them on the dashboard

Getting the Product data

Now that you created the Product/Plans, you have to get the priceId and the price to save it in the stripe/priceData.ts file.

You can get the priceID from the product page

After you’ve created the products you’ll see all of them on the Dashboard and on the Frontend under the /pricing page. As shown below: