SvelteKit Stripe Starter

Production-ready SvelteKit template with Stripe Checkout, webhooks, customer portal, and subscription management.

Features

• 🔥 SvelteKit — Full-stack framework with SSR and API routes
• 💳 Stripe Checkout — One-time payments and subscriptions
• 🔄 Webhooks — Secure webhook handling with signature verification
• 👤 Customer Portal — Self-service subscription management
• 🎨 Tailwind CSS — Utility-first styling (optional, easily added)
• 📦 TypeScript — Full type safety throughout
• 🛡️ Environment Validation — Fail-fast on missing config
• 🚀 Deploy Anywhere — Adapter-auto for Vercel/Netlify/Node

Quick Start

# Clone
git clone https://github.com/kszongic/sveltekit-stripe-starter.git
cd sveltekit-stripe-starter

# Install
npm install

# Configure
cp .env.example .env
# Add your Stripe keys to .env

# Run
npm run dev

Stripe Setup

1. Create a Stripe account
2. Get your API keys from the Stripe Dashboard
3. Create products/prices in the Stripe Dashboard or via API
4. Set up webhook endpoint: your-domain.com/api/webhooks/stripe

Required Events

Configure these webhook events in Stripe Dashboard:

• checkout.session.completed
• customer.subscription.created
• customer.subscription.updated
• customer.subscription.deleted
• invoice.payment_succeeded
• invoice.payment_failed

Environment Variables

PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
STRIPE_PRICE_ID_MONTHLY=price_...
STRIPE_PRICE_ID_YEARLY=price_...
PUBLIC_BASE_URL=http://localhost:5173

Project Structure

src/
├── lib/
│   ├── server/
│   │   ├── stripe.ts          # Stripe client instance
│   │   └── webhooks.ts        # Webhook event handlers
│   ├── config.ts              # Environment config
│   └── types.ts               # Shared types
├── routes/
│   ├── +page.svelte           # Landing/pricing page
│   ├── +layout.svelte         # App layout
│   ├── api/
│   │   ├── checkout/+server.ts      # Create checkout session
│   │   ├── portal/+server.ts        # Customer portal session
│   │   └── webhooks/stripe/+server.ts  # Webhook handler
│   ├── success/+page.svelte   # Post-checkout success
│   └── cancel/+page.svelte    # Checkout cancelled
├── app.html
└── app.d.ts

API Routes

POST /api/checkout

Creates a Stripe Checkout session. Body: { priceId, mode?, customerEmail? }

POST /api/portal

Creates a Stripe Customer Portal session. Body: { customerId }

POST /api/webhooks/stripe

Handles incoming Stripe webhook events with signature verification.

Customization

Adding Products

Update your price IDs in .env and modify the pricing page in src/routes/+page.svelte.

Database Integration

Add your preferred DB (Prisma, Drizzle, etc.) and store customer/subscription data in the webhook handlers at src/lib/server/webhooks.ts.

Authentication

Pair with any auth solution (Lucia, Auth.js, Clerk) — the checkout and portal routes accept customer identifiers.

Local Webhook Testing

# Install Stripe CLI
brew install stripe/stripe-cli/stripe

# Forward webhooks to local dev
npm run stripe:listen

# In another terminal
npm run dev

Deployment

Works out of the box with:

• Vercel — Zero config
• Netlify — Zero config
• Node.js — Switch to @sveltejs/adapter-node
• Cloudflare — Use @sveltejs/adapter-cloudflare

Remember to set environment variables and update webhook URLs in Stripe Dashboard.

License

MIT — see LICENSE