Add a subscription payment system with Stripe in less than 20 min

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.

What does it bring?

• subscription creation
• subscription cancelation
• subscription re-activation before d-day cancelation
• last but not least, almost 14 hours of work saved :D

Prerequisite

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 :)

• The starter is available here.
• The module is available here.

How does it work?

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:

1. User clicks on your "buy button".
2. Frontend asks backend to create a Stripe checkout session
3. Backend creates the checkout session and returns the corresponding sessionId to the frontend.
4. Frontend redirects the user to the created session using the sessionId.
5. User pays on Stripe website and get redirect to your website (thanks to the successUrl you'll provide) once the payment is successfully done.
6. Backend is receiving notifications about the payment status thanks to a Webhook and save the payment status in database.

Setup the payment system

1. Create a Stripe account
2. 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 :)
3. 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 priceId corresponding to the product, as usual keep it safe because we'll use it later :)
4. Create a Webhook between Stripe and your backend in "Developers" section, this will give you a secret whsec_that should be kept safe.
5. Add following event types to your Webhook: [customer.subscription.updated, customer.subscription.deleted, invoice.payment_failed, invoice.paid, checkout.session.completed]
6. Fill environment files with all info kept above as explained here.
7. 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-4242 and fill other fields with whatever you want.
8. 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.

Conclusion

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 !

Links:

• 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 ❤️