API ReferenceIntegrationsKnowledge Base

Standard Checkout Integration

The Checkout form enables you to accept online payments from your customers. By integrating your client-side application with our Checkout, you can leverage the rich feature set such as different payment methods, customization options for enhanced look-and-feel, securing the customers' sensitive card details, thus making the consumer experience with the Checkout, a breeze!

Our checkout.js library provides all the essential features for integrating Razorpay Checkout with the client-side of your application. This is available only for web-based integrations.


Before integrating with the Checkout, run through this checklist:

  1. Understand the payment flow process.
  2. Decide the integration method to follow.
  3. Generate the API keys from the Dashboard.
  4. Add the view port meta tag in the the tag, if not added. <meta name="viewport" content="width=device-width">
  5. Implement Orders API in your backend. This creates an order_id which you can pass to checkout.

Integration Methods#

Checkout.js can be integrated in two different ways:

  • Automatic Checkout
  • Manual Checkout

Decide the Integration Method#

Automatic or the standard checkout is the default method available for integration and is easy to integrate into your own product. However, when you have multiple products, or a complex way to pre-calculate amount for a payment (in javascript), you can switch to the manual checkout method as it provides a greater control in the payment process.

Automatic Checkout#

The Automatic Checkout method provides a default Razorpay Pay with Razorpay button that invokes the Checkout form. The checkout form options are passed as data attributes inside a <script> tag. You can add any additional, hidden or visible fields to the form, which will be submitted along with the form.


The following sample code will pass the Razorpay Checkout options as HTML data attributes.
Please create an Order and replace the Order ID in the sample code below. Otherwise, the system will throw an error for invalid order number.

Copy<form action="https://www.example.com/payment/success/" method="POST"> <script src="https://checkout.razorpay.com/v1/checkout.js" data-key="YOUR_KEY_ID" // Enter the Key ID generated from the Dashboard data-amount="29935" // Amount is in currency subunits. Default currency is INR. Hence, 29935 refers to 29935 paise or INR 299.35. data-currency="INR" data-order_id="order_CgmcjRh9ti2lP7"//This is a sample Order ID. Create an Order using Orders API. (https://razorpay.com/docs/payment-gateway/orders/integration/#step-1-create-an-order) data-buttontext="Pay with Razorpay" data-name="Acme Corp" data-description="A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami" data-image="https://example.com/your_logo.jpg" data-prefill.name="Gaurav Kumar" data-prefill.email="gaurav.kumar@example.com" data-theme.color="#F37254" ></script> <input type="hidden" custom="Hidden Element" name="hidden"> </form>

When the checkout process is completed, the browser will add an additional field <name=id> to the form that contains the script tag. This form is then automatically submitted. Once the payment is successfully authorized, razorpay_payment_id is submitted along with the form to the action url.

The response body contains additional parameters, razorpay_order_id and razorpay_signature, if you have integrated with our Orders API.

Only successful authorizations are auto-submitted. In case of failed payments, checkout form is displayed again to facilitate retry of the payments.

Manual Checkout#

In Manual Checkout method, the Checkout form is invoked by the 'custom button' on your site and the form options are passed as variables in a key-value pair format within a <script> tag. Once the payment is successfully authorized, a handler function is called automatically. This function returns a response object containing razorpay_payment_id. This handler function must be called back to your server-side for capturing the payment.

To integrate manual checkout:

  1. Modify the attributes and the handler function to handle the response object. Use this table as reference.

  2. After the payment is done on the checkout form, the handler function will receive a payment object with the razorpay_payment_id attribute. This means the payment is authorized and you can capture it. You can capture the payment immediately after authorization. This has to be done manually via the Dashboard or via the API. Enable Auto Capture with Orders API:
    You can enable auto capture feature in your payments by implementing Orders API in your backend. This will save you the time and effort of individually and manually capturing payments.

  3. Send the razorpay_payment_id to your server-sided handler url with any other attributes as you may need to capture the transaction. If the capture response has no error_code set, that means the payment is successful. Check the amount and status attributes of the payment entity returned to validate. You may now process the order at your end.


The sample code given below will pass the form options for an amount of ₹299.35.

Please create an Order and replace the Order ID in the sample code below. Otherwise, the system will throw an error for invalid order number.

Copy<button id="rzp-button1">Pay</button> <script src="https://checkout.razorpay.com/v1/checkout.js"></script> <script> var options = {    "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard    "amount": "29935", // Amount is in currency subunits. Default currency is INR. Hence, 29935 refers to 29935 paise or INR 299.35.    "currency": "INR", "name": "Acme Corp",    "description": "A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami",    "image": "https://example.com/your_logo", "order_id": "order_9A33XWu170gUtm",//This is a sample Order ID. Create an Order using Orders API. (https://razorpay.com/docs/payment-gateway/orders/integration/#step-1-create-an-order). Refer the Checkout form table given below    "handler": function (response){        alert(response.razorpay_payment_id);    },    "prefill": {        "name": "Gaurav Kumar",        "email": "gaurav.kumar@example.com"    },    "notes": {        "address": "note value"    },    "theme": {        "color": "#F37254"    } }; var rzp1 = new Razorpay(options); document.getElementById('rzp-button1').onclick = function(e){    rzp1.open();    e.preventDefault(); } </script>

The open method of Razorpay object (rzp1.open()) must be invoked by your site's JavaScript, which may or may not be a user-driven action such as a click.

The appearance of the Pay Now with Razorpay or the custom button can be customized by writing css rules for the razorpay_payment_button.

Checkout form#

The Checkout fields used in both the Checkout methods are explained in the table below:

Field Name (Manual)

Field Name (Automatic)






Merchant Key-ID




Payment amount Accepted datatype is integer. For example, if the amount is ₹100,data-amount="10000".




The currency in which the payment should be made by the customer. See the list of supported currencies.

If you are using Razorpay Orders, the currency in which the payment is made must match the Order currency.




The merchant/company name shown in the Checkout form.




Description of the purchased item shown in the Checkout form. Must start with an alphanumeric character.




Link to an image (usually merchant's logo) shown in the Checkout form. Can also be a base64 string, if loading image from network is not desirable.




Order ID generated via Orders API




Cardholder name to be pre-filled when the Checkout opens.




Customer's email to be pre-filled when the Checkout opens.




Customer's phone number to be pre-filled when the Checkout opens.




Pre-selection of the payment method for the customer. It can be card/netbanking/wallet/emi/upi. However, it will only work if contact and email are also pre-filled.




Any additional fields you want to associate with the payment. For example, "shipping address". Up to 15 note fields can be specified in this way.




Used to display or hide the top bar on the checkout form. This bar shows the selected payment method, phone number and gives the customer the option to navigate back to the start of the checkout form. Possible values are true - Hides the top bar, and false - Displays the top bar.




Brand color to alter the appearance of Checkout form.




This field accepts a boolean value on whether to show an image inside a white frame. Defaults to true.




This field accepts a boolean value indicating whether clicking the translucent blank space outside Checkout form should close the form. Defaults to false.




This field accepts a boolean value indicating whether pressing escape key should close the Checkout form. Defaults to true.




When set as 'true', Checkout behaves similarly to the browser. That is, when the browser's back button is pressed, the Checkout also simulates a back press. This happens as long as the Checkout modal is open. By default, this is set to true.

Additional Features#

In addition to the default features available in the Checkout implementation, you can also perform the following actions:

  • Switch between Methods
  • Track the Modal

Switch between Methods#

It is possible to easily switch from one integration method to another, let's say, typically from Manual to Automatic method. This is possible as our checkout.js searches for the data-key field inside the <script> tag, which when found switches to automatic mode. It also creates a button alongside the <script> tag and attaches its 'onclick event handler' (created internally)to the .open method of the Razorpay object.

Track the Modal#

To track the status of the checkout modal, you can pass a modal object with ondismiss: function(){} as options. The ondismiss function is called when the modal is closed by the user.

This feature is only supported in manual checkout.

JavaScript code explains the usage of the ondismiss: function(){}:

Copyvar options = { "key": "<YOUR_KEY_ID>", // Enter the Key ID generated from the Dashboard "amount": "29935", "name": "Acme Corp", "description": "A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami", "image": "http://example.com/your_logo.png", "handler": function (response){ alert(response.razorpay_payment_id); }, /** * You can track the modal lifecycle by * adding the below code in your options */ "modal": { "ondismiss": function(){ console.log(‘Checkout form closed’); } } }; var rzp1 = new Razorpay(options);

You can utilize the handler function called on every successful transaction for tracking payment completion.

Supported Payment Methods#

The integration method is completely agnostic to the payment method being used in the client side of your application. This means that you do not have to change anything in your integration to support different payment methods that we provide or add. You only need to handle successful authorizations. For failed payments, your customers will be shown different retry options within the Checkout form.

Standard payment methods supported by Razorpay in the Checkout:

  • Credit and Debit cards
  • Netbanking
  • UPI/QR
  • EMI on cards
  • Wallet
    • Freecharge
    • Mobikwik
    • Airtel Money
  • Pay Later
    • ePayLater

To integrate payment methods of your choice, refer the Payments Methods documentation.