Personalizzare la pagina prezzi

La sezione prezzi è data-driven: il componente <Pricing /> legge da config.ts e renderizza una card per ogni piano. Modifichi il file, la UI si aggiorna.

1. Anatomia di un piano

Ogni oggetto in stripe.plans ha questi campi:

config.ts

{
  priceId: process.env.NODE_ENV === "development"
    ? "price_TESTxxx"    // Stripe price ID in test mode
    : "price_LIVExxx",   // Stripe price ID in live mode
  name: "Starter",         // titolo card
  description: "Per chi vuole partire",
  price: 199,              // prezzo mostrato
  priceAnchor: 249,        // prezzo barrato (opzionale)
  isFeatured: false,       // solo uno può essere true
  features: [
    { name: "Feature uno" },
    { name: "Feature due" },
  ],
},

2. Aggiungi una feature

Le feature sono un array di oggetti con name. Aggiungine una — apparirà con la spunta nella card:

config.ts

features: [
  { name: "Repo completo (Next.js 15)" },
  { name: "Auth: magic link + Google" },
  { name: "Pagamenti Stripe + webhook" },
  { name: "Support prioritario" }, // nuova
],

3. Metti in evidenza un piano

isFeatured: true alza la card e le mette uno stile diverso (colore mustard). Puoi averne uno solo — altrimenti la UX perde senso:

config.ts

{
  name: "All-In",
  isFeatured: true,   // questo piano viene evidenziato
  price: 249,
  features: [ /* ... */ ],
},

4. Prezzi via env in produzione

Il template usa process.env.NODE_ENV per switchare tra priceId di test e di produzione. Va bene per una demo, ma la pratica migliore è mettere i priceId in variabili d'ambiente separate:

config.ts

priceId: process.env.STRIPE_STARTER_PRICE_ID,

.env.local

bash

# In dev
STRIPE_STARTER_PRICE_ID=price_1Test...

# In Vercel (Production environment)
STRIPE_STARTER_PRICE_ID=price_1Live...

Ricorda di aggiungere le variabili di produzione anche su Vercel (Settings → Environment Variables) e di ridiployare.

5. Cambia l'ordine o rimuovi piani

L'ordine dei piani nell'array = l'ordine sulla pagina. Vuoi 3 tier invece di 2? Aggiungi un terzo oggetto. Vuoi solo uno? Cancellane uno. Il componente <Pricing /> si adatta.

Dopo aver modificato i piani, ricordati di sincronizzare i prodotti su Stripe: leggi la guida Ricevere pagamenti per come crearli sulla dashboard e testare il webhook.