Skip to main content
Available in🇮🇳 India
Find answers to the commonly asked questions about the Affordability Widget.

​
Generic

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.
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, Cardless EMI and Pay Later.
Follow the steps below to start the integration process:
  1. Create a Razorpay account.
  2. Follow the integration steps specific to your integration. It is that simple!
You can integrate the Affordability Widget with:
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.
The widget is available on Android but not on iOS SDK.
Yes, it is possible to integrate the widget on your website using WooCommerce and Shopify.
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.
Following are the features of the Affordability Widget:
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.

​
Native Website

You can customise the following options:
  • Offers
  • Payment Methods
  • Theme
Know more about the customisation options.
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.You can also disable EMI, Cardless EMI and Pay Later options on 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.
Checkout from Affordability Widget 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.
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. 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.
Checkout from widget
Handy TipsIf you have a custom-built checkout, integrate with Checkout from Widget using Custom Integration.
Watch Out!This is an on-demand feature. Write to us at affordability-widget@razorpay.com to get this feature enabled on your account.
No, the Checkout from Affordability Widget feature will not impact your website’s page load time.

​
WooCommerce

Follow the steps given below if you are integrating with our plugin for the first time:
  1. Log in to the WordPress account, navigate to WooCommerce → Settings and click the Payments tab. WooCommerce settings
  2. In the Payments tab, scroll down to Razorpay and click Manage to edit the settings. edit
  3. In the Plugin Settings, enter the Key ID and Key Secret generated from the Dashboard. Click Save Changes. API Keys
You can now follow the integration steps.
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.
  2. Create a Razorpay account and follow the integration steps.
  3. You can enable the widget from the Dashboard.
Follow the steps given below to test the widget:
  1. On the WordPress Dashboard hover over Razorpay WordPress and click Visit Store. Test widget
  2. Click on a product to view the widget. Preview
You can customise the following options:
  • Offers
  • Payment Methods
  • Theme
Know more about the customisation options.
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.
  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) Add URL to Never Cache URL(s) section
    2. Navigate to CDN in the left menu → Exclude files from CDN Add the URL to Exclude files from CDN
  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. Configure file optimization section
  6. Click SAVE CHANGES. The Affordability widget will appear again on your product page.

​
Shopify

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.
  2. Create a Razorpay account and perform the EMI² integration steps on your 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.
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.
Ensure your website’s theme version supports Online Store Theme 2.0. You can verify if the Online Store Theme 2.0 is supported on your website.
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 in case you are still facing issues with the integration.
You can customise the following options:
Yes, the Affordability Widget is compatible with all free themes.
To see the list of themes that are compatible with the Razorpay Affordability Widget on the Shopify store, refer to Compatible Themes.