This project demonstrates a simple payment integration using the PayHere payment gateway. The application consists of a Node.js backend with Express and a React.js frontend. The integration is tested using the PayHere sandbox environment.
-
Clone the repository:
git clone https://github.com/madhurajayashanka/payhere-reactjs-expressjs.git cd payhere-reactjs-expressjs
-
Install dependencies for backend:
cd backend npm install
-
Install dependencies for frontend:
cd ../frontend npm install
-
Sign Up on PayHere Sandbox:
Visit the PayHere Sandbox and create an account.
-
Create a New Merchant:
- After signing in, navigate to the Merchant section.
- Create a new merchant account.
- Note down the Merchant ID and Merchant Secret provided.
-
Configure Notify URL:
- For payment notifications, you need a publicly accessible URL for your backend. Use a tool like ngrok to expose your localhost or deploy your backend on a public server (AWS/ Digital Ocean/ Azure).
- Set the Notify URL in your PayHere merchant settings to the publicly accessible endpoint (e.g.,
https://sea-lion-app-qfh5d.ondigitalocean.app/payment/notify
).
-
Backend Configuration:
Replace the
merchant_id
andmerchant_secret
in the backend code with the values obtained from PayHere Sandbox.-
Open
backend/routes/payment.js
and replace the placeholders:const merchant_id = "YOUR_MERCHANT_ID"; const merchant_secret = "YOUR_MERCHANT_SECRET";
-
-
Start the Backend Server:
cd backend npm start
The backend server will run on
http://localhost:5001
. If you deployed the NodeJs backend, use that link. -
Start the Frontend Development Server:
cd ../frontend npm start
The frontend development server will run on
http://localhost:3000
. -
Access the Application:
Open your browser and go to
http://localhost:3000
to access the payment integration page.
- Public IP Requirement: Remember, PayHere requires a public IP for the
notify_url
. Tools like ngrok can be used during development to expose your local backend. - Security: Ensure that sensitive information like the
merchant_secret
is handled securely, especially in production environments.