Customisation Options

Customise the Widget using Razorpay Affordability Widget.


After you successfully integrate the widget on your website, you can customise the following options:

  1. Offers.
    • Add additional Offers.
    • Show limited offers.
    • Remove Discount Amount on Offers.
    • Disable offers.
  2. Payment Methods (EMI, Cardless EMI and Pay Later).
    • Configure the list of providers for various payment methods.
    • Disable payment methods.
  3. Themes and Colours.
    • Customise the theme colour.
    • Change 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.

Watch Out!
Customisations on the widget are not applicable for Checkout.

1. Offers🔗

Configure the offers you want to display on the website based on your requirement. The customers can make a choice from a wide range of offers available for your product or service.

Handy Tips
By default all the Offers which are marked visible on the Dashboard during the offer creation will appear on the widget.

1.1 Additional Offers🔗

By default, all those offers which had the 'Show Offer on Checkout' option enabled during creation will appear on the widget.
You can display a particular offer that did not have the 'Show Offer on Checkout' option enabled using the following code:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "features": { "offers": { "list": [ "offer_ANZoaxsOww2X53" ] } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

features.offers

object Display a set of additional offers on the widget by passing the offer_id

list optional
array Display a list of offer_id of the offers.

1.2 Limited Offers🔗

By default, all those offers which had the 'Show Offer on Checkout' option enabled during the offer creation will appear on the widget. In case you want to display limited offers on the widget, enter the offer_id of the offers of your choice.
To show limited offers:

Copy{ "key": "YOUR_KEY_ID", "amount": 10000, "display": { "offers": { "offerIds": [ "offer_ANZoaxsOww2X53" ] } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.offers

object Display a set of limited offers.

offerIds optional
array Unique identifier of the offer.

1.3 Remove Discount Amount on Offers🔗

The exact amount of discount on offers is displayed to help new customers compare and choose your products over your competitors, giving you a foot in the door. This is a default setting. You can choose not to show the discount amount on offers as given below:

To remove the discount amount on offers:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "display": { "offers": { "showDiscount": false // default true } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.offers

object Display various offers on widget.

showDiscount optional
boolean Indicates whether the discount amount on offers should be displayed. Possible values:
  • true(default): Display the discount amount on offers.
  • false: Do not display the discount amount on offers.

1.4 Disable the Offers🔗

If you disable the offers completely, they will not appear on the widget and the customers will not be able to view them.
To completely disable the offers:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "display": { "offers": false } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display

object Display various offers on the widget.

offers optional
boolean Indicates whether the offers should be displayed. Possible values:
  • true (default): Display the offers on the widget.
  • false: Disable the offers on the widget.

2. Payment Methods🔗

Configure the payment methods you want to display on the website based on your requirement.

2.1 EMI🔗

Handy Tips
All EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable EMI options.

2.1.1 Limited Providers for EMI🔗

Razorpay supports these providers for EMI options. By default, all EMI options satisfying the minimum transaction amount will appear on the widget. In case you want to display limited EMI options on the widget, enter the list of provider codes based on your requirement.
To show a limited set of providers:

Copy{ "key": "YOUR_KEY_ID", "amount": 300000, "display": { "emi": { "issuers": [ "KKBK" ] } } }

Parameters🔗

key mandatory
string API Key ID generated from the Razorpay Dashboard.
amount mandatory
integer The amount to be paid by the customer in paise. For example, if the amount is ₹3000, enter 300000.
display.emi.issuers optional
array<string> List of limited set of providers for EMI options.

2.1.2 Disable EMI Options🔗

If you disable the EMI options completely, they will not appear on the widget and the customers will not be able to view them.
To completely disable EMI options:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "display": { "emi": false } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display

object Display different payment method options on the widget.

emi optional
boolean Indicates whether the EMI options should appear on the widget. Possible values:
  • true (default): Display the EMI options on the widget.
  • false: Disable the EMI options on the widget.

2.2 Cardless EMI🔗

Handy Tips
All Cardless EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable Cardless EMI options.

2.2.1 Limited providers for Cardless EMI🔗

Razorpay supports these providers for Cardless EMI options. By default, all Cardless EMI options satisfying the minimum transaction amount will appear on the widget. In case you want to display limited Cardless EMI options on the widget, enter the list of provider codes based on your requirement.
To show a limited set of providers:

Copy{ "key": "YOUR_KEY_ID", "amount": 300000, "display": { "cardlessEmi": { "providers": [ "zestmoney", "earlysalary" ] } } }

Parameters🔗

key mandatory
string API Key ID generated from the Razorpay Dashboard.
amount mandatory
integer The amount to be paid by the customer in paise. For example, if the amount is ₹3000, enter 300000.
display.cardlessEmi.providers optional
array<string> List of limited set of providers for Cardless EMI options.

2.2.2 Disable Cardless EMI Options🔗

If you disable the Cardless EMI options completely, they will not appear on the widget and the customers will not be able to view them.
To completely disable Cardless EMI options:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "display": { "cardlessEmi": false } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display

object Display different payment method options on the widget pages.

cardlessEmi optional
boolean Indicates whether the Cardless EMI options should appear on the widget. Possible values:
  • true (default): Display the Cardless EMI options on the widget.
  • false: Disable the Cardless EMI options on the widget.

2.3 Pay Later🔗

Handy Tips
All Pay Later options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹4000, the widget displays only the suitable Pay Later options.

2.3.1 Limited Providers for Pay Later🔗

Razorpay supports these providers for Pay Later options. By default, all Pay Later options satisfying the minimum transaction amount will appear on the widget. In case you want to display limited Pay Later options on the widget, enter the list of provider codes based on your requirement.
To show a limited set of providers:

Copy{ "key": "YOUR_KEY_ID", "amount": 10000, "display": { "paylater": { "providers": [ "lazypay" ] } } }

Parameters🔗

key mandatory
string API Key ID generated from the Razorpay Dashboard.
amount mandatory
integer The amount to be paid by the customer in paise. For example, if the amount is ₹100, enter 10000.
display.paylater.providers optional
array<string> List of limited set of providers for Pay Later options.

2.3.2 Disable Pay Later Options🔗

If you disable the Pay Later options completely, they will not appear on the widget and the customers will not be able to view them.
To completely disable Pay Later options:

Copy{ "key": "YOUR_KEY_ID", "amount": 10000, "display": { "paylater": false } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

integer The amount to be paid by the customer in paise. For example, if the amount is ₹100, enter 10000.

display

object Display different payment method options on the widget.

paylater optional
boolean Indicates whether the Pay Later options should appear on the widget. Possible values:
  • true (default): Display the Pay Later options on the widget.
  • false: Disable Pay Later options on the widget.

3. Themes and Colours🔗

Alter the appearance of the widget based on your website. Following are the customisations you can perform on the widget:

3.1 Customise the Theme Colour (Only Header)🔗

Customise the theme colour based on your requirement. For example, if the background colour of the header is black, you can change the colour to purple.

Handy Tips

  • The default theme colour (blue) set on the widget will be considered if no colour is passed here.
  • Only 6 character HEX code is supported.

To change the theme colour:

Copy{ "key": "YOUR_KEY_ID", "amount": 400000, "theme": { "color": "#800080" } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

theme

object Thematic options to modify the appearance of the header.

color optional
string Enter the HEX code of your choice to alter the appearance of the header.

3.2 Change Heading Colour and Font Size🔗

You can customise the colour and font size of the headings on the widget. For example, if the colour of the heading is black and the font size is 10px you can change the colour to blue and the font size to 12px.

Handy Tips
The default colour (black) and font size set on the widget will be considered if nothing is passed here.

To change the heading colour and font size:

Copy{ "key": "YOUR_KEY_ID", "amount": 10000, "display": { "widget": { "main": { "heading": { "color": "blue", "fontSize": "12px" } } } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.widget.main.heading

object Customise the heading on the widget.

color optional
string Enter the colour of your choice.
fontSize optional
string Enter the font size of your choice.

3.3 Change Content Colour and Font Size🔗

You can customise the colour and font size of the content on the widget. For example, if the colour of the content is grey and the font size is 10px you can change the colour to black and the font size to 12px.

Handy Tips
The default colour (black) and font size set on the widget will be considered if nothing is passed here.

To change the content colour and font size:

Copy{ "key": "YOUR_KEY_ID", "amount": 100000, "display": { "widget": { "main": { "content": { "color": "black", "fontSize": "12px" } } } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.widget.main.content

object Customise the content on the widget.

color optional
string Enter the colour of your choice.
fontSize optional
string Enter the font size of your choice.

You can customise the colour and font size of the link on the widget. For example, if the colour of the link is blue and the font size is 10px you can change the colour to black and the font size to 12px.

Handy Tips
The default colour (blue) and font size set on the widget will be considered if nothing is passed here.

To change the link colour and font size:

Copy{ "key": "YOUR_KEY_ID", "amount": 100000, "display": { "widget": { "main": { "link": { "color": "black", "fontSize": "12px" } } } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.widget.main.link

object Customise the link on the widget.

color optional
string Enter the colour of your choice.
fontSize optional
string Enter the font size of your choice.

You can customise the colour and font size of the footer on the widget. For example, if the colour of the footer is black and the font size is 10px you can change the colour to white and the font size to 12px.

Razorpay provides a customisation option for the logo in two variants:

  • Light
  • Dark (default)

Handy Tips
The default colour, font size and Razorpay logo set on the widget will be considered if nothing is passed here.

To change the footer colour, font size and logo:

Copy{ "key": "YOUR_KEY_ID", "amount": 100000, "display": { "widget": { "main": { "footer": { "color": "white", "fontSize": "12px", "darkLogo": false // true is default show black text rzp logo } } } } }

Parameters🔗

key mandatory

string API Key ID generated from the Razorpay Dashboard.

amount mandatory

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

display.widget.main.footer

object Customise the footer of the widget.

color optional
string Enter the colour of your choice.
fontSize optional
string Enter the font size of your choice.
darklogo optional
boolean Indicates the colour of the Razorpay logo. Possible values:
  • true (default): Display the default Razorpay logo on the widget.
  • false: Display Razorpay logo on dark mode enabled websites or websites with a darker background colour.
×