ZeroToShip

Docs/Feature

// feature

Pagamenti (Stripe)

Stripe è cablato end-to-end: piani definiti nel config, checkout lato server, webhook che aggiorna Supabase, customer portal per le fatture. La parte che ammazza la maggior parte dei progetti indie, già fatta.

I piani in config.ts

Definisci quanti piani vuoi in config.ts, sotto stripe.plans[]. Il campo priceId è quello che copi dalla dashboard Stripe.

config.ts
ts
stripe: {
  plans: [
    {
      priceId: "price_1Niyy5...",
      name: "Starter",
      description: "Tutto quello che ti serve per spedire",
      price: 199,
      priceAnchor: 149,
      features: [{ name: "Repo completo" }, { name: "Aggiornamenti 1 anno" }],
    },
  ],
},

Il bottone di checkout

<ButtonCheckout /> prende un priceId e apre una sessione checkout Stripe con l'utente prefillato. Sotto il cofano chiama /api/stripe/create-checkout.

components/Pricing.tsx
tsx
<ButtonCheckout priceId={plan.priceId} featured={plan.isFeatured} />

Il webhook

app/api/webhook/stripe/route.ts ascolta gli eventi Stripe e aggiorna la tabella profiles su Supabase. Sblocca l'accesso su checkout.session.completed e invoice.paid, lo revoca su customer.subscription.deleted. Se vendi a chi non ha un account (checkout senza login), il webhook crea l'utente da solo con la service_role key.

Customer portal

/api/stripe/create-portal genera un link al portale Stripe dove i tuoi clienti gestiscono metodi di pagamento e fatture. Zero UI da costruire.

Il tutorial per collegare Stripe test → produzione: Accettare pagamenti.