Billing & Subscriptions

Complete billing system with Stripe integration, subscription management, and usage tracking.

For complete documentation and more examples, visit https://authcore-liard.vercel.app/

Features

  • Beautiful pricing table component
  • Stripe Checkout integration
  • Subscription lifecycle management
  • Webhook handlers for payment events
  • Customer portal for self-service
  • Usage-based billing support
  • Invoice generation and tracking
  • Trial period management
  • Plan upgrades and downgrades

Installation

bash

You'll also need to set up your Stripe account and get your API keys.

PricingTable Component

tsx

Live Demo

Simple, Transparent Pricing

Choose the plan that matches your team's stage. Upgrade or downgrade anytime.

Free

$0Monthly

Everything in Free

  • Up to 10 users
  • Basic features
  • Email support

Professional

$29Monthly

Everything in Professional

  • Unlimited users
  • Advanced features
  • Priority support
  • API access

Enterprise

$99Monthly

Everything in Enterprise

  • Everything in Pro
  • Custom integrations
  • 24/7 support
  • SLA guarantee

Need something more?

Let us tailor an enterprise plan with dedicated support, SLAs, and custom billing.

response within 1 business day

Stripe Checkout Integration

typescript

Webhook Handler

Handle Stripe webhooks to keep your database in sync:

typescript

Customer Portal

Let users manage their own subscriptions:

typescript

Usage in Components

typescript

Database Schema

The billing system uses these Prisma models:

model Plan {
  id          String   @id @default(cuid())
  name        String
  price       Int      // in cents
  interval    String   // month, year
  features    Json
  stripePriceId String?
  subscriptions Subscription[]
}

model Subscription {
  id                    String   @id @default(cuid())
  userId                String
  planId                String
  stripeSubscriptionId  String   @unique
  stripeCustomerId      String
  status                String   // active, canceled, past_due
  currentPeriodStart    DateTime
  currentPeriodEnd      DateTime
  cancelAtPeriodEnd     Boolean  @default(false)
  createdAt             DateTime @default(now())
  updatedAt             DateTime @updatedAt

  user User @relation(fields: [userId], references: [id])
  plan Plan @relation(fields: [planId], references: [id])
}

model Invoice {
  id                String   @id @default(cuid())
  userId            String
  subscriptionId    String
  stripeInvoiceId   String   @unique
  amount            Int
  currency          String
  status            String
  pdfUrl            String?
  hostedInvoiceUrl  String?
  createdAt         DateTime @default(now())

  user User @relation(fields: [userId], references: [id])
}

Environment Variables

# Stripe Keys
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# App URL
NEXTAUTH_URL=http://localhost:3000

Testing

Use Stripe's test cards for development:

  • Success: 4242 4242 4242 4242
  • Decline: 4000 0000 0000 0002
  • Requires 3DS: 4000 0025 0000 3155

Learn More