Affordability
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
Section titled “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% |