Widget integration

Widgets are UI elements that inform users of the possibility to pay for a purchase in installments using Split or get cashback.

Note

Widgets are supported for Android 7.0 (API Level 24) or higher.

Step 1. Connect the library to your project

Open your project's gradle file, find the "dependencies" section, and add the com.yandex.pay:widget-info library dependency to it. We recommend using the most recent library version

dependencies{
    ...
    implementation "com.yandex.pay:widget-info:2.3.10"
    ...
}

Step 2. Place a widget to where you need in your markup

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your markup -->

    <com.yandex.pay.widgets.info.api.view.YPaySimpleWidgetView
        android:id="@+id/simpleWidgetView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Your markup -->

    <com.yandex.pay.widgets.info.api.view.YPayInfoWidgetView
        android:id="@+id/infoWidgetView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Warning

To make sure that information is displayed correctly, we recommend allocating the maximum possible width for widgets (at least 250 dp). Set the wrap_content value as the widget height. Please bear in mind that the height of widget may change depending on its contents.

Step 3. Initialize the inventory

Set the basic parameters required to run the inventory and widgets, such as:

// general inventory parameters:
YPayInventory.init {
    // your app's context:
    appContext = yourApplicationContext
    // your Merchant ID :
    merchantId = YPayMerchantId("")
    // PROD / SANDBOX network environment:
    environment = YPayNetworkEnvironment.PROD
}
// initializes widget components:
.widgets { }

Warning

The appContext and merchantId parameters are required. The environment parameter that defines the network environment is optional. If not specified, the PROD environment is used by default.

Use the following code to shut down the widget components correctly:

YPayInventory.clear()
    // deinitializes widget components:
    .widgets()

Step 4. Set the sum and visual parameters of widgets

SimpleWidget

Use the following methods for SimpleWidget setup:

// Order amount
simpleWidget.setSum(BigDecimal(10000))

// Widget data type: Split, cashback, or both options
simpleWidget.setTypes(EnumSet.of(WidgetType.SPLIT, WidgetType.CASHBACK))

// Widget theme: Light (WidgetTheme.LIGHT), or dark (WidgetTheme.DARK), or system (WidgetTheme.SYSTEM)
simpleWidget.setTheme(WidgetTheme.DARK)

// Transparency settings: Solid (WidgetStyle.SOLID) or transparent (WidgetStyle.TRANSPARENT)
simpleWidget.setStyle(WidgetStyle.SOLID)

You can also set up the widget layout using XML attributes:

<com.yandex.pay.widgets.info.api.view.YPaySimpleWidgetView
    android:id="@+id/simpleWidget"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:ypay_simple_widget_style="solid"
    app:ypay_simple_widget_theme="system"
    app:ypay_simple_widget_types="all" />

The widget parameters and their values are given in the table below:

Parameter Value Layout
Data type
type WidgetType.SPLIT, WidgetType.CASHBACK Simple Widget Type All
type WidgetType.SPLIT Simple Widget Type Split
type WidgetType.CASHBACK Simple Widget Type Cashback
Widget theme
theme WidgetTheme.LIGHT Simple Widget Theme Light
theme WidgetTheme.DARK Simple Widget Theme Dark
Widget transparency
style WidgetStyle.SOLID Simple Widget Style Solid
style WidgetStyle.TRANSPARENT Simple Widget Style Transparent

Note

To display the widget, call the setSum() method. Other parameters are set to defaults: any available WidgetType, WidgetTheme.SYSTEM, and WidgetStyle.SOLID.

InfoWidget

Use the following methods for InfoWidget setup:

// Order amount
infoWidget.setSum(BigDecimal(10000))

// Widget data type: Split, cashback, or both options
infoWidget.setTypes(EnumSet.of(WidgetType.SPLIT, WidgetType.CASHBACK))

// Widget theme: Light (WidgetTheme.LIGHT), or dark (WidgetTheme.DARK), or system (WidgetTheme.SYSTEM)
infoWidget.setTheme(WidgetTheme.DARK)

You can also set up the widget layout using XML attributes:

<com.yandex.pay.widgets.info.api.view.YPayInfoWidgetView
    android:id="@+id/infoWidget"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:ypay_info_widget_theme="system"
    app:ypay_info_widget_types="all" />

The widget parameters and their values are given in the table below:

Parameter Value Layout
Data type
type WidgetType.SPLIT, WidgetType.CASHBACK Simple Widget Type All
type WidgetType.SPLIT Simple Widget Type Split
type WidgetType.CASHBACK Simple Widget Type Cashback
Widget theme
theme WidgetTheme.LIGHT Simple Widget Theme Light
theme WidgetTheme.DARK Simple Widget Theme Dark

Note

To display the widget, call the setSum() method. Other parameters are set to defaults: any available WidgetType and WidgetTheme.SYSTEM.

Step 5. Run the app and check if the widgets are displayed correctly

Previous
Badges
Next
Migration to Yandex Pay 2.0