Integrate the Widget on Your Website

Prerequisites

• Create a

  Razorpay account

  .
• Generate the

  API keys

  from the

  Razorpay Dashboard

  by navigating to Account & Settings → Website and app settings → API keys.
• You can use the Test Mode keys to test the integration and preview the Widget. Later, switch to Live Mode of the Razorpay Dashboard, generate the

  Live API keys

  and replace it with the test keys.

Integration Steps

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

1. Integrate the Widget

   .

2. Enable the Widget

   .

Step 1: Integrate the Widget

Follow the integration steps given below to integrate the widget:

1. Embed the JavaScript file into your website. Copy the snippet and add it to the head section of your website.

   JavaScript

   copy

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

2. Create an HTML element with the below id under the product price. This is to indicate where the affordability widget should appear.

   Add Parameter

   copy

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

3. Copy-paste the following snippet to the JS file and link it to your HTML file. Add the test key ID generated from the

   Dashboard

   .
   Add Parameter

   copy

   const key = "rzp_test_XXXX00000XXXX"; //Replace it with your Test Key ID generated from the Dashboard
   const amount = 400000; //in paise
   
   window.onload = function() {
   const widgetConfig = {
   	"key": key,
   	"amount": amount,
   };
   const rzpAffordabilitySuite = new RazorpayAffordabilitySuite(widgetConfig);
   rzpAffordabilitySuite.render();
   }

You can now preview the widget on your product description page in test mode. Here is a glimpse of the default widget.

Switch to Live Mode

After you preview the widget, switch to live mode and replace the test API keys in the sample code with the live ones to take the integration live. Know more about

Step 2: Enable the Widget

Once you preview the widget on your product description page, you have to enable the widget to display it on your website for your customers.

1. Log in to the

   Razorpay Dashboard

   and navigate to Affordability in the Payment Products section.
2. Choose Others as your website platform.
   
3. Click Enable Widget in the Go live! section.
   
4. Select the check box if you consent to enable the widget and click Yes, enable.

Successful Activation

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

Next Steps

After you successfully integrate the widget on your website, you can choose to

Related Information

• Affordability Widget FAQs for Native website

• Integrate Affordability Widget on WooCommerce website

• Integrate Affordability Widget on your Shopify store

• Integrate Affordability Widget on your Android app