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 & 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 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.Widgetandroid: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.Widgetandroid: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.
After you successfully integrate the widget on your Android app, you can choose to
based on your requirement.Handy Tips
- Fill in the in case you are facing any issues with the integration.
- In case you have any queries, raise a ticket on the .
Was this page helpful?