Payments

Overview

Stripe handles all payment processing. The template includes subscription checkout, webhook handling, and Customer Portal integration.

Setup

1. Create products and prices in your Stripe Dashboard
2. Copy price IDs to config.ts
3. Add your Stripe keys to .env.local
4. Set up the webhook endpoint (see below)

Checkout Flow

1. User clicks a plan on the pricing page
2. createCheckoutSession() Server Action is called
3. A Stripe Customer is created (or retrieved) for the user
4. User is redirected to Stripe Checkout
5. On success, the webhook updates the subscriptions table

Webhook Setup

Local Development

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Copy the webhook signing secret to STRIPE_WEBHOOK_SECRET in .env.local.

Production

Add a webhook endpoint in Stripe Dashboard pointing to:

https://yourdomain.com/api/webhooks/stripe

Events to listen for:

• checkout.session.completed
• customer.subscription.created
• customer.subscription.updated
• customer.subscription.deleted
• invoice.payment_failed

Customer Portal

Users can manage their subscription via the Stripe Customer Portal:

import { createPortalSession } from '@/actions/billing'

// In a Server Action or form:
await createPortalSession()
// Redirects to Stripe Customer Portal

Testing

Use Stripe test mode and the test card 4242 4242 4242 4242.

For a free test flow, create a 100% discount coupon in Stripe and apply it at checkout.