SvelteKit + Stripe Subscriptions

Example of using Stripe Subscriptions & PaymentElement with SvelteKit.

Note: Stripe Checkout is an alternative approach if you want to use pre-built payment forms. Need help choosing?

Payment Flow

To complete a subscription payment:

1. The User enters their e-mail address and name. View code
2. A Stripe Customer record is created and customer.id is stored in a cookie. View code
3. A Stripe Subscription record is created based on a priceId. Then the Payment Intent's secret is returned. View code
4. The User is presented with the <PaymentElement> to enter their payment info. View code
5. The User submits the form, and stripe.confirmPayment() is called. View code
6. Stripe redirects the User to the thank you page. View code
7. Stripe sends webhook customer.subscription.created. View code

Note: Steps 6 and 7 may happen in reverse order. Make sure to provision the subscription from the thank you page and the webhook handler.

Setup

Clone the repo:

gh repo clone joshnuss/sveltekit-stripe-subscriptions

Configure environment variables in .env:

cp .env.example .env

• PUBLIC_STRIPE_KEY: Your public Stripe key.
• SECRET_STRIPE_KEY: Your private Stripe key.
• SECRET_STRIPE_WEBHOOK_KEY: Stripe's secret used to sign webhooks.
• STRIPE_PRICE_ID: The priceId for the subscription product. You might want to store this in your database.
• DOMAIN: The site's domain. Used for creating redirect URLs. Default is http://localhost:5173

Install dependecies:

pnpm install

Usage

Tunnel Stripe events:

stripe listen --forward-to localhost:5173/stripe/webhooks

Run the dev server:

SECRET_STRIPE_WEBHOOK_KEY=whsec_.... pnpm dev

License

MIT