Integrate Affordability Widget With Android App

Integrate the Razorpay Affordability Widget on your Android application to spread awareness about the affordability-based payment options pre-checkout.


Integrate the Affordability Widget with your Android app to influence your customers' purchase decisions before they reach checkout by displaying various affordable payment options and offers.

  • Create a .
  • Generate the from the by navigating to Account & SettingsWebsite and app settingsAPI keys.
  • You can use the Test Mode keys to test the integration and preview the Widget. Later, switch to Live Mode of the Razorpay Dashboard, generate the and replace it with the test keys.

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

Add the Affordability Widget dependency to your app's build.gradle file in the dependencies section.

dependencies {
implementation 'com.razorpay:affordability-widget:1.0.0'//maven repo link
}

You can integrate the widget statically (via XML) or dynamically (via class and objects) as per your project requirement.

Use the code given below to define the com.razorpay.affordability.Widget layout in XML:

<com.razorpay.affordability.Widget
android:id="@+id/web_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

Handy Tips

You must add a frame layout if you want to use the widget without the parent layout in XML:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.razorpay.affordability.Widget
android:id="@+id/web_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</FrameLayout>

Use the code given below to define the com.razorpay.affordability.Widget layout in the class file:

Widget widget = new Widget(this);

Handy Tips

You must add a frame layout if you want to use the widget without the parent layout to create Widget:

Widget widget = new Widget(this);
FrameLayout frameLayout = new FrameLayout(this);
frameLayout.addView(widget);

Call the render() method to render the widget. Add the context, test key id generated from the Razorpay Dashboard and amount (in paise).

JSONObject widgetConfig = new JSONObject(
"{" +
"\"key\": \"YOUR_KEY_ID\"," + // Enter your Test Key ID generated from the Dashboard
"\"amount\": 400000," +
"\"currency\": \"INR\"" +
"}"
);
widget.render(this, widgetConfig);

Watch Out!

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

You have successfully integrated the Affordability Widget with your Android application.

If you are using Proguard for your builds, you must add the following lines to your proguard-rules.pro file:

-keepclassmembers class * {
@android.webkit.JavascriptInterface <methods>;
}
-keepattributes JavascriptInterface
-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** { *; }
-optimizations !method/inlining/*

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

.

Here is a glimpse of the default widget with enabled offers and payment method options.

Glimpse of the default widget

After you successfully integrate the widget on your Android app, you can choose to

based on your requirement.

Handy Tips


Was this page helpful?