Stripe Billing

Our boilerplate uses Stripe to handle subscriptions, payments, and billing logic seamlessly.

Follow these steps to configure Stripe:

Create product

1
Go to Stripe Dashboard

Navigate to Product catalog and create your subscription plans.

  • Add product name (Basic, Plus, Elite), monthly pricing, and billing intervals.
2
Navigate to newly created products

Copy the price IDs from the products you created in Stripe. For ex.: price_12345

3
Add this prices to your code

Add this IDs to app/api/webhooks/stripe/route.ts and /src/stripe-config.ts files:

route.ts
 // Change this lines with your product price IDs

  const priceToPlana = {
    'price_1RXOdFR4180vV2vzstsIlApi': 'basic',
    'price_1RXOdZR4180vV2vz2cwzuGUL': 'plus',
    'price_1RXOdmR4180vV2vzeW1272Qy': 'elite',
  };
stripe-config.ts
//Change priceId lines

export const STRIPE_PRODUCTS = {
  BASIC: {
    id: 'prod_SK3j6XDyMHNtrP',
    name: 'Basic',
    description: 'Perfect for trying out the platform',
    priceId: 'price_1RXOdFR4180vV2vzstsIlApi', //this line
    price: 19,
    mode: 'subscription' as const,
    features: [
      'Basic access',
      '2 projects',
      'Community support',
      '1GB storage', 
      'Basic analytics',
    ],
  },
  PLUS: {
    id: 'prod_SLILb9CwBPHZfl',
    name: 'Plus',
    description: 'For individuals and small teams',
    priceId: 'price_1RXOdZR4180vV2vz2cwzuGUL', //this line
    price: 49,
    mode: 'subscription' as const,
    features: [
      'Everything in Basic',
      '10 projects',
      'Email support',
      'API access',
      'Advanced analytics',
      'Team collaboration',
    ],
  },
  
  ELITE: {
    id: 'prod_SLIMID4CHzjlrm',
    name: 'Elite',
    description: 'For growing businesses and teams',
    priceId: 'price_1RXOdmR4180vV2vzeW1272Qy', //this line
    price: 99,
    mode: 'subscription' as const,
    features: [
      'Everything in Plus',
      'Unlimited projects',
      'Priority support',
      'Custom integrations',
      'Advanced security',
      'SSO authentication',
    ],
  },
 
} as const;

Stripe Secret Key

1
Naviagte to Stripe Dashboard → Developers
https://dashboard.stripe.com/developers
2
Go to API Keys

Click + Create secret key to create your own key. Copy the key. You likely won't be able to see it again later. In test mode, it usually looks like sk_test_12345, and in production, it appears as sk_live_12345.

3
Add your secret key to `.env` file in your code
.env
 # Change this lines with your actual keys

# Your Supabase keys
NEXT_PUBLIC_SUPABASE_URL="your_supabase_url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your_supabase_anon_key"

SUPABASE_URL="your_supabae_url"
SUPABASE_SERVICE_ROLE_KEY="your_supabase_service_role_key"

# Your website url without "/" in the end
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Your Stripe keys. Don't forget to use live keys on production
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

Stripe Webhooks

1
Naviagte to Stripe Dashboard → Developers
https://dashboard.stripe.com/developers
2
Go to Webhooks

Click + Add endpoint to add your webhook. Your endpoit url must be this format: https://your-website.com/api/webhooks/stripe or in test mode http://localhost:3000/api/webhooks/stripe

Select this events in your webhook endpoint:

checkout.session.completed

customer.subscription.updated

customer.subscription.deleted

invoice.payment_succeeded

Click Add endpoint

3
Get your webhook secret

Click newly created webhook and reveal your signing secret. Copy it and add to your .env file:

.env
 # Change this lines with your actual keys

# Your Supabase keys
NEXT_PUBLIC_SUPABASE_URL="your_supabase_url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your_supabase_anon_key"

SUPABASE_URL="your_supabae_url"
SUPABASE_SERVICE_ROLE_KEY="your_supabase_service_role_key"

# Your website url without "/" in the end
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Your Stripe keys. Don't forget to use live keys on production
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

Stripe Customer Portal

To get your customer portal url go to Stripe → Settings → Billing → Customer Portal

Copy the link provided and paste it the the components/dashboard/stripe-portal-button.tsx file

stripe-portal-button.tsx
"use client";

import { Button } from "@/components/ui/button";

export function StripePortalButton() {
  return (
    <Button 
      variant="outline" 
      onClick={() => window.location.href = 'https://billing.stripe.com/p/login/test_4gM5kF5Z39hCeOkdiU5EY00'}
    >
      Manage Subscription
    </Button>
  );
}