Stripe Subscriptions

Let's create a Stripe Checkout to set up a subscription and let our webhook handle the logic to provision access to the user.

You need to have Stripe and a database set up.

Setup

1. In yourStripe dashboard, Click [More +] > [Product Catalog] > [+ Add Product]. Set a name and a monthly price (or anything according to your business model). Then click [Save Product].

2. In the [Pricing] section, copy the product price ID (starts withprice_) and add it to the first plan in thedata.pricing_card.priceIdarraycomponents/Pricing.tsxandconfig.ts

3. In /components/PricingSection.tsx, change the price ID to the one you copied in step 2:

/components/PricingSection.tsx
'use client';
import { Check } from 'lucide-react';
import CheckoutButton from './CheckoutButton';
export default function PricingSection() {
  return (
	<section className="py-16 bg-gray-50">
			<div className="container mx-auto px-4">
				<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
					{/* Monthly Plan */}
					<div className="bg-white rounded-lg shadow-md p-8">
						<CheckoutButton priceId="YOUR_PRICE_ID" />
					</div>
					{/* Annual Plan */}
					<div className="bg-white rounded-lg shadow-md p-8 border-4 border-blue-500 relative">
						<CheckoutButton priceId="YOUR_PRICE_ID" />
					</div>
				</div>
			</div>
	</section>
  );
}

4. In /config.ts, change the price ID to the one you copied in step 2 and the product ID to the one you copied in step 1:

/config.ts
products: [
			{
				type: 'subscription',
				period: 'month',
				title: 'Month',
				productId: 'YOUR_PRODUCT_ID',
				subtitle: 'Per month price',
				price: 25,
				isBest: true,
				linkTitle: 'PAY MOTHERFUCKER',
				featuresTitle: 'Features',
				priceId: 'YOUR_PRICE_ID',
				features: [
					{
						title: 'Feature 1',
						disabled: false,
					},
					{
						title: 'Feature 2',
						disabled: true,
					},
				],
			},
			{
				type: 'subscription',
				period: 'year',
				productId: 'YOUR_PRODUCT_ID',
				title: 'Year',
				subtitle: 'Per year price',
				price: 25,
				linkTitle: 'PAY MOTHERFUCKER YEAR',
				featuresTitle: 'Features VIP',
				priceId: 'YOUR_PRICE_ID',
				features: [
					{
						title: 'Feature 1',
						disabled: false,
					},
					{
						title: 'Feature 2',
						disabled: false,
					},
				],
			},
		],

5. Open http://localhost:3000/dashboardin your browser, log-in and click the button to make a payment with the credit card number 4242 4242 4242 4242.

6. You can add your own logic in/api/webhook/stripe/route.ts like sending abandoned cart emails, remove credits, etc.