TutorialsStripe Subscriptions

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.

• 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].
• 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.
• In /dashboard/dashboard.component.ts, paste this:

  /src/app/dashboard/dashboard.component.ts

  <main class="min-h-screen p-8 pb-24">
    <section class="max-w-xl mx-auto space-y-8">
      <app-button-account></app-button-account>
      <h1 class="text-3xl md:text-4xl font-extrabold">
        Subscribe to get access:
      </h1>
      <app-button-checkout
        [priceId]="config.stripe.plans[0].priceId"
      ></app-button-checkout>
    </section>
  </main>

• Open http://localhost:4200/dashboard in your browser, log-in and click the button to make a payment with the credit card number 4242 4242 4242 4242.
• Our webhook /api/webhook/stripe/route.ts listens to Stripe events and will handle the logic to provision access (or not) to the user
  You need to have a Stripe local endpoint running on your computer for this to work in dev mode.
• You can add your own logic in /api/webhook/stripe/route.ts like sending abandoned cart emails, remove credits, etc.
• Users can manage their accounts with <app-button-account /> (cancel subscription, update credit card, etc.)

That's it. You can build your SaaS on top of this flow!