Custom Checkout - Razorpay.js

The razorpay.js JavaScript library lets you build a custom checkout interface for collecting payment information securely from your customers on your site. Building a checkout interface is your next step after integrating Razorpay Orders to get an entire payment ecosystem up and running.

Razorpay Checkout is a beautifully designed and well-tested user interface for collecting payment information from customers. However, for a custom checkout form, you can utilize razorpay.js for the creation and authorization parts of the payment flow.

Note:
A customer's payment information should never reach your servers, unless you are PCI DSS certified.

Usage Guide#

Include the following script, preferably in <head> section of your document:

Copy<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>

Including the Library:
Including the script from https://checkout.razorpay.com/v1/razorpay.js instead of serving a copy from your own server, allows new updates and bug fixes to the library to get automatically served to your application. We always maintain backward compatiblity.

After this, you can instantiate Razorpay through:

Copyvar razorpay = new Razorpay({ key: '<YOUR_KEY_ID>', // logo, we'll display it in payment processing popup image: 'https://i.imgur.com/n5tjHFD.png', });

If you need multiple razorpay instances on same page, you can globally set some of the options:

CopyRazorpay.configure({ key: '<YOUR_KEY_ID>', // logo, we'll display it in payment processing popup image: 'https://i.imgur.com/n5tjHFD.png', }) new Razorpay({}); // will inherit key and image from above.

Fetch Payment Methods#

You can accept payment through UPI, Credit/Debit cards, Netbanking and Wallets, depending on the methods that have been enabled for your account. When you use checkout.js, you do not need to handle the availability of different payment methods. However, when you are creating a custom checkout form, you would want to ensure that only the methods that are activated for your account are displayed to the customer.

This is also needed to get the list of banks for netbanking. To get the available payment methods:

Copyvar razorpay = new Razorpay(...); // as before razorpay.once('ready', function(response) { console.log(response.methods); // response.methods.netbanking contains list of all banks })

Response for ready event is of format:

Copy{ "card": true, // Boolean "netbanking": { // map of bank codes vs. display names "SBIN": "State Bank of India" "UTIB": "Axis Bank" // ... }, "wallet": { "mobikwik": true }, "emi": true }

Note:
The methods object may contain additional parameters like wallets, if enabled for your account.

Submitt Payment Details#

After an order is created and the customer's payment information is obtained, this information should be sent to Razorpay to complete the payment. The data that needs to be submitted depends upon the payment method selected by the customer.

You can do this by invoking createPayment method:

Copyvar data = { amount: 1000, // in paise, 1000 equals ₹10 email: 'gaurav.kumar@example.com', contact: '9123456780', notes: { custom_field: 'Name on the card' }, order_id: 'order_9A33XWu170gUtm', method: 'netbanking', // method specific fields bank: 'HDFC' }; $btn.on('click', function(){ // has to be placed within user initated context, such as click in order for popup to open. razorpay.createPayment(data); razorpay.on('payment.success', function(resp) { alert(resp.razorpay_payment_id), alert(resp.razorpay_order_id), alert(resp.razorpay_signature)}); // will pass payment ID, order ID, and Razorpay signature to success handler. razorpay.on('payment.error', function(resp){alert(resp.error.description)}); // will pass error object to error handler })

Note:
The createPayment method should be called within an event listener triggered by user action to prevent the popup from being blocked. For example:
js $('button').click( function (){ razorpay.createPayment(...) })

Success and Error Callbacks#

When submitting user details, you can create JavaScript callbacks that will be triggered for every payment successes and errors.

The success callback receives a plain JavaScript object containing the keys; razorpay_payment_id, razorpay_order_id, razorpay_signature. The razorpay_signature must be verified for a payment to be considered successful. Learn how to verify the Razorpay signature.

Copy{ "razorpay_payment_id": "pay_8qDI3ZfhYGuh6v", "razorpay_order_id": "order_9A33XWu170gUtm", "razorpay_signature": "9ef4dffbfd84f1318f6739a3ce19f9d85851857ae648f114332d8401e0949a3d" }

whereas error callback receives an object of following format:

Copy{ "error": { "field": "email", "description": "incorrect email address" } }

The field inside the error object represents the errored field, for example, card[expiry_month], or email that is returned when the user input in invalid.

Copyvar error = function(response){ var error_obj = response.error; console.log(error_obj.description); if(error_obj.field) $('input[name=' + error_obj.field+']').addClass('invalid'); }

Razorpay Orders allows you to enable auto capture the payments using the payment_capture option. When the value is set to 1, Razorpay captures payments on your behalf once the creation and authorization parts of the payment flow have been completed. If you wish to capture payment manually, you will need to send payment_capture=0 while creating orders, and then use the payment capture API.

Redirection Mode#

You can also provide a callback_url for redirection-based flow. When popup creation fails for some reason, we will redirect the browser to external page (bank/3dsecure page) for customers to fill in OTP/PIN. At the end of the payment, we will return the control back to the callback_url previously created by you on which the payment results will be POSTed.

Copyvar razorpay = new Razorpay({ key: '<YOUR_KEY>', callback_url: 'https://your-site.com/callback-url' }) razorpay.createPayment(data) .on('payment.success', success_callback) .on('payment.error', error_callback)

callback_url will receive POST variables named either razorpay_payment_id, razorpay_order_id and razorpay_signature or error[] as described below:

Success Response#

razorpay_payment_id, razorpay_order_id, razorpay_signature are sent as the request body of the POST operation on the callback_url.

Error Response#

An array named error is sent as a request parameter in the POST operation on the callback_url, which consists of the following fields:

description
Short description of the error that is printable or can be shown to the users.
code
Error code
field
Sent only in case of a field-validation error, for example, if an email address is incorrect.
Copy{ "error": { "code": "GATEWAY_ERROR", "description": "The gateway request timed out", "field": null } }

Always Redirect#

Passing in callback_url allows Razorpay to use redirection only when required. However, you can also enable force redirection for every payment using another redirect option:

Copyvar razorpay = new Razorpay({ key: '<YOUR_KEY>', callback_url: 'https://your-site.com/callback-url', redirect: true })

This mode is useful if you are accepting payments in embedded Webview based apps or when your site already has a popup-based payment page, and you don't want another to be opened.

You can view the same web application in a mobile app, as a Webview, as the same browser web pages are accessed and displayed rather than developing the user interface natively in the app and integrating the functionalities using SDK. If you are interested in developing more robust mobile apps for payment processing, read about our mobile SDK integrations