Integrate Affordability Widget With Android App

Prerequisites

• Create a

  Razorpay account

  .
• Generate the

  API keys

  from the

  Razorpay 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 Razorpay 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"
/>

<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:

Widget widget = new Widget(this);

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 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);

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

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

Related Information

• Affordability Widget

• Affordability Widget FAQs