Integrate with Javascript

Integrate the Affordability Widget to display affordable payment options and offers before checkout,
influencing purchase decisions and improving conversions. To learn more about the features and benefits of PayU Affordability Widget, see Introduction to Affordability Widget.

Integration steps

Step 1: Embed the JavaScript file into your website

Copy the following snippet and add it to the head section of your website:

<!-- Add script in head -->
<script defer src="https://jssdk.payu.in/widget/affordability-widget.min.js"></script>

Step 2: Add placeholder for the Widget

Add the following HTML element with the below id on your webpage as a placeholder to
indicate where the affordability widget should appear.

<div id="payuWidget"> </div> 

Step 3: Initiate the Widget

Use the following snippet inside the header section of your Webpage.

window.onload = function() {
  const widgetConfig = {
      "key": {key},
      "amount": {amount},
  };
  payuAffordability.init(widgetConfig);
}

Customize the Widget

Display specific affordability options available for a customer

By default, the Affordability widget displays an exhaustive list of all affordability options supported by PayU. But your customer might just want see the affordability options for which they are eligible.

To display specific affordability options available for a customer, pass the userDetails object with the following parameters in widgetConfig:

"userDetails": {                        
        "mobileNumber": {mobile number},     
        "token": {token},                    
        "timeStamp": {timestamp}             
      }

Display SKU based offers in the widget

The skusDetail is an optional key that you can add to the affordability widget to display the SKU based offers on your checkout page. The skusDetail key accepts an array of objects as the value. If you want to display offers for one or more SKUs, you can either send a single or an array of objects as the value of the skusDetail key.

To display SKU based offers you must pass the id of the sku as the value of the skuId key. The skuAmount and quantity are optional fields.

🚧

Warning!

If you do not pass a value for the skuAmount key, the amount of the product will be displayed as the Sku amount on the widget.

"skusDetail": [
        {                     
          "skuId": {sku1Id},              
          "skuAmount": {sku1Amount}       
          "quantity": {sku1quantity}      
        },
        {
          "skuId": {sku2Id},              
          "skuAmount": {sku2Amount}       
          "quantity": {sku2quantity}      
        }
      ]

Customize the Display Color of the Widget

The styleConfig is an optional section that you can use to customise the color of specific UI elements of the affordability widget, such as:

• lightColor: to customise the color of the EMI tab on the L1 screen (the first screen of the widget).
• darkColor: to customise the colors of the buttons on the L1 (the first screen of the widget) and L2 (expanded view of the widget) screen.
• backgroundColor: if the background color of you web page is not white then this key can be used to customise the background color of the widget and the text on the L1 screen will be adjusted accordingly.

"styleConfig": {                     
        "lightColor": #FFFCF3,            
        "darkColor": #FFC915,
        "backgroundColor": #FFFFFF
      }

Sample Code

window.onload = function() {
  const widgetConfig = {
      "key": {key},
      "amount": {amount},
      "skusDetail": [
        {                     
          "skuId": {sku1Id},              
          "skuAmount": {sku1Amount}       
          "quantity": {sku1quantity}      
        },
        {
          "skuId": {sku2Id},              
          "skuAmount": {sku2Amount}       
          "quantity": {sku2quantity}      
        }
      ],
      "styleConfig": {                     
        "lightColor": #FFFCF3,            
        "darkColor": #FFC915,
        "backgroundColor": #FFFFFF
      },
      "userDetails": {                        
        "mobileNumber": {mobile number},     
        "token": {token},                    
        "timeStamp": {timestamp}             
      }  
  };
  payuAffordability.init(widgetConfig);
}