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?
To complete a subscription payment:
customer.id
is stored in a cookie. View codepriceId
. Then the Payment Intent's secret is returned. View code<PaymentElement>
to enter their payment info. View codestripe.confirmPayment()
is called. View codecustomer.subscription.created
. View codeNote: Steps 6 and 7 may happen in reverse order. Make sure to provision the subscription from the thank you page and the webhook handler.
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
Tunnel Stripe events:
stripe listen --forward-to localhost:5173/stripe/webhooks
Run the dev server:
SECRET_STRIPE_WEBHOOK_KEY=whsec_.... pnpm dev
MIT