import React, { useState } from "react"; const plans = [ { id: "starter", name: "Starter", price: "$0", cadence: "forever", description: "For early projects that need a clean pricing section.", features: ["Responsive pricing cards", "Feature comparison", "Upgrade-ready CTA"], cta: "Start free", }, { id: "plus", name: "Plus", price: "$19", cadence: "per month", description: "For teams shipping paid products with a polished checkout.", features: ["Stripe checkout route", "Customer metadata", "Success and cancel URLs"], cta: "Choose Plus", highlighted: true, }, { id: "pro", name: "Pro", price: "$49", cadence: "per month", description: "For full product teams that need a premium pricing module.", features: ["Everything in Plus", "Priority implementation guide", "Production env checklist"], cta: "Go Pro", }, ]; export default function PricingCheckoutModule() { const [selectedPlan, setSelectedPlan] = useState("plus"); const [billingCycle, setBillingCycle] = useState("monthly"); async function startCheckout(planId) { setSelectedPlan(planId); console.log("Call POST /api/pricing/checkout with:", { planId, billingCycle }); } return (

Pricing module

Sell subscriptions with a copy-ready pricing and checkout flow.

Drop in the frontend, paste the backend route, add your Stripe env vars, and connect real checkout sessions in minutes.

{["monthly", "yearly"].map((cycle) => ( ))}

{plans.map((plan) => (

{plan.name}

{plan.description}

{plan.highlighted && ( Popular )}

{plan.price} /{plan.cadence}

{feature}

))}

); }