Step 1: Embed the JavaScript File🔗

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

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

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

 Add Parameter
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();
}

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.

target mandatory

string id of the target element created in the previous step.

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.