Pricing

Sezione prezzi che legge i piani direttamente da config.ts e renderizza una card per ognuno. Il piano con isFeatured: true viene evidenziato con un badge Il più scelto.

File

components/Pricing.tsx

Uso base

app/page.tsx

tsx

import Pricing from "@/components/Pricing";

<Pricing />

Personalizzare

Non tocchi Pricing.tsx: modifichi i piani in config.ts. Ogni card renderizza dinamicamente name, description, price, priceAnchor (barrato), la lista features[] e un <ButtonCheckout> collegato al priceId.

config.ts

stripe: {
  plans: [
    {
      priceId: "price_...",
      name: "Starter",
      description: "Tutto quello che ti serve per spedire",
      price: 199,
      priceAnchor: 149,
      features: [{ name: "Repo completo" }],
    },
    {
      priceId: "price_...",
      isFeatured: true,      // <-- questo si evidenzia
      name: "All-In",
      price: 249,
      features: [{ name: "Aggiornamenti a vita" }],
    },
  ],
}

Solo un piano alla volta può avere isFeatured: true.