Интеграция виджетов

Виджеты — это элементы интерфейса, которые сообщают пользователю о возможности оплатить покупку в рассрочку через Сплит или получить кешбэк.

Примечание

Виджеты поддерживаются для Android версий 7.0 (API Level - 24) и выше.

Шаг 1. Подключите библиотеку к вашему проекту

Откройте gradle-файл вашего проекта, найдите раздел dependencies и добавьте туда зависимость на библиотеку com.yandex.pay:widget-info. Рекомендуется использовать наиболее актуальную версию библиотеки.

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

Шаг 2. Разместите виджет в нужном месте вашей разметки

SimpleWidget

InfoWidget

BnplPreviewWidget

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

    <!-- Ваша разметка -->

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

    <!-- Ваша разметка -->

    <com.yandex.pay.widgets.info.api.view.YPayInfoWidgetView
        android:id="@+id/infoWidgetView"
        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">

    <!-- Ваша разметка -->

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

</LinearLayout>

Важно

Чтобы информация отображалась корректно, рекомендуем предоставлять виджетам максимально доступную ширину (не менее 250 dp). В качестве высоты виджета следует указывать значение wrap_content. Следует учитывать, что высота виджета может меняться в зависимости от его содержимого.

Шаг 3. Инициализируйте инвентарь

Укажите основные параметры, необходимые для работы инвентаря и виджетов в частности:

// общие параметры инвентаря:
YPayInventory.init {
    // контекст вашего приложения:
    appContext = yourApplicationContext
    // ваш Merchant ID :
    merchantId = YPayMerchantId("")
    // вариант сетевого окружения PROD / SANDBOX:
    environment = YPayNetworkEnvironment.PROD
}
// инициализация компонентов виджетов:
.widgets { }

Важно

Параметры appContext и merchantId являются обязательными. Параметр environment, определяющий сетевое окружение, может быть пропущен. В этом случае будет использовано PROD-окружение.

Для корректного завершения работы с компонентами виджетов, используйте следующий код:

YPayInventory.clear()
    // деинициализация компонентов виджетов:
    .widgets()

Шаг 4. Установите сумму и визуальные параметры виджетов

SimpleWidget

Для настройки SimpleWidget используйте следующие методы:

// Сумма заказа
simpleWidget.setSum(BigDecimal(10000))

// Тип данных в виджете: Сплит, кешбэк или оба варианта
simpleWidget.setTypes(EnumSet.of(WidgetType.SPLIT, WidgetType.CASHBACK))

// Тема виджета: светлая (WidgetTheme.LIGHT), или темная (WidgetTheme.DARK), или системная (WidgetTheme.SYSTEM)
simpleWidget.setTheme(WidgetTheme.DARK)

// Настройки прозрачности: сплошной (WidgetStyle.SOLID) или прозрачный (WidgetStyle.TRANSPARENT)
simpleWidget.setStyle(WidgetStyle.SOLID)

Для настройки внешнего вида виджета можно также использовать атрибуты в 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" />

Параметры виджета и их значения приведены в таблице:

Параметр	Значение	Внешний вид
Тип данных
`type`	`WidgetType.SPLIT, WidgetType.CASHBACK`
`type`	`WidgetType.SPLIT`
`type`	`WidgetType.CASHBACK`
Тема виджета
`theme`	`WidgetTheme.LIGHT`
`theme`	`WidgetTheme.DARK`
Прозрачность виджета
`style`	`WidgetStyle.SOLID`
`style`	`WidgetStyle.TRANSPARENT`

Примечание

Для отображения виджета необходимо вызвать метод setSum(). Остальные параметры имеют значения по умолчанию: все доступные WidgetType, WidgetTheme.SYSTEM и WidgetStyle.SOLID.

InfoWidget

Для настройки InfoWidget используйте следующие методы:

// Сумма заказа
infoWidget.setSum(BigDecimal(10000))

// Тип данных в виджете: Сплит, кешбэк или оба варианта
infoWidget.setTypes(EnumSet.of(WidgetType.SPLIT, WidgetType.CASHBACK))

// Тема виджета: светлая (WidgetTheme.LIGHT), или темная (WidgetTheme.DARK), или системная (WidgetTheme.SYSTEM)
infoWidget.setTheme(WidgetTheme.DARK)

Для настройки внешнего вида виджета можно также использовать атрибуты в 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" />

Параметры виджета и их значения приведены в таблице:

Параметр	Значение	Внешний вид
Тип данных
`type`	`WidgetType.SPLIT, WidgetType.CASHBACK`
`type`	`WidgetType.SPLIT`
`type`	`WidgetType.CASHBACK`
Тема виджета
`theme`	`WidgetTheme.LIGHT`
`theme`	`WidgetTheme.DARK`

Примечание

Для отображения виджета необходимо вызвать метод setSum(). Остальные параметры имеют значения по умолчанию: все доступные WidgetType и WidgetTheme.SYSTEM.

BnplPreviewWidget

Для настройки BnplPreviewWidget используйте следующие методы:

// Сумма заказа
bnplPreviewWidget.setSum(BigDecimal(10000))

// Тема виджета: светлая (WidgetTheme.LIGHT), темная (WidgetTheme.DARK) или системная (WidgetTheme.SYSTEM)
bnplPreviewWidget.setTheme(WidgetTheme.DARK)

// Тип отображения шапки виджета: стандартный (WidgetHeader.STANDARD) или уменьшенный (WidgetHeader.MINIFIED)
bnplPreviewWidget.setHeader(WidgetHeader.STANDARD)

// Фон виджета: стандартный (WidgetBackground.STANDARD), прозрачный (WidgetBackground.TRANSPARENT) или произвольный (WidgetBackground.CUSTOM)
bnplPreviewWidget.setBackground(WidgetBackground.CUSTOM)

// Цвет фона виджета (при установленном WidgetBackground.CUSTOM)
bnplPreviewWidget.setBackgroundColor(0x000000)

// Наличие обводки виджета
bnplPreviewWidget.setHasOutline(true)

// Радиус виджета в пикселях
bnplPreviewWidget.setRadius(90f)

// Наличие внутреннего отступа виджета
bnplPreviewWidget.setHasPadding(true)

// Размер виджета: средний (WidgetSize.MEDIUM) или маленький (WidgetSize.SMALL)
bnplPreviewWidget.setSize(WidgetSize.SMALL)

// Наличие кнопки «Оформить»
bnplPreviewWidget.setHasCheckoutButton(true)

// Слушатель клика по кнопке «Оформить» (параметр selectedPlan содержит количество месяцев выбранного плана Сплита)
bnplPreviewWidget.setCheckoutButtonClickListener { selectedPlan: Int ->
    // Переход на экран оплаты
}

// Слушатель клика по шапке виджета (при установленном WidgetHeader.STANDARD)
bnplPreviewWidget.setHeaderClickListener {
    // Показ информации об оплате частями
}

Для настройки внешнего вида виджета можно также использовать атрибуты в XML:

<com.yandex.pay.widgets.info.api.view.YPayBnplPreviewWidgetView
    android:id="@+id/bnplPreviewWidget"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:ypay_bnpl_preview_widget_theme="dark"
    app:ypay_bnpl_preview_widget_header="standard"
    app:ypay_bnpl_preview_widget_background="custom"
    app:ypay_bnpl_preview_widget_background_color="#000000"
    app:ypay_bnpl_preview_widget_has_outline="true"
    app:ypay_bnpl_preview_widget_radius="30dp"
    app:ypay_bnpl_preview_widget_has_padding="true"
    app:ypay_bnpl_preview_widget_size="small"
    app:ypay_bnpl_preview_widget_has_checkout_button="true" />

Параметры виджета и их значения приведены в таблице:

Параметр	Значение	Внешний вид
Тема виджета
`theme`	`WidgetTheme.LIGHT`
`theme`	`WidgetTheme.DARK`
`theme`	`WidgetTheme.SYSTEM` (по умолчанию)
Тип шапки
`header`	`WidgetHeader.STANDARD` (по умолчанию)
`header`	`WidgetHeader.MINIFIED`
Фон виджета
`background`	`WidgetBackground.STANDARD` (по умолчанию)
`background`	`WidgetBackground.TRANSPARENT`
`background`	`WidgetBackground.CUSTOM`
Обводка виджета
`hasOutline`	`true`
`hasOutline`	`false` (по умолчанию)
Радиус виджета
`radius`	`0dp`
`radius`	`20dp` (по умолчанию)
`radius`	`32dp`
Внутренний отступ
`hasPadding`	`true` (по умолчанию)
`hasPadding`	`false`
Размер виджета
`size`	`WidgetSize.SMALL`
`size`	`WidgetSize.MEDIUM` (по умолчанию)
Кнопка «Оформить»
`hasCheckoutButton`	`true`
`hasCheckoutButton`	`false` (по умолчанию)