Home - Scripts - Website Development
- 13 May 2025
Phonepe Integration in Node And React
Introduction
PhonePe is one of the primary digital payment platforms in India, which is widely used for making seamless transactions on eCommerce platforms, mobile application development, and web project development. When integrated into a Node.js and React-based application, PhonePe ensures secure and efficient payment options for the users.
This guide illustrates step-by-step approaches to integrate PhonePe into your application built on Node.js and React.js. This integration shall assist you in fast-tracking the transaction process whether you are working on eCommerce, a service-based platform, or a mobile application development project.
Why Integrate PhonePe in Your Application?
-
Secure Transactions: PhonePe uses encryption levels and security standards such as those adopted by the industry.
-
Fast Processing: The processing of transactions takes place in real-time with very little delay.
-
Wide Acceptance: PhonePe is used to pay by more than 400 million users across India.
-
Multi-Platform: The PhonePe integration works perfectly on web and mobile applications.
-
Seamless User Experience: Less friction at the checkout improves conversions.
Prerequisites
Before integrating PhonePe, ensure you have:
-
A PhonePe Business account.
-
Access to the PhonePe Developer Portal.
-
A merchant ID and salt key (provided by PhonePe).
-
A Node.js environment (Node.js v14+ recommended).
-
A React.js application for frontend integration.
-
Basic knowledge of REST APIs and Express.js for backend setup
Setting Up Your Node.js Backend for PhonePe Integration
Step 1: Initialize a Node.js Project
Run the following commands in your terminal to create a new project:
mkdir phonepe-integration && cd phonepe-integration
npm init -y
Step 2: Install Required Dependencies
npm init -y
npm install express axios crypto dotenv uuid
Step 3: Create Environment Variables
Create a .env file to store sensitive data.
API Endpoints for Payment Processing
Initialize Payment
- Endpoint: POST /initialize-payment
- Description: Initiates a PhonePe payment and returns a redirect URL to complete the transaction.
Request Body:
Response
- Redirect the user to the redirectUrl to complete payment
Verify Payment Status
- Endpoint: POST /verify-status?transactionId=YOUR_TRANSACTION_ID
- Description: Verifies the transaction status and redirects accordingly.
Request Parameters:
- transactionId - Unique identifier for the transaction
Response:
- If success, redirects to: http://localhost:5173/success
- If failed, redirects to: http://localhost:5173/failed
Code Implementation
Create server.js and add the following code:
Deployment Considerations
Use HTTPS – Secure communication for payment processing
Store API keys securely – Use .env
Change Urls– Change sandbox phonepe url and frontend url with live url
Ensure that it's Mobile & Web Compatible- Tested across multiple devices and browsers.
Final Words
Integrating PhonePe into your Node.js and React.js application guarantees a secure, seamless, and user-friendly payment experience. This integration shall benefit developers involved in mobile app development, web development, and payment app development, enabling them to manage transactions efficiently through PhonePe.
+91-8727000867
+64 22 003 5555



Request Instant Call
Hire Remotely