Payments

​

Create the plans

Go to your stripe account and create a product with your plan name, for example Basic Plan. Set a name, ammount and if it’s a recurring plan or not.

Click on the product you just created and go to the Pricing section. There, copy the content of the API_ID field. should look something like this: price_xxxxxxxxxxxxxx.

Repeat the process for each plan you want to create.

​

Adding subscriptions to your app

You just need to use the RecurringCheckoutButton that you can import from @/components/store/checkout-button

It only takes one prop, the priceId that you copied from the stripe dashboard.

<RecurringCheckoutButton priceId={"price_xxxxxxxxxxxxxx"}>Start now</RecurringCheckoutButton>

If you want a pre-defined ui to show your different plans, you can use the ProductCard component like so:

 <ProductCard
          title="Basic"
          price="$99"
          description="Best for small business owners, startups who needs landing page for their business."
          features={["Thing number 1", "Thing number 2", "Thing number 3"]}
          purchaseButton={<RecurringCheckoutButton priceId={"price_1PAAVxJ6IFM3omoTJ2kigCqW"}>Start now</RecurringCheckoutButton>}

        />

​

Add one-time payments to your app

In the prisma schema, you will find this model:

model OneTimeProduct {
  id              String @id @default(cuid())
  stripeProductId String @unique
  name            String
  users           User[]
}

There, you can add the one-time payment products you want to sell in your app. To add them, you can use, for example, prisma studio, opening the terminal and running npx prisma studio. Then going to the OneTimeProduct table and adding the products you want to sell.

Now, you just need to render a OneTimeCheckoutButton component, that you can import from @/components/store/checkout-button.

It takes two props, the productId and the priceId of the product. Both you can get from the stripe dashboard.

You can also use the pre-defined ProductCard component to show your products.

  <ProductCard
          title="My Product"
          price="$199"
          description="Best for small business owners, startups who needs landing page for their business."
          features={["Thing number 1", "Thing number 2", "Thing number 3"]}
          purchaseButton={<OneTimeCheckoutButton priceId="price_xxxxxxxxxxxxxx" productId="prod_xxxxxxxxxxxxxx">Buy now</OneTimeCheckoutButton>}

        />