How to add Stripe payment gateway to your MERN project?

Greetings everyone. I am Thushal Kulatilake. In this article I am going to show you how to implement “Stripe” payment gateway in your MERN stack project. So, let’s get started.

Stripe Payment Gateway

First, let us see what Stripe is. Stripe Payments is a payment processing platform which allows you to transfer money from a customer’s bank account into your business’s account by way of a credit card or debit card transactions. It also allows you to go through the checkout procedure without navigating into a separate page. Stripe offers a test mode which can be used by developers for testing purposes. So here I am going to use that.

First let’s create an account in Stripe.

Navigate to this link and sign up. After that you’ll be getting below dashboard.

Stripe Dashboard

Now click on the Developers link in the side-nav. Then click on the API keys link and there you can see a publishable key and a secret key. The publishable key goes to the front-end part and the secret key goes to the back-end part.

That's all from the Stripe side.

Now let’s create the backend part which is the NodeJS part first.

Here I will use the VS Code as my text editor. First you must install NodeJS. Goto this link, download, and install NodeJS. After that open VS Code and open an empty folder to save the project. Then navigate into that folder and run npm init to initialize a Node project. After that you’ll be able to see a file called package.json which indicates that you have successfully initialized a Node project. Then you have to install below npm packages.

1. npm install — save express (This installs express framework which is used by NodeJS that provides some comprehensive features to develop web and mobile applications).
2. npm install — save cors (This installs the CORS package which handles the Cross-Orgin Resource Sharing — CORS which affects when sharing data among two APIs which is from Frontend (localhost:3000) to Backend (localhost:5000)).
3. npm install — save uuid (This installs the uuid package which geneates a unique id to uniquely identify things. In this project we will use this to uniquely identify each payment procedure).
4. npm install — save stripe (This installs the Stripe package for NodeJS).
5. npm install — save nodemon (This installs nodemon package which helps the developers by auto-restarting the server when the developer saves the changes they made in the project. Especially useful.)

Ok. So now we have successfully configured a Node project with needed packages installed. So now let’s get into the coding part.

First, we need to create a NodeJS server to run the NodeJS project. So, create a server.js file inside your project and type below coding.

server.js

Then create a folder called routes which contains different routes/middleware. Inside that folder create a file called stripe-route.js (you can use any name you want). Add below coding.

Copy the secret key from Stripe and paste it at the end of line 3 within (“…”).

stripe-routes.js

Now update the server.js file as below

server.js

That’s all from the back-end side.

Now let’s see the Frontend side which is the React part

Open another VS Code window and run npx create-react-app stripe-app to create a react app. After that install below packages.

1. npm install axios (This is the http library used by React to send http requests).
2. npm install react-stripe-checkout (This installs the stripe package for react.)

Inside app.js file insert below coding.

App.js

Copy the publishable key from Stripe dashboard and paste it in stripeKey property.

Ans that’s it. Now run both the front-end and back-end and you will obtain below interface when you click the Pay with Card button provided by Stripe itself.

Stripe Interface

For the card number, enter 4242 4242 4242 4242 which is given by Stripe for testing.

That’s all and I hope you gained knowledge on how to implement Stripe for your MERN project. Thank You!.