Page Updated:
This page has been updated and moved to a new location documentation.


title: Custom Checkout desc: Learn how to implement Razorpay Custom Checkout on your site. index: true

With Custom Checkout, you can build a Checkout form to suit your unique business needs and branding guidelines.

Custom Checkout's JavaScript library lets you customize the checkout interface on a granular level. For example, you can white-label the checkout to:

  • Display only select payment methods.
  • Integrate external wallets such as Paytm.
  • Modify the look and feel of checkout.

Prerequisites#

Before integrating with the Checkout, run through this checklist:

  1. Understand the payment flow.
  2. Decide the integration method to follow.
  3. Generate the API keys from the Dashboard.
  4. Implement Orders API in the backend.

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

Steps to integrate Custom Checkout in your site:

Include JavaScript#

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

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

Including the Javascript, not the Library:
Include the script from https://checkout.razorpay.com/v1/razorpay.js instead of serving a copy from your own server. This allows new updates and bug fixes to the library to get automatically served to your application.

We always maintain backward compatibility with our code.

Instantiate Razorpay Custom Checkout#

Single Instance on a Page#

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

Multiple Instances on Same Page#

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

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

Fetch Payment Methods#

By default, Razorpay allows you to accept payments through a host of methods - netbanking, debit and credit cards, wallets, UPI and more. However, to enable methods such as Cardless EMI, Google Pay and Amazon Pay, please contact Razorpay Support.

When you use Standard Checkout, 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.

Fetch the available payment methods as shown below:

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.

Submit Payment Details#

Once the order is created and the customer's payment details are obtained, the 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 currency subunits. Here 1000 = 1000 paise, which equals to ₹10 currency: "INR"// Default is INR. We support more than 90 currencies. email: 'gaurav.kumar@example.com', contact: '9123456780', notes: { address: 'Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru', }, order_id: 'order_9A33XWu170gUtm', method: 'netbanking', // method specific fields bank: 'HDFC' }; $btn.on('click', function(){ // has to be placed within user initiated 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 success and error.

The success callback receives a plain JavaScript object containing the keys; razorpay_payment_id, razorpay_order_id and 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" } }

Here, field attribute displays the actual field of error. For example, card [expiry_month] or email that is returned when the user input is 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'); }

Enable Auto Capture: Using our Orders API, you can automatically capture the payments using the payment_capture option. When the value is set to 1, Razorpay automatically captures payments in the authorized state. If you wish to capture payment manually, you must send payment_capture=0 while creating orders, and then use the Payment Capture API.

Enable Redirection#

Passing the 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_ID>', callback_url: 'https://your-site.com/callback-url', redirect: true })

This mode is useful if you are accepting payments in an embedded Webview-based app 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. This is because the same browser web pages are accessed and displayed rather than developing the user interface natively in the app and integrating the functionalities using an SDK. If you are interested in developing more robust mobile apps for payment processing, read about our mobile integrations for Android and iOS.