Setup Plans
All pricing comes from/config.ts:
/config.ts
export const config = {
stripe: {
plans: [
{
name: "Starter",
description: "Perfect for getting started",
price: 49,
priceAnchor: 99, // Optional - shows strikethrough price
priceId: "price_xxx", // Your Stripe price ID
isFeatured: false,
features: [
{ text: "Lifetime access" },
{ text: "All features included" },
{ text: "Email support" },
{ text: "Priority support", isAvailable: false }, // Crossed out
],
},
{
name: "Pro",
description: "For serious builders",
price: 99,
priceId: "price_yyy",
isFeatured: true, // Shows "Popular" badge
features: [
{ text: "Everything in Starter" },
{ text: "Priority support" },
{ text: "Custom integrations" },
],
},
],
},
}
Change Section Heading
Open/components/Pricing.tsx:
<h2>Simple Pricing</h2>
<p>Choose the plan that fits your needs.</p>
Mark Unavailable Features
UseisAvailable: false to show crossed-out features:
features: [
{ text: "Basic features" },
{ text: "Advanced features", isAvailable: false }, // Shows with X icon
]
Keep it simple. Show 1-3 plans max. More options = harder decisions.
Mark your best plan with
isFeatured: true to guide buyers.Get your Stripe price IDs from your Stripe Dashboard