Stripe Subscriptions & Checkout

Let's create a Stripe Checkout to set up a subscription and let our webhook handle the logic to provision access to the user.

You need to have Stripe and a database set up.

Setup

1. In your Stripe dashboard (opens in a new tab), Click [More +] > [Product Catalog] > [+ Add Product]. Set a name and a monthly price (or anything according to your business model). Then click [Save Product].

2. Throughout the project, you will have different instances where the user interacts with checkout buttons or subscription checkers. Copy the product ID (starts with prod_) and product price ID (starts with price_) and paste it in their desired variables, The instances are:

   • /utils/supabase-admin.ts
   • /components/sidebar/components/Links.tsx
   • /components/sidebar/components/SidebarCard.tsx
   • /components/sidebar/Sidebar.tsx
   • /components/pricing/index.tsx
   • /components/dashboard/subscription/index.tsx
   • /app/api/create-checkout-session/route.ts

3. In our Pricing page example, we have the handleCheckout function, that takes the price ID as an argument, and handles the rest for you. All that remains is to trigger it by a button or whatever you decide to.

4. Open http://localhost:3000/pricing (opens in a new tab) in your browser, log-in and click the button to make a payment with the credit card number 4242 4242 4242 4242.

5. Our webhook /api/webhooks/route.ts listens to Stripe events and will handle the logic to provision access (or not) to the user.

6. You can add your own logic in /api/webhooks/route.ts like sending abandoned cart emails, remove credits, etc.

7. Users can manage their accounts with <ButtonAccount /> (cancel subscription, update credit card, etc.)