Blog Articles

Stripe Payment Gateway Integration with ReactJS and NodeJS

Introduction
Understanding Stripe
Setting Up Your Stripe Account
Obtaining API Keys
Stripe payment gateway integration in ReactJS and NodeJS
Prerequisites:
Choosing Node.js or Next.js:
Conclusion:

Introduction

In the world of e-commerce and online transactions, having a seamless and secure payment gateway is essential. Stripe, a popular payment processing platform, provides developers with the tools they need to integrate payment functionalities into their web applications. In this guide, we will walk you through the process of integrating the Stripe payment gateway into a React and Node.js application. We will cover everything need for stripe payment gateway integration, from setting up a Stripe account to writing the code for payment processing.

Understanding Stripe

Stripe is a powerful payment gateway that enables businesses to accept various payment methods, including credit and debit cards, digital wallets, and direct bank transfers with Node.js requirement. It offers a range of features such as subscription billing, one-time payments, and customizable checkout experiences.

Setting Up Your Stripe Account

Sign Up: Visit the Stripe website (https://stripe.com/) and sign up for an account. Provide the necessary information, including your business details and banking information.
Dashboard Overview: Explore the Stripe dashboard, which serves as your control center for managing payments, customers, and transactions

Obtaining API Keys

To interact with the Stripe API, you need to obtain your API keys. API keys are unique identifiers that authenticate your requests to the Stripe servers. In the Dashboard, navigate to the API section to find your publishable and secret API keys. The publishable key is used on the client-side, while the secret key should only be used on the server-side to ensure the security of your transactions.

To get your secret and access keys click the Developers button.
Go to API Keys present in the left menu to get the API Keys.
Save your Publishable and Secret keys for future use.

Stripe payment gateway integration in ReactJS and NodeJS

Prerequisites:

Before we dive into the integration process, make sure you have the following prerequisites in place:

– Node.js and npm installed on your system

– Basic knowledge of React and Node.js

– A Stripe account

Step 1: Setting up the Project

1. Install required dependencies in both the React and Node.js projects.

In the React project directory:

npm install react-stripe-elements

In the Node.js project directory:

npm install express stripe

Step 2: Backend Setup

Create a .env in the root directory of the server folder and add your Secret key as :
STRIPE_SECRET_KEY = your secret key from stripe account

Set up your stripe instance in the index.js file.

/*Importing Required Modules*/

const express = require(‘express’);

const bodyParser = require(‘body-parser’);

/* Initializes the Express application.*/

const app = express();

const stripe = require(‘stripe’)(process.env.STRIPE_SECRET_KEY);

/*Configures the app to use the `body-parser` middleware to parse JSON request bodies.*/

app.use(bodyParser.json());

/* Handling the Payment Intent:

Defines a route that listens for POST requests at the create-payment-intent endpoint.

It uses an asynchronous function to handle incoming requests.*/

app.post(‘/create-payment-intent’, async (req, res) => {

/*it creates a payment intent using the Stripe library.*/

const paymentIntent = await stripe.paymentIntents.create({

amount: req.body.amount,

currency: ‘usd’,

});

res.json({ clientSecret: paymentIntent.client_secret });

});

/*Starts the Express server and listens on port 3001. When the server starts, it logs a message indicating that it‘s running on that port.*/

app.listen(3001, () => {

console.log(‘Server is running on port 3001’);

});

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

						/*Importing Required Modules*/
 
const express = require(‘express’);
 
const bodyParser = require(‘body-parser’);
 
/* Initializes the Express application.*/
 
const app = express();
 
const stripe = require(‘stripe’)(process.env.STRIPE_SECRET_KEY);
 
/*Configures the app to use the `body-parser` middleware to parse JSON request bodies.*/
 
app.use(bodyParser.json());
 
/* Handling the Payment Intent:
 
Defines a route that listens for POST requests at the create-payment-intent endpoint.
 
It uses an asynchronous function to handle incoming requests.*/
 
app.post(‘/create-payment-intent’, async (req, res) => {
 
/*it creates a payment intent using the Stripe library.*/
 
const paymentIntent = await stripe.paymentIntents.create({
 
amount: req.body.amount,
 
currency: ‘usd’,
 
});
 
res.json({ clientSecret: paymentIntent.client_secret });
 
});
 
/*Starts the Express server and listens on port 3001. When the server starts, it logs a message indicating that it‘s running on that port.*/
 
app.listen(3001, () => {
 
console.log(‘Server is running on port 3001’);
 
});

					

			

Step 3: Frontend Implementation

In your React application, create a component for the payment form.

This component creates a form that allows users to input credit card information using the CardElement from Stripe Elements. Upon submission, it uses Stripe’s API to process the payment, displaying any errors and indicating payment success or failure. Remember to provide the clientSecret obtained from the server to the stripe.confirmCardPayment method.

import { CardElement, useStripe, useElements } from ‘@stripe/react-stripe-js’;

const PaymentForm = () => {

 /*Initializes the `stripe` object by using the useStripe hook, allowing access to Stripe methods and properties.*/

 const stripe = useStripe();

  /*Initializes the elements object by using the useElements hook, which provides access to Stripe Elements for building the user interface.*/

const elements = useElements();

const [paymentError, setPaymentError] = useState(null);

const [paymentSuccess, setPaymentSuccess] = useState(false);

const handleSubmit = async (event) => {

event.preventDefault();
 /* Calls the `stripe.confirmCardPayment` method 

 with the `clientSecret` (received from the server) 

and the payment method details (in this case, the `CardElement` from Stripe Elements).*/
 const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
payment_method: { card: elements.getElement(CardElement) },
});

if (error)  setPaymentError(error.message);

else  setPaymentSuccess(true);

};

return (

<form onSubmit={handleSubmit}>

<CardElement />

<button type=“submit”>Pay Now</button>
</form>

);

};

export default PaymentForm;

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

						import { CardElement, useStripe, useElements } from ‘@stripe/react-stripe-js’;
 
const PaymentForm = () => {
 
 /*Initializes the `stripe` object by using the useStripe hook, allowing access to Stripe methods and properties.*/
 
 const stripe = useStripe();
 
  /*Initializes the elements object by using the useElements hook, which provides access to Stripe Elements for building the user interface.*/
 
const elements = useElements();
 
const [paymentError, setPaymentError] = useState(null);
 
const [paymentSuccess, setPaymentSuccess] = useState(false);
 
const handleSubmit = async (event) => {
 
event.preventDefault();
 /* Calls the `stripe.confirmCardPayment` method 
 
 with the `clientSecret` (received from the server) 
 
and the payment method details (in this case, the `CardElement` from Stripe Elements).*/
 const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
payment_method: { card: elements.getElement(CardElement) },
});
 
if (error)  setPaymentError(error.message);
 
else  setPaymentSuccess(true);
 
};
 
return (
 
<form onSubmit={handleSubmit}>
 
<CardElement />
 
<button type=“submit”>Pay Now</button>
</form>
 
);
 
};
 
export default PaymentForm;

					

			

In your main React component, import and use the PaymentForm component.

import React from ‘react’;

import { loadStripe } from ‘@stripe/stripe-js’;

import { Elements } from ‘@stripe/react-stripe-js’;

import PaymentForm from ‘./PaymentForm’;

const stripePromise = loadStripe(‘YOUR_STRIPE_PUBLIC_KEY’);

const App = () => {

return (

<Elements stripe={stripePromise}>

<PaymentForm />

</Elements>

);

};

   export default App;

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

						import React from ‘react’;
 
import { loadStripe } from ‘@stripe/stripe-js’;
 
import { Elements } from ‘@stripe/react-stripe-js’;
 
import PaymentForm from ‘./PaymentForm’;
 
const stripePromise = loadStripe(‘YOUR_STRIPE_PUBLIC_KEY’);
 
const App = () => {
 
return (
 
<Elements stripe={stripePromise}>
 
<PaymentForm />
 
</Elements>
 
);
 
};
 
   export default App;

					

			

Choosing Node.js or Next.js:

Node.js offers asynchronous, non-blocking I/O, making it efficient for handling multiple connections simultaneously, and its JavaScript-centric approach allows for seamless server-side and client-side development with a vast npm ecosystem for easy integration. On the other hand, Next.js, built on React, provides a streamlined development experience with features like server-side rendering (SSR) and static site generation (SSG) for enhanced performance and SEO optimization. Automatic code splitting and hot module replacement contribute to a more efficient development workflow. Choosing between Node.js and Next.js depends on specific project needs as well as Node.js requirement, with Node.js providing a versatile runtime environment, while Next.js is advantageous for React applications requiring advanced features and optimal performance.

Conclusion:

Stripe payment gateway integration into your React and Node.js application empowers you to securely process online payments, making it a valuable addition to your financial software development services. Leveraging the capabilities of Node.js requirement is essential for seamless integration and efficient handling of payment transactions within your application. By following the steps outlined in this guide, you have learned how to set up the backend, create a payment form, and handle payment processing using Stripe. This powerful integration enhances your web application’s capability to manage real-world financial transactions with ease and confidence. With a seamless payment experience, you can now focus on delivering exceptional value to your users while ensuring their payment information remains secure. Happy coding!

Remember to replace YOUR_STRIPE_SECRET_KEY and YOUR_STRIPE_PUBLIC_KEY with your actual Stripe API keys.

Get a Fast Estimate on Your Software Development Project

We are committed to delivering high-quality IT solutions tailored to meet the unique needs of our clients. As part of our commitment to transparency and excellence, we provide detailed project estimations to help our clients understand the scope, timeline, and budget associated with their IT initiatives.

Solutions

For Agency

For Enterprise

For Operations

For Business

For VCs

Industries

Travel

Healthcare

Energy

Retail & E-commerce

Education

Manufacturing

Gaming

Case Studies

How Innostax Helped Nuwardrobe

Navigating the Globe: A Journey through Travelstart's Travel Services

Banking Innovation and Transformation with Innostax

Core Offerings

Web Development

eCommerce

Mobile Apps

Offshore Development

Product Development

Software Testing

Staff Augmentation

Dedicated Team

DevOps

Managed IT

IT Consulting

IT Outsourcing

Resource as a Service

Staff Augmentation

Digital Transformation

Digital Transformation

System Modernization

Cross Platform

React Native

Flutter

Xamarin

Ionic

Electron Development

React Native Desktop

Backend

Python

.NET

PHP

Java

NodeJS

GoLang

.NET Core

Frontend

ReactJs

VueJs

iOS Development

Android Development

AngularJS

Framework

Laravel

Symfony

Django

MEAN Development

MERN

Spring Boot

Database

Mongo DB

MySQL

Postgre SQL

SQL Server

Firebase

Our Process

Excellent Software, Decoded

Our Story

Building a Better Tomorrow

Links

Career Opportunities

Blogs

Case Studies

Contact

Pricing