Integrate the Widget on your Website

Integrate Affordability Widget with your Website.


Follow the integration steps given below to embed the widget on your website.

Handy Tips
Razorpay Affordability Widget is compatible with all Javascript frameworks like React, Vue, Angular, Svelte and so on.

Video Tutorial🔗

Watch this video to learn how to integrate Razorpay Affordability Widget with your Website.

Integration Steps🔗

  1. Embed the JavaScript File.
  2. Create an HTML Element.
  3. Add the Widget Snippet.
  4. Raise the Activation Request.

Step 1: Embed the JavaScript File🔗

To integrate the widget on your website, embed the JS file into your website.

Copy<!-- Add script in head --> <script src="https://cdn.razorpay.com/widgets/affordability/affordability.js"> </script>

Step 2: Create an HTML Element🔗

Create an HTML element with an id to indicate where the affordability widget should appear.

Example🔗

Copy<div id="razorpay-affordability-widget"> </div>

Step 3: Add the Widget Snippet🔗

Copy-paste the following snippet to the JS file and link it to your HTML file.

Copyconst key = "YOUR_KEY_ID"; const amount = "product_price"; window.onload = function() { const widgetConfig = { "key": key, "amount": amount, }; const rzpAffordabilitySuite = new RazorpayAffordabilitySuite(widgetConfig); rzpAffordabilitySuite.render(); }

Watch Out!
Ensure you pass the final amount to the widget which you display to your customers on product and checkout pages.

Parameters🔗

key mandatory
string API Key ID generated from the Razorpay Dashboard.
amount mandatory
integer The amount to be paid by the customer in paise. For example, if the amount is ₹4000, enter 400000.

Sample Code🔗

Given below is the sample code to embed the widget on your website.

Copy<!-- Add script in head --> <script src="https://cdn.razorpay.com/widgets/affordability/affordability.js"> </script> <div id="razorpay-affordability-widget"> </div> <script> const key = "YOUR_KEY_ID"; const amount = "product_price"; window.onload = function() { const widgetConfig = { "key": key, "amount": amount, }; const rzpAffordabilitySuite = new RazorpayAffordabilitySuite(widgetConfig); rzpAffordabilitySuite.render(); } </script>

Step 4: Raise the Activation Request🔗

Reach out to your sales PoC or raise an integration support ticket on the Razorpay Dashboard to enable this feature on your website.
To raise a ticket:

  1. Log into the Razorpay Dashboard.

  2. Click Help to open the support pop-up and click Have a query.

  3. Scroll down and select Integration Support.

  4. Select Affordability Widget from the list of topics.

  5. Enter the required details and click Submit.

We will evaluate your request and enable the feature at the earliest. You can also track the status of your ticket.

Successful Activation🔗

Here is a glimpse of the default widget with offers and payment method options enabled by you.

Handy Tips
In case of any queries, write to us at affordability-widget@razorpay.com.

×