> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate the Widget on Your Website

> Integrate Affordability Widget on your Website to spread awareness about the EMI²-based payment options before they reach checkout.

<div style={{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"0.35rem 0.9rem",border:"1px solid rgba(128,128,128,0.28)",borderRadius:"0.5rem",padding:"0.45rem 0.75rem",margin:"0 0 1.25rem",fontSize:"0.875rem"}}>
  <span style={{fontWeight:600}}>Available in</span>
  <span>🇮🇳 India</span>
</div>

Integrate with Affordability Widget to influence your customer's purchase decisions before they reach checkout by displaying various affordable payment options and offers.

<Info>
  **Handy Tips**

  Razorpay Affordability Widget is compatible with all JavaScript frameworks like React, Vue, Angular, Svelte and so on.
</Info>

## Prerequisites

* Create a [Razorpay account](https://dashboard.razorpay.com/signup).
* Generate the [API keys](/docs/api/authentication#generate-api-keys) from the 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 Dashboard, generate the [Live API keys](/docs/api/authentication#live-mode-api-keys) and replace it with the test keys.

<Info>
  **Handy Tips**

  Only the Owner, Admin and Manager roles can enable the widget.
</Info>

## Integration Steps

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

1. [Integrate the Widget](#step-1-integrate-the-widget).
2. [Enable the Widget](#step-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 JavaScript theme={null}
	<!-- 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.

```javascript Add Parameter theme={null}
	<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](#prerequisites).

```javascript Add Parameter theme={null}
	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();
	}
```

`key` *mandatory*
: `string` API Key ID generated from the [Dashboard](/docs/api/authentication#generate-api-keys). For example, `rzp_test_XXXX00000XXXX`.

`amount` *mandatory*
: `integer` The amount to be paid by the customer in paise. For example, if the amount is ₹4000, enter `400000`.

<Warning>
  **Watch Out!**

  Ensure you pass the final amount in paise to the widget which you want to display to your customers on the product and checkout pages.
</Warning>

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

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-native-test-v2.jpg" alt="Preview the widget in test mode" width="400" />

#### 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 [live API keys](/docs/api/authentication#live-mode-api-keys).

### 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 Dashboard and navigate to **Affordability** in the **Payment Products** section.
2. Choose **Others** as your **website platform**.
   <img src="https://razorpay.com/docs/build/browser/assets/images/widget-native-platform.jpg" alt="Select website platform for widget" width="800" />
3. Click **Enable Widget** in the **Go live!** section.
   <img src="https://razorpay.com/docs/build/browser/assets/images/widget-native-enable.jpg" alt="Enable the widget" width="800" />
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.

<img src="https://razorpay.com/docs/build/browser/assets/images/default-widget1-v2.jpg" alt="Glimpse of the default widget" width="400" />

<Info>
  **Minimum Order Limit**

  All the payment method options that are enabled and that satisfy the minimum order limit appear on the widget. Know more about the minimum order limit for:

  * [EMI](/docs/payments/payment-gateway/emi²/faqs#1-what-are-the-standard-credit-card-interest)
  * [Cardless EMI](/docs/payments/payment-gateway/emi²/faqs#cardless-emi)
  * [Pay Later](/docs/payments/payment-gateway/emi²/faqs#2-what-are-the-standard-interest-rates-charged)
</Info>

<Info>
  **Feature Enablement**

  Raise a request with our [Support team](https://razorpay.com/support/#request) to integrate Razorpay Affordability Widget with Checkout. Your customers can select an offer/payment option on the widget, proceed to checkout and complete the payment.
</Info>

## Next Steps

After you successfully integrate the widget on your website, you can choose to [customise the widget](/docs/payments/payment-gateway/emi²/widget/native-web/customise) based on your requirement.

<Info>
  **Handy Tips**

  * Fill in the [integration support form](https://form.typeform.com/to/Ro3nJPzp) in case you are facing any issues with the integration.
  * In case you have any queries, raise a ticket on the [Razorpay Support Portal](https://razorpay.com/support/).
</Info>

### Related Information

* [Affordability Widget FAQs for Native website](/docs/payments/payment-gateway/emi²/widget/faqs#native-website)
* [Integrate Affordability Widget on WooCommerce website](/docs/payments/payment-gateway/emi²/widget/woocommerce)
* [Integrate Affordability Widget on your Shopify store](/docs/payments/payment-gateway/emi²/widget/shopify)
* [Integrate Affordability Widget on your Android app](/docs/payments/payment-gateway/emi²/widget/android)