---
metadata:
  - name: generator
    content: Diplodoc Platform v5.55.3
alternate:
  - https://pay.yandex.ru/docs/en/custom/android-sdk/inventory/widgets.md
  - href: en/custom/android-sdk/inventory/widgets.md
    type: text/markdown
    title: Markdown version
  - href: ../../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://pay.yandex.ru/docs/en/llms.txt

# Widget integration

[Widgets](https://pay.yandex.ru/docs/en/custom/android-sdk/inventory/overview.md#widgets) are UI elements that inform users of the possibility to pay for a purchase in installments using Split or get cashback.

{% note info %}

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

{% endnote %}

## 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](https://mvnrepository.com/artifact/com.yandex.pay/widget-info) library dependency to it. We recommend using the most recent library version

```Gradle
dependencies{
    ...
    implementation "com.yandex.pay:widget-info:2.6.0"
    ...
}
```

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

{% list tabs %}

- SimpleWidget

   ```XML
   <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>
   ```

- InfoWidget

   ```XML
   <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>
   ```

{% endlist %}

{% note 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.

{% endnote %}

## Step 3. Initialize the inventory

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

```Kotlin
// 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 { }
```

{% note 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.

{% endnote %}

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

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

## Step 4. Set the sum and visual parameters of widgets

### SimpleWidget

Use the following methods for SimpleWidget setup:

```Kotlin
// 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:

```XML
<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](./_assets/widgets/simple_both_light_solid.png =640x) |
| `type` | `WidgetType.SPLIT` | ![Simple Widget Type Split](./_assets/widgets/simple_split_light_solid.png =640x) |
| `type` | `WidgetType.CASHBACK` | ![Simple Widget Type Cashback](./_assets/widgets/simple_both_light_solid.png =640x) |
| **Widget theme** | | |
| `theme` | `WidgetTheme.LIGHT` | ![Simple Widget Theme Light](./_assets/widgets/simple_both_light_solid.png =640x) |
| `theme` | `WidgetTheme.DARK` | ![Simple Widget Theme Dark](./_assets/widgets/simple_both_dark_solid.png =640x) |
| **Widget transparency** | |                                                                           |
| `style` | `WidgetStyle.SOLID` | ![Simple Widget Style Solid](./_assets/widgets/simple_both_light_solid.png =640x) |
| `style` | `WidgetStyle.TRANSPARENT` | ![Simple Widget Style Transparent](./_assets/widgets/simple_both_light_transparent.png =640x) |

{% note info %}

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

{% endnote %}

### InfoWidget

Use the following methods for InfoWidget setup:

```Kotlin
// 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:

```XML
<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](./_assets/widgets/info_both_light.png =640x) |
| `type` | `WidgetType.SPLIT` | ![Simple Widget Type Split](./_assets/widgets/info_split_light.png =640x) |
| `type` | `WidgetType.CASHBACK` | ![Simple Widget Type Cashback](./_assets/widgets/info_cashback_light.png =640x) |
| **Widget theme** | |                                                                                               |
| `theme` | `WidgetTheme.LIGHT` | ![Simple Widget Theme Light](./_assets/widgets/info_both_light.png =640x) |
| `theme` | `WidgetTheme.DARK` | ![Simple Widget Theme Dark](./_assets/widgets/info_both_dark.png =640x) |

{% note info %}

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

{% endnote %}

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