In this article I will share with you a payment module that could be really useful for those you want to implement a SaaS.
On my side, I used this module on top of the React/Node/MySQL starter. This starter has been presented to you last week in this article.
- subscription creation
- subscription cancelation
- subscription re-activation before d-day cancelation
- last but not least, almost 14 hours of work saved :D
By getting the web starter I was mentioning above, you'll be able to plug this payment module directly on top of it and have a functional project with an authentication and a payment system in less than 20 minutes.
Note that using the starter is not mandatory, you can also use the module as standalone. The integration won't be as easy as with the starter, but it should still be simple to integrate it in your already created project :)
In this module, we'll use Stripe's checkout session. They are meant to create a payment session on Stripe's side for a given user and given product. We will redirect our user to this session when he clicks (hopefully) on "BUY NOW".
High picture of the workflow:
- User clicks on your "buy button".
- Frontend asks backend to create a Stripe
- Backend creates the
checkout sessionand returns the corresponding
sessionIdto the frontend.
- Frontend redirects the user to the created session using the
- User pays on Stripe website and get redirect to your website (thanks to the
successUrlyou'll provide) once the payment is successfully done.
- Backend is receiving notifications about the payment status thanks to a
Webhookand save the payment status in database.
- Create a Stripe account
- Create a API key pair in "Developers" section. Once created keep your public (
pk_test...) and secret (
sk_test...) keys safe, we'll use them later :)
- Create your subscription product: set a description, a price, and the cancel settings. The product will be created in "test mode" by default. Once created, Stripe will display you a
priceIdcorresponding to the product, as usual keep it safe because we'll use it later :)
- Create a
Webhookbetween Stripe and your backend in "Developers" section, this will give you a secret
whsec_that should be kept safe.
- Add following event types to your Webhook: [
- Fill environment files with all info kept above as explained here.
- You can now push your frontend and backend to production and test your payment system! In test mode, you can fill the payment form with Stripe's test credit card
4242-4242-4242-4242and fill other fields with whatever you want.
- If your test passed, you can switch your Webhooks and your subscription product to production by clicking on "Send to production". Do not forget to update your environments files accordingly :)
The entire tutorial and a step by step integration on the starter is available here.
I hope this module will help you saving your some time while trying to implement a payment system in your project.
If you have any question, I'll be present as usual in the comment section !
- The platform sharing the starter and it's modules : Fast Modular Project
- Stripe module open source code here.
Do not hesitate to pin and like if you appreciated the article ❤️