Payments
Setting up payments and listening to webhooks with Stripe
Setup
Register
Head over to Stripe and create an account and complete the registration.
Update Settings
Be sure to go through the Payments settings and setup your branding and payment options.
Test Mode + API Keys
Switch Stripe to Test Mode and go to the Developers tab. Get your Secret key and paste it into the .env
file:
Create a product
Head over to the product catalog and create at least one product. Go to src/routes/api/stripe/+server.ts
and add in your product’s price ID along with a name of your choice (id).
Usage
With the setup complete, you will now be able to call the stripe checkout using a function in your $lib called checkout
which takes a string as an argument.
Say you have a product setup in your src/routes/api/stripe/+server.ts
as:
You can call the stripe checkout anywhere in your app using: checkout('basic')
Webhooks
Stripe webhooks are listened to on src/routes/webhook/stripe/+server/.ts
.
In the file above, you will see how you can listen to events that you are interested in using if or case statements.
In the Stripe Developers section, you can click “Add endpoint” and test your webhooks locally before adding the actual endpoint url.
For testing and listening to events locally with the Stripe CLI, use localhost:5173/webhook/stripe
. When you are ready to move into production your endpoint URL should be: https://[your-domain.com]/webhook/stripe
.
More information on Stripe’s API and Webhooks, click here.