Hi,
In this blog I am going to demonstrate how to integrate RazorPay payment gateway in your web application(s).
The below section details the pre-requisites required to run the web application.
From the prerequisite section please download the softwares and have it installed in your system, I am not going to discuss the installation procedures of the same because we have plenty of online resources to have it done.
The image below gives the signup/login page of RazorPay site
Use the link below to get to it...
After successful registration you can access your account by signing into the site and you got to look for two important informations
1. Merchant ID
2. RazorPay API Key
The image below would help you to fetch the merchant id from MyAccount page of your account.
This image below would help you to fetch the RazorPay API key from the setting page of the account
Below is the location of the project, use git utility to clone
To download the same as ZIP package, use the following link
You have to update the property file of the application with the details of your RazorPay account, the following properties are residing in the property file named razorpay-dev.properties
Open the property file in your favourite text editor and update the following keys accordingly from the RazorPay account
1. merchant.id
2. razorpay.key.id
3. razorpay.key.secret
Move to the root directory where you have cloned or unzipped the downloaded package to test the application using the following commands.
If this is your first install of Maven, then it would take some time to have the application up and running, b'coz maven has to download all the required libraries from maven central repository, once the required libraries are installed in your machine/computer you would have some thing as depicted in the image below
Initially when the system is up, you would have one user account already registered in the system by default who is nothing but the admin user.... you can use the admin user credentials to login and browse the application
Open any browser of your choice and hit the location given location in address bar...
The login page would appear similar to the image given below, key in the credentials to sign in.
In case if you do not like to use the admin user account, you can have one for you through the registration process, well it will not have any complication as we do have in production ready site.... as soon as you are registered in the system the system will take you back to the login page to browse the application.
The page given below is the product listing page you can select any of the products you like...
In order to select the product, you can click on the item itself as like one shown in the image down below
There is another way to select the product, when you mouse over on a product you would have a slider which would help you to have the product specifications along with adding the particular product to the cart.
The order(s) yet to be made would be listed in order listing page, either you can select the option to pay the order or to delete the order, the image given below would detail the details of order listing page of the system.
The image below gives the picture of details of an order along with the payment option and also with the amount to be paid...
In order to make the payment, click on the button "Pay with RazorPay" button which you could see on the right panel, once you click the payment gateway interface would appear as that of the one shown below image. you must key in the phone number to enable the options in the interface.
Option to pay with Credit Card
Option to pay with NetBanking
Option to pay with UPI
Well I have tried my best to demonstrate the payment gateway integration with RazorPay in a web app and I hope this demo app would be a good starting point for those who wants to have RazorPay Payment Gateway Integration in their web application
Write in you comments about this blog in the comment section to make this demo application even better.
Well that is it, hope you had great time reading.
In this blog I am going to demonstrate how to integrate RazorPay payment gateway in your web application(s).
The below section details the pre-requisites required to run the web application.
| Prerequisites | |||
|---|---|---|---|
| Name | Version | Download Page | Direct Link |
| Java | 1.7.0_79 | N/A | N/A |
| Apache Maven | 3.6.0 | N/A | N/A |
| GIT | 2.7.4 | N/A | N/A |
From the prerequisite section please download the softwares and have it installed in your system, I am not going to discuss the installation procedures of the same because we have plenty of online resources to have it done.
1. Creating your RazorPay Account
Before you have the web application up and running you should have valid RazorPay account to access the payment gatewary service.... if you have one already you can use it or you can sign up in RazorPay website to have oneThe image below gives the signup/login page of RazorPay site
Use the link below to get to it...
After successful registration you can access your account by signing into the site and you got to look for two important informations
1. Merchant ID
2. RazorPay API Key
The image below would help you to fetch the merchant id from MyAccount page of your account.
This image below would help you to fetch the RazorPay API key from the setting page of the account
2. How to work with the application?
Below is the location of the project, use git utility to clone
> git clone https://github.com/ravaneswaran/razorpay-web-integration-demo.git
To download the same as ZIP package, use the following link
You have to update the property file of the application with the details of your RazorPay account, the following properties are residing in the property file named razorpay-dev.properties
Open the property file in your favourite text editor and update the following keys accordingly from the RazorPay account
1. merchant.id
2. razorpay.key.id
3. razorpay.key.secret
Move to the root directory where you have cloned or unzipped the downloaded package to test the application using the following commands.
> mvn clean compile package
> mvn jetty:run
If this is your first install of Maven, then it would take some time to have the application up and running, b'coz maven has to download all the required libraries from maven central repository, once the required libraries are installed in your machine/computer you would have some thing as depicted in the image below
Initially when the system is up, you would have one user account already registered in the system by default who is nothing but the admin user.... you can use the admin user credentials to login and browse the application
| Admin User Credentials | |||
|---|---|---|---|
| Username | admin@demo.com | ||
| Password | admin | ||
Open any browser of your choice and hit the location given location in address bar...
The login page would appear similar to the image given below, key in the credentials to sign in.
In case if you do not like to use the admin user account, you can have one for you through the registration process, well it will not have any complication as we do have in production ready site.... as soon as you are registered in the system the system will take you back to the login page to browse the application.
The page given below is the product listing page you can select any of the products you like...
In order to select the product, you can click on the item itself as like one shown in the image down below
There is another way to select the product, when you mouse over on a product you would have a slider which would help you to have the product specifications along with adding the particular product to the cart.
The order(s) yet to be made would be listed in order listing page, either you can select the option to pay the order or to delete the order, the image given below would detail the details of order listing page of the system.
The image below gives the picture of details of an order along with the payment option and also with the amount to be paid...
In order to make the payment, click on the button "Pay with RazorPay" button which you could see on the right panel, once you click the payment gateway interface would appear as that of the one shown below image. you must key in the phone number to enable the options in the interface.
Option to pay with Credit Card
Option to pay with NetBanking
Option to pay with UPI
Well I have tried my best to demonstrate the payment gateway integration with RazorPay in a web app and I hope this demo app would be a good starting point for those who wants to have RazorPay Payment Gateway Integration in their web application
Write in you comments about this blog in the comment section to make this demo application even better.
Well that is it, hope you had great time reading.
No comments:
Post a Comment