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

 JavaScript
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.

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

Example#

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

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

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.

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

 Javascript
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.