Step 1

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

Step 2

In the [Pricing] section, copy the product price ID (starts with price_) and add it to the first plan in the stripe.plans array config.ts.

Step 3

In /dashboard/page.tsx paste below:

import ButtonAccount from "@/components/ButtonAccount";
import ButtonCheckout from "@/components/ButtonCheckout";
import config from "@/config";
 
export const dynamic = "force-dynamic";
 
export default async function Dashboard() {
  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <ButtonAccount />
 
        <h1 className="text-3xl md:text-4xl font-extrabold">
          Subscribe to get access:
        </h1>
 
        <ButtonCheckout
          mode="subscription"
          priceId={config.stripe.plans[0].priceId}
        />
      </section>
    </main>
  );
}
 
 

Step 4

Open http://localhost:3000/dashboard (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

Step 5

Our webhook /api/webhook/stripe/route.ts listens to Stripe events and will handle the logic to provision access (or not) to the user—See the boolean hasAccess in theUser.ts schema (NextAuth) or has_access in your Supabase profiles table.

Step 6

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

Step 7

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