Бейджи

Что такое бейджи

Бейджи — небольшие элементы на карточке товара, которые содержат информацию о кешбэке баллами Плюса или платежах Яндекс Сплит. Рекомендуем размещать бейджи в каталоге товаров:

Универсальный бейдж (ultimate)

Универсальный бейдж (ultimate) — это дебетовый бейдж, который отображает персонализированное предложение для пользователя, в том числе кешбэк или скидку. Бейдж также можно использовать для продвижения конкретного товара или услуги в приложении.

Виды бейджа
Фиксированные проценты
Плавающие проценты
Абсолютное значение
Кешбэк

Бейдж может быть разного цвета:

Цвет бейджа	Внешний вид
Белый
Зеленый
Красный

При интеграции можно указать, какой цвет универсального бейджа будет основным. Обратитесь для этого в поддержку.

Интерактивное демо

Посмотрите, какие бейджи доступны и как внешний вид бейджа зависит от его параметров.

Интеграция бейджей

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

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

dependencies{
    ...
    implementation "com.yandex.pay:widget-badge:2.9.0"
    ...
}

Шаг 2. Разместите YPayBadgeView

Вставьте указанный код в нужное место вашей разметки.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

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

    <com.yandex.pay.widgets.badge.api.view.YPayBadgeView
        android:id="@+id/badgeView"
        android:layout_width="wrap_content"
        android:layout_height="24dp" />

</LinearLayout>

Алгоритм расчета размеров бейджа

Размеры бейджа определяются по правилам:

• Если высота установлена, то ширина рассчитывается автоматически с учетом соотношения сторон. При этом ширина, установленная в разметке, не учитывается.
• Если высота не установлена, но в разметке указана ширина, то высота рассчитывается автоматически с учетом соотношения сторон.
• В остальных случаях высота бейджа по умолчанию составит 24 dp. Если ограничение по высоте или ширине не позволит занять нужный размер, бейдж автоматически уменьшится до максимально допустимого.

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

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

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

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

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

Шаг 4. Установите параметры бейджа

1. Для установки суммы бейджа используйте метод setSum().

   badgeView.setSum(BigDecimal(10000))
   

2. Установить визуальные параметры BadgeRenderData вы можете двумя способами:

   Через метод setRenderData()

   Через атрибуты в XML

   badgeView.setRenderData(
       // Тип бейджа
       BadgeRenderData.SplitBadgeRenderData(
           // Тема бейджа
           theme = BadgeTheme.LIGHT,
           // Цвет бейджа
           color = SplitBadgeColor.PRIMARY,
           // Выравнивание бейджа относительно контейнера
           align = BadgeAlign.LEFT,
           // Версия бейджа, только для типа со Сплитом
           variant = SplitBadgeVariant.SIMPLE
       )
   )
   

   <com.yandex.pay.widgets.badge.api.view.YPayBadgeView
   android:id="@+id/badgeView"
   android:layout_width="wrap_content"
   android:layout_height="24dp"
   app:ypay_badge_type="split"
   app:ypay_badge_align="left"
   app:ypay_badge_split_color="green"
   app:ypay_badge_split_variant="simple"
   app:ypay_badge_theme="light" />
   

Вы можете использовать разные типы бейджа BadgeRenderData для кешбэка, Сплита и универсального бейджа:

Тип BadgeRenderData	Описание	Внешний вид
CashbackBadgeRenderData	Сконфигурирует бейдж с отображением кешбэка
UltimateBadgeRenderData	Сконфигурирует универсальный бейдж с персонализированными предложениями
SplitBadgeRenderData	Сконфигурирует бейдж с отображением Сплита

Примеры внешнего вида бейджа в зависимости от настроек визуальных параметров.

Параметр	Значение	Внешний вид
Тема бейджа
theme	BadgeTheme.LIGHT
theme	BadgeTheme.DARK
theme	BadgeTheme.SYSTEM
Цвет бейджа (при CashbackBadgeRenderData)
color	CashbackBadgeColor.PRIMARY
color	CashbackBadgeColor.GREY
color	CashbackBadgeColor.TRANSPARENT
Цвет бейджа (при SplitBadgeRenderData)
color	SplitBadgeColor.PRIMARY
color	SplitBadgeColor.GREEN
color	SplitBadgeColor.GREY
color	SplitBadgeColor.TRANSPARENT
Выравнивание бейджа относительно контейнера
align	BadgeAlign.LEFT
align	BadgeAlign.RIGHT
align	BadgeAlign.CENTER
Вариант отображения бейджа (при CashbackBadgeRenderData)
variant	CashbackBadgeVariant.SIMPLE
variant	CashbackBadgeVariant.DETAILED
Вариант отображения бейджа (при SplitBadgeRenderData)
variant	SplitBadgeVariant.SIMPLE
variant	SplitBadgeVariant.DETAILED
Вариант отображения бейджа (при UltimateBadgeRenderData)
variant	UltimateBadgeVariant.SIMPLE
variant	UltimateBadgeVariant.DETAILED
Цвет бейджа (ultimate)
Белый	По умолчанию
Зеленый	Настраивается при интеграции
Красный	Настраивается при интеграции

Дополнительные методы для Ultimate-бейджа

Для настройки Ultimate-бейджа доступны дополнительные методы:

// Установка источника размещения бейджа
badgeView.setSource("item") // "main", "listing", "item", "cart", "checkout", "other"

// Установка уникального ID товара для персонализации
badgeView.setSkuID("unique_product_id")

Пример значений для setSource():

• "main" — главная страница
• "listing" — страница каталога
• "item" — страница товара
• "cart" — корзина
• "checkout" — страница оформления заказа
• "other" — другое местоположение

Шаг 5. Проверьте работу приложения

Запустите приложение и проверьте правильность отображения бейджей. Если контейнер бейджа не помещается, уменьшите его размер.

Как перейти с cashback-бейджа на ultimate

Ultimate-бейдж предоставляет персонализированные предложения и расширенные возможности по сравнению с обычным cashback-бейджем. Для перехода с использования CashbackBadgeRenderData на ultimate-бейдж выполните следующие шаги:

Шаг 1. Обновите тип бейджа в настройках

Было:

badgeView.setRenderData(
    BadgeRenderData.CashbackBadgeRenderData(
        theme = BadgeTheme.LIGHT,
        color = CashbackBadgeColor.PRIMARY,
        align = BadgeAlign.LEFT,
        variant = CashbackBadgeVariant.DETAILED
    )
)

Стало:

badgeView.setRenderData(
    BadgeRenderData.UltimateBadgeRenderData(
        theme = BadgeTheme.LIGHT,
        align = BadgeAlign.LEFT,
        variant = UltimateBadgeVariant.DETAILED // Детальный вариант, можно использовать SIMPLE для компактного
    )
)
// Дополнительно для Ultimate-бейджа:
badgeView.setSource("item")
badgeView.setSkuID("unique_product_id")

Шаг 2. Обновите XML-атрибуты (если используются)

Было:

<com.yandex.pay.widgets.badge.api.view.YPayBadgeView
    android:id="@+id/badgeView"
    android:layout_width="wrap_content"
    android:layout_height="24dp"
    app:ypay_badge_type="cashback"
    app:ypay_badge_align="left"
    app:ypay_badge_cashback_color="primary"
    app:ypay_badge_cashback_variant="detailed"
    app:ypay_badge_theme="light" />

Стало:

<com.yandex.pay.widgets.badge.api.view.YPayBadgeView
    android:id="@+id/badgeView"
    android:layout_width="wrap_content"
    android:layout_height="24dp"
    app:ypay_badge_type="ultimate"
    app:ypay_badge_align="left"
    app:ypay_badge_ultimate_variant="detailed"
    app:ypay_badge_theme="light" />

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

Ultimate-бейдж не использует следующие параметры из cashback-бейджа:

• color — будут использоваться настроенные варианты бейджей по merchant‑id и source

Шаг 4. Добавьте новые параметры

Ultimate-бейдж дополнительные методы персонализации:

• setSource() — указывает место размещения бейджа ("main", "listing", "item", "cart", "checkout", "other")
• setSkuID() — уникальный идентификатор товара для персонализации предложений

// Пример полной настройки ultimate-бейджа
badgeView.setSum(BigDecimal(1500))
badgeView.setRenderData(
    BadgeRenderData.UltimateBadgeRenderData(
        theme = BadgeTheme.SYSTEM,
        align = BadgeAlign.CENTER,
        variant = UltimateBadgeVariant.SIMPLE
    )
)
badgeView.setSource("item")
badgeView.setSkuID("product_${productId}")