Integrate Offers with Custom Checkout

In the Checkout form designed to meet your business needs and branding, you can display Offers so that customers can derive maximum advantage from them while you promote your business.

New to Custom Checkout Integration?

If yes, know more about the

custom integration flow

Prerequisites

Before integrating offers for your custom Checkout, run through this checklist:

Understand the
payment flow
.
Generate the API keys from the
Razorpay Dashboard
.

Watch Out!

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

Steps to Integrate

The procedure for integrating Custom Checkout on your website is explained in the

Custom Integration document

. However, the procedure varies while passing the offers in the payment details.

Step 1: Create Offers on Razorpay Dashboard

You can create offers from the

Razorpay Dashboard

Step 2: Create Orders and Pass Offer_id

After generating offers from the Razorpay Dashboard, pass the offer_id in the order request attributes to the following endpoint:

Sample Request

Use the sample codes given below:

POST

/orders

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

Request Parameters

Using the following attributes, send an order request using the Orders API.

amount

mandatory

integer Enter the amount for which the order is to be created. For example, if the amount to be charged is ₹299.95, then pass 29995 in this field.

currency

mandatory

string ISO code of the currency associated with the order amount. For example,INR.

offer_id

mandatory

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

Handy Tips

This is mandatory only in cases where you want to associate an offer or offers with the Order or you had not selected the

Show Offer on Checkout

while creating the offer from the Razorpay Dashboard.

Step 3: 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.

While invoking the createPayment method, pass the order_id and the offer_id in the payment request as follows:

var data = {
  amount: 1000, // in currency subunits. Here 1000 = 1000 paise, which equals to ₹10
  currency: "INR", // Default is INR.
  email: 'gaurav.kumar@example.com',
  contact: '9123456780',
  notes: {
    address: 'Ground Floor, SJR Cyber, Laskar Hosur Road, Bengaluru',
  },
  offer_id: 'offer_DtEhEm3XslgfXE',
  order_id: 'order_DtEkng132N71M8', // pass the Order ID generated in Step 2
  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

})

Know more about

Custom Checkout

Next Steps

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

From the
Razorpay Dashboard
.
By
configuring webhooks
.
By polling our
payment APIs
.