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.

Prerequisites#

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">

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.

Example#

The following sample code will pass the Razorpay Checkout options as HTML data attributes:

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" // INR 235 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.

Note:
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 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 now. You can capture the payment immediately after authorization. To enable the auto capture feature in your payments, refer our Orders API documentation.

  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.

Example#

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

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", // INR 299.35    "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",    "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>

Note:
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.

Note:
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)

Required

Description

key

data-key

Yes

Merchant Key-ID

amount

data-amount

Yes

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

currency

data-currency

No

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.

name

data-name

Yes

The merchant/company name shown in the Checkout form.

description

data-description

No

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

image

data-image

No

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.

prefill.name

data-prefill.name

No

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

prefill.email

data-prefill.email

No

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

prefill.contact

data-prefill.contact

No

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

prefill.method

data-prefill.method

No

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.

notes.fieldname

data-notes.fieldname

No

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

theme.color

data-theme.color

No

Brand color to alter the appearance of Checkout form.

theme.image_padding

data-theme.image_padding

No

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

modal.backdropclose

data-modal.backdropclose

No

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

modal.escape

data-modal.escape

No

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

order_id

data-order_id

No

Order ID generated via Orders API

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.

Note:
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
  • EMI on cards
  • Wallets
    • Freecharge
    • Mobikwik
    • Airtel Money

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