Integrate No Cost EMI Offers with Standard Checkout

Display general or order specific No Cost EMI Offers on Standard Checkout.


After creating

from the Dashboard, you must integrate them with the Razorpay Standard Checkout so your customers can avail of them while making payments.

Integrate Offers with Orders API

Using our JS, SDK files, or other Ecommerce plugins, you should integrate offers with the Orders API.

You need not integrate offers with Orders API if you use any of the following Razorpay products or plugins to accept payments:

  • Plugins: Razorpay Magento, Shopify, or WooCommerce.
  • Products: Payment Links, Payment Buttons, Payment Pages and Invoices.

This is because Razorpay automatically creates orders for these products or plugins when customers initiate payment at the Checkout.

Only those No Cost EMI offers that pass the following validations are displayed at the Checkout:

There are two ways in which you can display No Cost EMI offers at the Razorpay Checkout:

This is the easiest way to display No Cost EMI offers at the Checkout. While

from the Razorpay Dashboard, enable the Show Offer on Checkout option.

Enable the Show Offer on Checkout option

To display a specific No Cost EMI offer at the Checkout, you should associate the offer with an order. You can pass the offers array as a request attribute in the Create Orders API.

Some use cases:

  • If you have multiple product lines running on the same account and have certain business logic for displaying No Cost EMI offers.
  • The discount has already been applied, and you would like to restrict the payment method to avail the offer.

To display offers:

  1. .
  2. .
  3. .

You can

from the Dashboard.

Let us say you have created a No Cost EMI offer offer_ANZoaxsOww2X53, such that a discount of ₹200 is applicable on all transactions done through AXIS netbanking only.


Create an order using the Orders API and pass the offer_id as a request parameter.

curl -u [YOUR_KEY_ID]:[YOUR_KEY_SECRET] \
-X POST https://api.razorpay.com/v1/orders \
-H "Content-Type: application/json" \
-d '{
"amount": 1000000,
"currency": "INR",
"offers": [
"offer_ANZoaxsOww2X53"
]
}'

amount

mandatory

integer Enter the amount for which the order is to be created in currency subunits. For example, for an amount of ₹10000, enter 1000000.

currency

mandatory

string ISO code of the currency associated with the order amount. Here, it is INR.

offers

mandatory

array Unique identifier of the offer. Pass the offer_id obtained from the response of the previous step.

The order_id obtained in the previous step can be passed to the Checkout form as follows:

<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
"key": "[YOUR_KEY_ID]",
"amount": "1000000",
"currency": "INR",
"order_id":"order_FIL1vBOsWFllnO",
"name": "Acme Corp",
"description": "Test Transaction",
"image": "https://cdn.razorpay.com/logos/F9Yhfb7ZXjXmIQ_medium.jpg",
"handler": function (response){
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature)
},
"prefill": {
"name": "Gaurav Kumar",
"email": "gaurav.kumar@example.com",
"contact": "9999988999"
},
"notes": {
"address": "Razorpay Corporate Office"
},
"theme": {
"color": "#3399cc"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
rzp1.open();
e.preventDefault();
}
</script>

Know more about

.

After the customer has availed the offers and made the payment at the Checkout, you can track the status of the payments:


Is this integration guide useful?