Stripe Integration to NestJs and React App
I recently build a NestJs and react application by integrating the Stripe payment gateway which can collect payments from users in e-commerce applications. Here I have built a basic react application with some items and a cart. Also, the stripe frontend elements have been integrated into the front end in order to make a purchase with a card. Apart from that, I have built a NestJs backend to process the stripe payments that will be done by the frontend.
What is Stripe
Stripe is an online payment processing system for transactions that will be done through the internet using cards, mobile wallets, and many more methods. Stripe has given an API that can easily be integrated with our online e-commerce web applications
Process of Integrating
This diagram shows the complete process to integrate stripe API to the front-end as well as back-end
Payment Process
This diagram shows the payment process step by step happens in this application.
Important Points
- All the payments that were created through this application will be shown on the payments tab in the stripe dashboard.
- Real transactions won’t happen until you activate the account and when using test API keys. we can use 4242 4242 4242 4242 card number as a dummy card number for testing purposes.
- We can customize the outlook of our payment gateway by using different kinds of React stripe elements. plz look stripe react doc for more info
- Don’t use API keys as raw strings in the application. Instead of that put them into an env file and use the env variables.
- Here I have built only card payments, but we can configure that for various other payment methods.
- we can extend this application to charge recurring payments from customers like installments, monthly payments, monthly subscriptions, etc.
Source Code
You can find and use the source code here
Front-End
https://github.com/jayamaljayamaha/stripe-integration-front-end
Back-End
https://github.com/jayamaljayamaha/stripe-integration-back-end
Demo
You can see a demo of the application here
