> ## 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.

# Frequently Asked Questions (FAQs)

> Find answers to frequently asked questions about Razorpay Affordability Widget.

<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>

Find answers to the commonly asked questions about the Affordability Widget.

* [Generic](#generic)
* [Native Website](#native-website)
* [WooCommerce Website](#woocommerce)
* [Shopify Store](#shopify)

## Generic

<AccordionGroup>
  <Accordion title="Who can use this widget?">
    All brands that provide payment offers and/or accept payments made through EMI, Cardless EMI and Pay Later methods **only via Razorpay** can use this widget.
  </Accordion>

  <Accordion title="What does the widget include?">
    The widget includes:

    * All the offers that you have set up on Razorpay (along with an expandable view to read the details about each offer).
    * All EMI, Cardless EMI, and Pay Later options enabled by you which satisfies the minimum order limit. Know more about the minimum order limit for [EMI](/docs/payments/payment-gateway/emi²/faqs#2-what-are-the-standard-credit-card-interest), [Cardless EMI](/docs/payments/payment-gateway/emi²/faqs#cardless-emi) and [Pay Later](/docs/payments/payment-gateway/emi²/faqs#pay-later).
  </Accordion>

  <Accordion title="How does the integration work?">
    Follow the steps below to start the integration process:

    1. Create a [Razorpay account](https://dashboard.razorpay.com/signup).
    2. Follow the integration steps specific to your integration. It is that simple!

    You can integrate the Affordability Widget with:

    * [Native website](/docs/payments/payment-gateway/emi²/widget/native-web).
    * [WooCommerce website](/docs/payments/payment-gateway/emi²/widget/woocommerce).
    * [Shopify store](/docs/payments/payment-gateway/emi²/widget/shopify).
  </Accordion>

  <Accordion title="Where should I place the widget on my website?">
    We recommend placing the widget below the product price. It will help your customers discover affordable payment options and offers early on in the buying journey and make an informed buying decision.
  </Accordion>

  <Accordion title="Is the widget available on Android and iOS SDKs?">
    The widget is available on [Android](/docs/payments/payment-gateway/emi²/widget/android) but **not** on iOS SDK.
  </Accordion>

  <Accordion title="Is it possible to integrate the widget on my website using plugins?">
    Yes, it is possible to integrate the widget on your website using [WooCommerce](/docs/payments/payment-gateway/emi²/widget/woocommerce) and [Shopify](/docs/payments/payment-gateway/emi²/widget/shopify).
  </Accordion>

  <Accordion title="How can I disable the Affordability Widget from the Dashboard?">
    Follow the steps given below to disable the Affordability Widget:

    1. Log in to the Dashboard and navigate to **Affordability** → **Settings**.
    2. Click **Disable Widget**.
    3. Click **Yes, disable** to remove the Affordability Widget from your website.

    Once you disable the widget, your website/app will automatically fall back to the default experience.
  </Accordion>

  <Accordion title="What are the various features of the Affordability Widget that will help increase customer conversion?">
    Following are the features of the Affordability Widget:

    * [Discount Whisperer](/docs/payments/payment-gateway/emi²/widget/features#discount-whisperer).
    * [Eligibility Check](/docs/payments/payment-gateway/emi²/widget/features#eligibility-check).
    * [Checkout from Widget](/docs/payments/payment-gateway/emi²/widget/features#checkout-from-widget).
  </Accordion>

  <Accordion title="If a customer is ineligible for payment, what should they do next?">
    The customer can view the reason for ineligibility on the widget itself and choose to:

    * Try again using a different mobile number for the chosen payment instrument.
    * Opt for a different payment instrument/method.
  </Accordion>
</AccordionGroup>

## Native Website

<AccordionGroup>
  <Accordion title="What customisations are possible in the widget?">
    You can customise the following options:<br />

    * Offers
    * Payment Methods
    * Theme

    Know more about the [customisation options](/docs/payments/payment-gateway/emi²/widget/native-web/customise).
  </Accordion>

  <Accordion title="Can I disable offers?">
    Yes, you can disable offers and your customers will not be able to view them on the widget. This will not impact the checkout; customers will be able to view the offers on the checkout.

    Know more about how to [disable offers](/docs/payments/payment-gateway/emi²/widget/native-web/customise#14-disable-the-offers).

    You can also disable [EMI](/docs/payments/payment-gateway/emi²/widget/native-web/customise#212-disable-emi-options), [Cardless EMI](/docs/payments/payment-gateway/emi²/widget/native-web/customise#222-disable-cardless-emi-options) and [Pay Later](/docs/payments/payment-gateway/emi²/widget/native-web/customise#232-disable-pay-later-options) options on the widget.
  </Accordion>

  <Accordion title="How can I alter the appearance of the widget?">
    You can alter the appearance of the widget using the following options:

    * Customise the theme colour.
    * Change the heading colour and font size.
    * Change content colour and font size.
    * Change link colour and font size.
    * Change footer colour, font size and logo variants.

    Know more about [themes and colours](/docs/payments/payment-gateway/emi²/widget/native-web/customise#3-themes-and-colours).
  </Accordion>

  <Accordion title="What is Checkout from Affordability Widget and how does it benefit my business?">
    [Checkout from Affordability Widget](/docs/payments/payment-gateway/emi²/widget/standard-integration) is a feature that allows customers browsing EMI plans via the Affordability Widget on your website to directly checkout from the Widget itself. This enables a frictionless checkout journey for customers.

    This feature is projected to increase the conversion rate from Widget to Checkout from 2.7% to 5-10%, thereby benefiting your business by improving customer experience and increasing sales.
  </Accordion>

  <Accordion title="What does the customer journey look like after integrating Checkout from Affordability Widget?">
    Below is the customer journey:

    1. Customers view the existing plans and offers on the widget, choose an eligible payment instrument or offer, and click **Buy now**.

    2. They are redirected to your checkout page, where they enter their contact and shipping details and proceed to checkout.

    3. They are then redirected to the Razorpay checkout if you have integrated the widget with our [Standard Checkout](/docs/payments/payment-gateway/emi²/widget/standard-integration). If not, they are redirected to your custom-built checkout.

    4. Once redirected to our Standard Checkout, the payment option or offer the customer selects on the widget appears pre-selected on checkout.

    5. They enter the relevant details and complete the payment.

    <img src="https://razorpay.com/docs/build/browser/assets/images/checkout-widget.gif" alt="Checkout from widget" width="800" />
  </Accordion>

  <Accordion title="What are the prerequisites to enable the Checkout from Affordability Widget feature?">
    * Create a [Razorpay account](https://dashboard.razorpay.com/signup).
    * Integrate with the [Razorpay Affordability Widget](/docs/payments/payment-gateway/emi²/widget/native-web). This feature is only supported on Native Website.
    * Integrate with [Razorpay Standard Checkout](/docs/payments/payment-gateway/web-integration/standard).
    * Integrate Checkout from Widget using [Standard Integration](/docs/payments/payment-gateway/emi²/widget/standard-integration).

    <Info>
      **Handy Tips**

      If you have a [custom-built checkout](/docs/payments/payment-gateway/web-integration/custom), integrate with Checkout from Widget using [Custom Integration](/docs/payments/payment-gateway/emi²/widget/custom-integration).
    </Info>

    <Warning>
      **Watch Out!**

      This is an on-demand feature. Write to us at [affordability-widget@razorpay.com](mailto:affordability-widget@razorpay.com) to get this feature enabled on your account.
    </Warning>
  </Accordion>

  <Accordion title="Will the Checkout from Affordability Widget feature affect my website's page load time?">
    No, the Checkout from Affordability Widget feature will not impact your website's page load time.
  </Accordion>
</AccordionGroup>

## WooCommerce

<AccordionGroup>
  <Accordion id="1-i-am-integrating-with-razorpay-plugin-for" title="I am integrating with Razorpay Plugin for the first time. What are the steps that I need to follow?">
    Follow the steps given below if you are integrating with our plugin for the first time:

    1. Log in to the [WordPress account](https://wordpress.com/log-in), navigate to **WooCommerce** → **Settings** and click the **Payments** tab.
           <img src="https://razorpay.com/docs/build/browser/assets/images/woocommerce-settings.jpg" alt="WooCommerce settings" width="800" />
    2. In the **Payments** tab, scroll down to **Razorpay** and click **Manage** to edit the settings.
           <img src="https://razorpay.com/docs/build/browser/assets/images/widget-razorpay-edit.jpg" alt="edit" width="800" />
    3. In the **Plugin Settings**, enter the **Key ID** and **Key Secret** generated from the Dashboard. Click **Save Changes**.
           <img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-keys.jpg" alt="API Keys" width="800" />

    You can now follow the [integration steps](/docs/payments/payment-gateway/emi²/widget/woocommerce#integration-steps).
  </Accordion>

  <Accordion title="How does the integration work?">
    You can integrate with the Affordability Widget in a few simple steps:

    1. Install the WooCommerce plugin version **4.3.4** directly from the [WordPress Plugin Directory](https://wordpress.org/plugins/woo-razorpay/).
    2. Create a [Razorpay account](https://dashboard.razorpay.com/signup) and follow the [integration steps](/docs/payments/payment-gateway/emi²/widget/woocommerce#integration-steps).
    3. You can enable the widget from the Dashboard.
  </Accordion>

  <Accordion title="How can I test the widget before taking it live?">
    Follow the steps given below to test the widget:

    1. On the WordPress Dashboard hover over **Razorpay WordPress** and click **Visit Store**.
           <img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-test.jpg" alt="Test widget" width="800" />
    2. Click on a product to view the widget.
           <img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-preview.jpg" alt="Preview" width="800" />
  </Accordion>

  <Accordion title="What customisations are possible in the widget?">
    You can customise the following options:<br />

    * Offers
    * Payment Methods
    * Theme

    Know more about the [customisation options](/docs/payments/payment-gateway/emi²/widget/woocommerce/customise).
  </Accordion>

  <Accordion title="The Affordability widget does not appear on the product page. What should I do?">
    In some cases, the Affordability widget may not appear on your website if you are using a third-party caching plugin, like WP Rocket.

    To resolve this:

    1. Log in to your [WP Rocket Dashboard](https://wp-rocket.me/account/).
    2. Navigate to the WP Rocket plugin's settings page.
    3. Add `/widgets/affordability/affordability.js` to the following sections in your settings:
       1. Navigate to **ADVANCE RULES** in the left menu → **Never Cache URL(s)**
              <img src="https://razorpay.com/docs/build/browser/assets/images/affordability-add-url-1.jpg" alt="Add URL to Never Cache URL(s) section" width="500" />
       2. Navigate to **CDN** in the left menu → **Exclude files from CDN**
              <img src="https://razorpay.com/docs/build/browser/assets/images/affordability-add-url-2.jpg" alt="Add the URL to Exclude files from CDN" width="500" />
    4. Navigate to **File Optimization** in the left nav and enable **Minify Javascript files** and
    5. Add `/widgets/emi²/affordability.js` within the **Excluded Javascript Files** section.
           <img src="https://razorpay.com/docs/build/browser/assets/images/aff-wooc-file-optimization.jpg" alt="Configure file optimization section" width="800" />
    6. Click **SAVE CHANGES**. The Affordability widget will appear again on your product page.
  </Accordion>
</AccordionGroup>

## Shopify

<AccordionGroup>
  <Accordion title="How can I enable the widget on my Shopify store?">
    You can integrate with the Affordability Widget on your Shopify Store in a few simple steps:

    1. Enable the widget directly from your [Shopify app](https://accounts.shopify.com/store-login).
    2. Create a [Razorpay account](https://dashboard.razorpay.com/signup) and perform the [EMI² integration](/docs/payments/payment-gateway/emi²/widget/shopify#integration-steps) steps on your Shopify store.
  </Accordion>

  <Accordion title="Where should I place the widget on my Shopify store?">
    We recommend placing the widget below the product price. It will help your customers discover affordable payment options and offers early on in the buying journey and make an informed buying decision.
  </Accordion>

  <Accordion title="Where can I find the Razorpay Live API Key ID?">
    Follow the steps given below to generate your Key ID:

    1. Log in to the Dashboard in live mode and navigate to **Account & Settings**.
    2. In the **Website and app settings** section, click **API keys**.
    3. Click **Generate new key** and save the keys in your system.
  </Accordion>

  <Accordion title="I am not able to view the Widget on my Shopify Store. What should I do?">
    Ensure your website's theme version supports [Online Store Theme 2.0](https://shopify.dev/docs/themes/os20). You can [verify](https://community.shopify.com/c/shopify-design/how-to-identify-shopify-online-2-0-theme-or-later/td-p/1521884#:~:text=Next%20Topic-,REPLIES%20\(3\),-Halothemes) if the Online Store Theme 2.0 is supported on your website.
  </Accordion>

  <Accordion title="What should I do if my current theme does not support Online Store Theme 2.0?">
    If your current theme does not support Online Store Theme 2.0, you have a few options:

    * Check if any version updates are available for your current theme that supports Online Store Theme 2.0.
    * Look for themes that explicitly mention compatibility with Online Store Theme 2.0.
    * Fill in the [integration support form](https://form.typeform.com/to/Ro3nJPzp) in case you are still facing issues with the integration.
  </Accordion>

  <Accordion title="What customisations are possible in the widget?">
    You can customise the following options:<br />

    * Offers <br />
    * Payment Methods <br />
    * Theme <br />
      Know more about the [customisation options](/docs/payments/payment-gateway/emi²/widget/shopify/customise).
  </Accordion>

  <Accordion title="Is the Affordability Widget compatible with all the free themes?">
    Yes, the Affordability Widget is compatible with all free themes.
  </Accordion>

  <Accordion title="What themes are compatible with the Razorpay Affordability Widget on the Shopify store?">
    To see the list of themes that are compatible with the Razorpay Affordability Widget on the Shopify store, refer to [Compatible Themes](/docs/payments/payment-gateway/emi²/widget/shopify#compatible-themes).
  </Accordion>
</AccordionGroup>

### Related Information

* [EMI² Suite FAQs](/docs/payments/payment-gateway/emi²/faqs)
* [About Affordability Widget](/docs/payments/payment-gateway/emi²/widget)