Integration Javascript Payment Gateway 

How to integrate Razorpay checkout using javascript

Razorpay has provided really cool and simple stuff to integrate, They have documentation and integration kit to almost all the major platforms like, in web -for all major CMS tools like WordPress, opencart, etc and web programming languages like javascript, nodejs, 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. Goto razorpay 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
    <pre><code><script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    
    
  5. create your pay button in HTML page as below
    <pre><code><button type="butoon" id="paymentclick">pay amount</button>
    
  6. create a button click event and razorpay js code in between as shown below.
    <pre><code>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": '[email protected]',// 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 Razorpay 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.

 

If you have any query please comment down below.

 

Arjun is is a web developer/designer, who is fond of the web. He lives in Manipal, Karnataka, India.

Also Read:  Integrating send in blue Transactional Email using PHP

Related posts