Claude Stripe Svelte

anuarhdz

Production-ready SvelteKit SaaS starter with Stripe subscriptions, idempotent fulfillment, Supabase auth/database, and shadcn-svelte UI. Follows Stripe's official best practices.

Download

SvelteKit SaaS Starter with Stripe & Supabase

A complete, production-ready SaaS starter template featuring:

🔐 Supabase Authentication - Secure email/password auth with email verification
💳 Stripe Subscriptions - Complete subscription lifecycle with webhooks
🎨 shadcn-svelte UI - Beautiful, accessible components built with Tailwind CSS v4
⚡ SvelteKit + Svelte 5 - Modern framework with runes syntax
📊 Subscription Dashboard - User dashboard with subscription management
🔒 Row Level Security - Database security with Supabase RLS
💪 TypeScript - Full type safety throughout

⚡ Quick Start: Skip to installation | 📖 Learn More: Architecture docs | 🎯 Reuse Pattern: Integration reference

Why Use This Starter?

This project implements Stripe's official fulfillment best practices with:

✅ Idempotent fulfillment - Safe to call multiple times, prevents duplicate actions ✅ Dual-trigger pattern - Webhooks + Success page for instant UX + reliability ✅ Async payment support - ACH, bank transfers handled automatically ✅ Production-tested patterns - Based on real-world SaaS implementations ✅ Comprehensive documentation - 40+ pages covering architecture & decisions

Perfect for:

SaaS MVPs that need subscriptions fast
Learning production-ready Stripe integration
Reference implementation for your own projects

Features

Authentication

Email/password authentication with Supabase
Email verification flow
Protected routes and session management
SSR-compatible auth with proper cookie handling

Subscription Management

Browse pricing plans
Subscribe via Stripe Checkout
Idempotent fulfillment system - Production-ready, prevents double-processing
Dual-trigger fulfillment - Webhooks + Success page for instant UX
Async payment support - ACH, bank transfers handled automatically
Automatic subscription sync with webhooks
Customer portal for subscription management
Trial period support
Subscription status tracking (active, trialing, past_due, canceled, etc.)
Fulfillment tracking - Complete audit trail in database

Database

PostgreSQL database via Supabase
Automatic webhook data sync
Row Level Security (RLS) policies
Database schema migrations

UI/UX

Responsive design
Light/dark theme support (customizable)
Clean, modern interface
Accessible components following shadcn design system

Quick Start

Prerequisites

Node.js 18+ and pnpm
Stripe account
Supabase project
Stripe CLI (for local webhook testing)

Installation

Clone and install dependencies:

git clone <your-repo-url>
cd claude-stripe-svelte
pnpm install

Set up environment variables:

cp .env.example .env

Edit .env and fill in your keys:

Stripe keys from Dashboard > API Keys
Supabase keys from Project Settings > API

Set up the database:

Go to your Supabase project's SQL Editor and run the migration:

-- Copy and paste contents of supabase/migrations/00001_subscriptions_schema.sql

Create products in Stripe:

Go to Stripe Dashboard > Products
Create your subscription products and prices
Copy the Price IDs to your .env file

Set up webhooks for local development:

# In a separate terminal
stripe listen --forward-to localhost:5173/api/webhooks/stripe

Copy the webhook signing secret to your .env file.

Start the development server:

pnpm dev

Visit http://localhost:5173

Project Structure

├── src/
│   ├── lib/
│   │   ├── components/ui/          # shadcn-svelte components
│   │   ├── stripe.server.ts        # Stripe SDK (server-only)
│   │   ├── supabase.ts             # Database helpers
│   │   ├── subscription.ts         # Subscription utilities
│   │   └── utils.ts                # Utilities (cn, etc.)
│   ├── routes/
│   │   ├── api/
│   │   │   ├── stripe/             # Stripe API endpoints
│   │   │   └── webhooks/stripe/    # Stripe webhook handler
│   │   ├── auth/                   # Auth pages (login, signup, etc.)
│   │   ├── dashboard/              # Protected dashboard
│   │   ├── pricing/                # Public pricing page
│   │   └── +page.svelte            # Landing page
│   ├── app.css                     # Global styles + Tailwind
│   ├── app.d.ts                    # TypeScript definitions
│   └── hooks.server.ts             # Server hooks (Supabase SSR)
├── supabase/
│   ├── migrations/                 # Database migrations
│   └── README.md                   # Database setup guide
├── .env.example                    # Environment variables template
├── ARCHITECTURE.md                 # Architecture & design decisions
├── STRIPE_SETUP.md                 # Stripe setup guide
├── FULFILLMENT_GUIDE.md            # Fulfillment system guide
└── CLAUDE.md                       # Technical documentation

Documentation

Getting Started

README.md - You are here! Quick start guide

Understanding the Architecture

ARCHITECTURE.md - ⭐ START HERE: Complete architecture & design decisions (40+ pages)
STRIPE_INTEGRATION_REFERENCE.md - 📋 Quick Reference: Copy this to new projects for AI assistance

Implementation Guides

STRIPE_SETUP.md - Detailed Stripe integration setup
FULFILLMENT_GUIDE.md - Fulfillment system deep dive
FIX_DATABASE.md - Database troubleshooting
supabase/README.md - Database setup instructions

For AI Development

CLAUDE.md - Technical documentation for Claude Code instances

Common Tasks

Add a New Subscription Plan

Create product in Stripe Dashboard
Product will auto-sync via webhook
Plan automatically appears on pricing page

Customize UI Theme

Edit CSS variables in src/app.css:

:root {
  --primary: 221.2 83.2% 53.3%;  /* Your brand color */
  /* ... other variables */
}

Add Protected Content

// +page.server.ts
import { redirect } from '@sveltejs/kit';

export const load = async ({ locals: { user } }) => {
  if (!user) throw redirect(303, '/auth/login');
  // Protected content here
};

Check Subscription Status

import { getUserSubscription } from '$lib/supabase';
import { isSubscriptionActive } from '$lib/subscription';

const subscription = await getUserSubscription(supabase, userId);
const hasAccess = isSubscriptionActive(subscription);

Development Commands

# Development
pnpm dev              # Start dev server
pnpm build            # Build for production
pnpm preview          # Preview production build

# Code Quality
pnpm check            # Type check
pnpm format           # Format with Prettier
pnpm lint             # Lint with ESLint

Deployment

Environment Variables

Set these in your production environment:

All variables from .env.example
PUBLIC_APP_URL should be your production domain

Webhook Setup

Go to Stripe Dashboard > Webhooks
Add endpoint: https://yourdomain.com/api/webhooks/stripe
Select events: customer.subscription.*, product.*, price.*
Copy signing secret to production env vars

Database

Run migrations in your production Supabase project.

Deployment Platforms

This project works with any SvelteKit-compatible platform:

Vercel
Netlify
Cloudflare Pages
Your own server

See SvelteKit adapters for platform-specific setup.

Tech Stack

SvelteKit - Application framework
Svelte 5 - UI framework with runes
TypeScript - Type safety
Stripe - Payment processing
Supabase - Database & authentication
Tailwind CSS - Styling
shadcn-svelte - UI components

Security

✅ Row Level Security (RLS) enabled on all tables
✅ Webhook signature verification
✅ Server-side API key handling
✅ CSRF protection via SvelteKit
✅ Secure session management
✅ Email verification for new accounts

Support

For issues and questions:

Check the documentation files (ARCHITECTURE.md, STRIPE_SETUP.md)
Review Stripe webhook logs in dashboard
Check Supabase logs for database issues
Open an issue on GitHub

Contributing

Contributions are welcome! This project serves as a reference implementation, but improvements are always appreciated.

Areas where contributions are especially welcome:

Additional payment methods (PayPal, crypto, etc.)
Email notification templates
More comprehensive test suite
Additional UI components
Internationalization (i18n)
Documentation improvements

Please feel free to:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Roadmap

See ARCHITECTURE.md - Section 10 for planned features and improvements.

Short term:

Email notifications system
More shadcn-svelte components
Usage-based billing examples

Medium term:

Multi-subscription support
Team/organization features
Admin dashboard

Star History

If you find this project useful, consider giving it a ⭐ on GitHub!

License

MIT License - see LICENSE file for details

This project is free to use for personal and commercial projects. Attribution is appreciated but not required.

Built with ❤️ using SvelteKit, Stripe, and Supabase

Created by @anuarhdz with assistance from Claude Code

SvelteKit - The framework
Stripe Node SDK - Payment processing
Supabase - Backend platform
shadcn-svelte - UI components

Acknowledgments

This project implements patterns and best practices recommended by:

Top categories

Claude Stripe Svelte

SvelteKit SaaS Starter with Stripe & Supabase

Why Use This Starter?

Features

Authentication

Subscription Management

Database

UI/UX

Quick Start

Prerequisites

Installation

Project Structure

Documentation

Getting Started

Understanding the Architecture

Implementation Guides

For AI Development

Common Tasks

Add a New Subscription Plan

Customize UI Theme

Add Protected Content

Check Subscription Status

Development Commands

Deployment

Environment Variables

Webhook Setup

Database

Deployment Platforms

Tech Stack

Security

Support

Contributing

Roadmap

Star History

License

Related Projects

Acknowledgments

Top categories