Integrate Affordability Widget With Android App

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

Available in🇮🇳 India

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.

Prerequisites

• Create a Razorpay account.
• Generate the API keys from the Dashboard 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 Dashboard, generate the Live API keys and replace it with the test keys.

Integration Steps

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

1. Add Dependency in Build Gradle File
2. Integrate the Widget
   • Static Integration
   • Dynamic Integration
3. Render the Widget

Step 1: Add Dependency in Build Gradle File

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
}

Step 2: Integrate the Widget

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

Static Integration

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>

Dynamic Integration

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

Java

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:

Java

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

Step 3: Render the Widget

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

Java

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.

Proguard Rules

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

Switch to Live Mode

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 live API keys.

Successful Activation

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

Next Steps

After you successfully integrate the widget on your Android app, you can choose to customise the widget based on your requirement.

Handy Tips

• Fill in the integration support form in case you are facing any issues with the integration.
• In case you have any queries, raise a ticket on the Razorpay Support Portal.

Related Information

• Affordability Widget
• Affordability Widget FAQs