How to Build a Pricing Page in Next.js with Stripe

After creating an account, the user will be given the free user role, as we've defined in the prisma.schema.

1model User {
2  id                 String     @id @default(cuid())
3  name               String?
4  email              String?    @unique
5  emailVerified      DateTime?
6  image              String?
7  role               String?    @default("free user")  // Add a new "role" column
8  accounts           Account[]
9  sessions           Session[]
10
11  stripeCustomerId   String?    @unique
12  subscriptionId     String?
13  subscriptionStatus String?
14
15  createdAt DateTime @default(now())
16  updatedAt DateTime @updatedAt
17}

In order for a free user to become a paid user, they must be subscribed to our SaaS platform. In this lesson, we are going to discuss how to implement the subscription logic using Stripe.

Creating a product

First of all, you need to set up a new product on Stripe. Go to https://dashboard.stripe.com/ and navigate to the product catalogue page:

Click on the Add a product button to create a new product. You will be asked to provide some information about the product:

Choose your desired product name, and note that this name will be displayed to the user when they checkout.

Pay attention to the lower half of the page. It is where we set up the pricing model for the product. It is possible for the product to have multiple pricing models, but for now, we are starting with a monthly subscription payment model.