Stripe Subscription Demo with Next.js

A simple Next.js application demonstrating Stripe subscription integration with monthly and yearly billing options.

Features

• Monthly and yearly subscription plans
• Stripe Checkout integration
• Subscription webhook handling
• Success and cancellation pages
• Clean, responsive UI with Tailwind CSS

Setup Instructions

1. Clone and Install Dependencies

npm install

2. Configure Stripe

1. Create a Stripe account at https://stripe.com
2. Get your API keys from the Stripe Dashboard
3. Copy .env.local and add your Stripe keys:

STRIPE_SECRET_KEY=sk_test_your_secret_key_here
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here
NEXT_PUBLIC_BASE_URL=http://localhost:3000

3. Create Stripe Products

Run the setup script to create products and prices in Stripe:

npm run setup-stripe

This will create:

• A product named "Premium Subscription"
• Monthly price ($9.99/month)
• Yearly price ($99.99/year)

Copy the generated IDs into your .env.local file.

4. Set Up Webhooks (Optional)

1. Install Stripe CLI: https://stripe.com/docs/stripe-cli
2. Forward webhook events to your local server:

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

3. Copy the webhook signing secret to your .env.local file

5. Run the Application

npm run dev

Visit http://localhost:3000 to see the subscription demo.

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── create-checkout-session/   # Creates Stripe checkout sessions
│   │   ├── get-session/              # Retrieves session data
│   │   └── webhook/                  # Handles Stripe webhooks
│   ├── success/                      # Success page after payment
│   ├── cancel/                       # Cancellation page
│   └── page.tsx                      # Main page with pricing
├── components/
│   ├── PricingCard.tsx              # Individual pricing plan card
│   └── PricingSection.tsx           # Pricing section with both plans
├── lib/
│   └── stripe.ts                    # Stripe configuration
└── scripts/
    └── setup-stripe.ts              # Script to create Stripe products

Key Features Implemented

• Checkout Sessions: Secure payment processing with Stripe Checkout
• Webhook Handling: Processes subscription events (created, updated, cancelled)
• Success/Cancel Pages: User-friendly post-payment experience
• Responsive Design: Mobile-friendly pricing cards
• TypeScript: Full type safety throughout the application

Testing

Use Stripe's test card numbers:

• Success: 4242 4242 4242 4242
• Declined: 4000 0000 0000 0002

Deployment

1. Deploy to Vercel, Netlify, or your preferred platform
2. Update NEXT_PUBLIC_BASE_URL in your environment variables
3. Configure webhook endpoints in your Stripe dashboard

Next Steps

To extend this demo:

• Add user authentication
• Implement subscription management (cancel, upgrade/downgrade)
• Add usage-based billing
• Create customer portal
• Add subscription analytics