Skip to main content
Note: This guide walks you how we setup stripe in the boilerplate. you don’t need to implement it in the boiler plate since its already implemented.

Prerequisites

  1. A Stripe account (Sign up at stripe.com)
  2. Go to your dashboard top right corner and turn on test mode
  3. Create a product in the dashboard
  4. Required environment variables: in apps/server/.env

Installation

Install the required dependencies:

Server-Side Configuration

  1. Initialize the Stripe client: in apps/server/src/lib/stripe.ts
  1. Configure BetterAuth with Stripe plugin: in apps/server/src/lib/auth.ts

Client-Side Configuration

Set up the auth client with Stripe support:

Product Configuration

Define your products in a configuration file: in apps/server/src/utils/stripeProduct.ts
// better auth handles webhooks for you already. but if you want to handle them manually, you can do so by creating a webhook handler in apps/server/src/lib/auth.ts

Webhook Handling

The plugin automatically handles common webhook events:
  • checkout.session.completed: Updates subscription status after checkout
  • customer.subscription.updated: Updates subscription details when changed
  • customer.subscription.deleted: Marks subscription as canceled
You can also handle custom events: in apps/server/src/lib/auth.ts

Managing Subscription

Users can manage their subscription through the Stripe Customer Portal:

UI Components

The boilerplate includes pre-built UI components for Stripe integration:

Common Issues

  1. Webhook Signature Verification
    • Ensure the webhook secret is correctly set
    • Verify the signature in the webhook handler
  2. Subscription Status Sync
    • Implement proper webhook handling
    • Update the database on subscription changes
  3. Checkout Session
    • Set correct success and cancel URLs
    • Handle failed payments gracefully

Next Steps