---
title: Affordability
description: Showcase affordable payment options like EMI, Cardless EMI, and Pay Later using the airpay Affordability Widget.
---

The airpay Affordability Widget lets you showcase affordable payment options like EMI, Cardless EMI, and Pay Later directly on your product pages. Easily customisable and integrated with airpay's checkout, it enhances your customers' shopping experience.

Steps

```
 Step 1: Include the JavaScript File
         Add the following JavaScript file inside the <head> section of your webpage:
         <script type="text/javascript"src=" https://payments.airpay.co.in/widget/affordability/v1/js/affordability.min.js">
         </script>

 Step 2: Add a Widget Placeholder
         Insert a <div> element with a unique id at the location where you want the widget to be displayed:
         <div id="widget_id"></div>

 Step 3: Initialize the Widget
         Use the script below to load and initialize the airpay Affordability Widget:

         <script type="text/javascript">
                    const affordability= new AirpayAffordability(
                        {
                            "merchant_id": "18999",
                            "amount": "2000.00",
                            "currency": "INR",
                            "key": "2c95bd5cb720c85634de0267b7ec4345ad20f194",
                            "merchant_domain": "aHR0cDovL2xvY2FsaG9zdA==",
                            "styleConfig": {
                                "backgroundColor": "#ffbf80",
                                "textColor": "#003366"
                            },
                            "buy_now": {
                                "kit_type": "",
                                "url": "http://localhost/airpay_php_v2/sendtoairpay2.php",
                                "additional_params": {
                                    "product_id": "1234",
                                    "product_name": "xyz"
                                },
                                "iframeStyle": {
                                    "paymentIframWidth": "400",
                                    "paymentIframHeigt": "400"
                                }
                            }
                        }
                      );
                    affordability.init('widget_id');
            </script>

```

## Request Body

| Parameter | Type Value | Description | Value Like |
| --- | --- | --- | --- |
| merchant_id  required | Alphanumeric | A unique merchant ID provided by airpay. | `18999` |
| amount  required | Alphanumeric | The payment amount must be specified with exactly two decimal places | `2000.00` |
| currency  required | Alphanumeric | The three-letter currency code following ISO standards | `INR` |
| key  required | Alphanumeric | A secure key provided by airpay to authenticate the merchant. | `2c95bd5cb720c85634de0267b7ec4345ad20f194` |
| merchant_domain  optional | Alphanumeric | The merchant's domain must be Base64 encoded | `aHR0cDovL2xvY2FsaG9zdA== for http://localhost` |
| StyleConfig.backgroundColor  optional | Alphanumeric | A hex code or color value to customize the widget background | `#FFFFFF` |
| StyleConfig.textColor  optional | Alphanumeric | A hex code or color value to customize the widget's text color | `#000000` |
| buy_now.url  optional | Alphanumeric | To load the payment page from the widget, specify a redirect URL. airpay will redirect to this URL, where the merchant can integrate the airpay payment logic. |
| buy_now.kit_type  optional | Alphanumeric | To load the payment page in an iframe, pass kit_type=IFrame. | `IFrame` |
| buy_now.additional_params  optional | Alphanumeric | If any extra parameters are required in the buy_now.url, they should be passed accordingly. |
| buy_now.IframeStyle.paymentIframWidth  optional | Alphanumeric | Specify the desired width of the payment iframe | `500px or 100%` |
| buy_now.IframeStyle.paymentIframHeigt  optional | Alphanumeric | Specify the desired height of the payment iframe | `600px or 100%` |