How to integrate Razorpay checkout using javascript

Razorpay has provided really cool and simple Payment Gateway to integrate, They have documentation and integration kit to almost all the major platforms like, in web -for all major CMS tools like WordPress, open cart, etc and web programming languages like javascript, node js, PHP, c#, etc and mobile platforms like Android and IOS. So nowadays Razorpay is becoming popular in India.

the implementation is simple and straightforward 

1. Go to the razorpay.com website and register your self after that immediately you will be enabled with the testing mode.
2. Then find Test APIs creation link and create one test API for your app.
3. Then in your application based on your need, start implementing as below.
4. first, include below Razorpay script link in page

   <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
   
   
5. create your pay button in the HTML page as below

   <button type="butoon" id="paymentclick">pay amount</button>
   
6. create a button click event and Razorpay js code in between as shown below.

   var options = {
   	"key": "rzp_test_KEY",
   	"amount": 2000, // Example: 2000 paise = INR 20
   	"name": "MERCHANT name",
   	"description": "description",
   	"image": "img/logo.png",// COMPANY LOGO
   	"handler": function (response) {
   		console.log(response);
   		// AFTER TRANSACTION IS COMPLETE YOU WILL GET THE RESPONSE HERE.
   	},
   	"prefill": {
   		"name": "ABC", // pass customer name
   		"email": 'A@A.COM',// customer email
   		"contact": '+919123456780' //customer phone no.
   	},
   	"notes": {
   		"address": "address" //customer address 
   	},
   	"theme": {
   		"color": "#15b8f3" // screen color
   	}
   };
   console.log(options);
   var propay = new Razorpay(options);
   propay.open();
   
   

to go live just complete the KYC and get the live dashboard access. Next same as test mode process again create an API for Live use and replace just the key in the code.

For additional fields checkout hosted docs

If you have any query please comment down below.

Arjun JS

Arjun is a Full-stack developer, who is fond of the web. Lives in Chikmagalur, Karnataka, India