Payments

Payment Gateway

Affordability

Widget

Custom Integration

Integrate Checkout From Widget

Integrate Checkout from Affordability Widget using Custom Integration and allow your customers to complete their purchase directly from the widget.

Integrate Checkout from Affordability Widget using Custom Integration and provide customers with a direct and convenient avenue to complete their purchases within the widget itself. This helps businesses improve conversion rates and eliminate any friction or unnecessary steps in the buying process.

Watch Out!

Advantages

  • Improved Conversion Rates
    The improved Affordability Widget simplifies the checkout process, leading to more customers completing their purchases and thus higher conversion rates.

  • Frictionless Customer Experience
    The widget provides a seamless and hassle-free experience, boosting customer confidence and encouraging them to finalise their purchases easily.

  • Auto-Selection Convenience
    The widget's auto-selection functionality automatically applies the chosen payment option or offer to the checkout, reducing confusion and making the process more convenient.

Prerequisites

Integration Steps

Follow the integration steps given below on your website:

1.1 Define Checkout Callback Function

Define a callback function that receives the affordabilityWidgetPrefill as an argument. This function is invoked when the customer clicks the Buy Now button on the widget.

The prefill data is a string that contains the payment instrument details or offer_id used to invoke checkout from the widget. You can use any custom logic to save this data for the future. After saving the prefill data, you can seamlessly initiate your website’s checkout process and redirect the customer to the preferred location as per your website’s checkout journey.

function checkoutCallback(affordabilityWidgetPrefill) {
  // Your logic to save affordabilityWidgetPrefill 


  // Perform redirection to the cart page or any other preferred location as per your website’s checkout journey
}

Handy Tips

  • Consider storing the prefill data as a component state if you use a frontend framework like React.
  • Alternatively, you can store it in localstorage or use any other storage method.

1.2 Pass Function in Affordability Widget Configuration

Pass the callback function

previously defined

to widgetConfig as checkout_callback, when initialising Razorpay Affordability Widget.

window.addEventListener('DOMContentLoaded', () => {
    const widgetConfig = {
        key: 'YOUR_KEY_ID', // Replace it with your live Key ID generated from Razorpay Dashboard
        amount: 400000, // Amount in paise
        currency: 'INR', 
        checkout_callback: checkoutCallback // new
    };


    const rzpAffordabilityWidget = new RazorpayAffordabilitySuite(widgetConfig);
    rzpAffordabilityWidget.render();
});

key

mandatory

string API Key ID generated from the Razorpay Dashboard.

amount

mandatory

integer The amount to be paid by the customer in currency subunits. For example, if the amount is ₹500.00, enter 50000.

currency

mandatory

string The currency in which the customer should make the payment. Check the list of

supported currencies

.

checkout_callback

mandatory

string Customers are redirected to this URL.

1.3 Retrieve and Decode Option Selected

Before opening the payment checkout for your customer with the selected option on the widget, retrieve affordabilityWidgetPrefill from your global store/localstorage or anywhere you stored it and decode it using the below function.

function decodeAffordabilityWidgetPrefill(encodedPrefill) {
const decodedPrefill = window.atob(encodedPrefill);


return JSON.parse(decodedPrefill);
}

Response Parameters

method

string Payment methods on which eligibility check is required. It is mandatory if the offer_id is null. Possible values:

  • emi
  • cardless_emi
  • paylater

issuers

string List of EMI issuers. Possible value is HDFC.

type

string Type of card. Possible value:

  • debit
  • credit

provider

string List of Cardless EMI providers. Possible values for cardless_emi:

  • barb
  • cshe
  • hdfc
  • icic
  • idfb
  • kkbk
  • krbe
  • earlysalary
  • tvsc
  • walnut369

List of Pay Later providers. Possible values for paylater:

  • rzpx_postpaid
  • getsimpl
  • icic
    • hdfc

duration

number EMI tenure selected by the customer on the widget.

offer_id

string Unique identifier of the offer the customer selects on the widget. It is mandatory if the method is null.

1.4 Initiate Payment Checkout with Option Selected

Pre-select the payment option or offer_id on your payment page so the customer can complete the payment.

Is this integration guide useful?

ON THIS PAGE