Бейджи

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

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

Пример бейджа

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

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

Примечание

Ultimate-бейдж — это улучшенная версия бейджа cashback.

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

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

Цвет бейджа Внешний вид
Белый Pay Ultimate white color
Зеленый Pay Ultimate green color
Красный Pay Ultimate red color

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

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

Примечание

Ниже представлено демо для WebSDK. Имейте в виду, что конечный вид бейджей для iOS может отличаться.

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

Важно

Все бейджи имеют фиксированное соотношение сторон, которое зависит от типа бейджа.

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

Примечание

Поддерживаемые версии: iOS 14.0 и выше. Перед тем, начать интеграцию бейджей, подключите и инициализируйте YandexPaySDK, см. Руководство по iOS SDK.

Бейджи поддерживают интеграцию как через UIKit, так и SwiftUI:

class YandexPaySDKApi {
...
    // Создание бейджа для UIKit
    func createBadgeView(model: YPBadgeModel) -> UIView

    // Создание бейджа для SwiftUI
    func createBadgeView(model: YPBadgeModel) -> some View
...
}

Шаг 1. Инициализируйте модель для описания бейджа YPBadgeModel и передайте ее в один из методов выше

public struct YPBadgeModel {

    // Сумма заказа
    public let amount: Decimal

    // Валюта заказа (используйте rub)
    public let currency: YPCurrencyCode

    // Тема для бейджа, можно использовать system
    public let theme: YPTheme

    // Выравнивание для бейджа: left, center, right
    public let align: Align

    // Тип бейджа: кешбэк или сплит
    public let type: BadgeType

    // HidingPolicy используется для выбора режима отображения бейджей
    // при отсутствии данных для отображения бейджа:
    // - gone (полностью пропадает),
    // - invisible (становится невидимым)
    public let hidingPolicy: HidingPolicy
}


public enum BadgeType {

    // Бейдж для отображения возможного платежа по сплиту
    case split(color: SplitColor, variant: SplitVariant)

    // Бейдж для отображения кешбэка за товар
    case cashback(color: CashbackColor, variant: CashbackVariant)

    // Бейдж уникального внешнего вида для каждого партнера с информацией о Сплите и кешбэке
    case ultimate(variant: UltimateVariant, payload: UltimatePayload?)
}

Поддерживаемые параметры бейджей:

Параметр Значение Внешний вид
Вариант отображения бейджа (split)
variant simple Pay Badge Simple
variant detailed Pay Badge Detailed
Цвет бейджа (split)
color primary Pay Badge Primary
color green Pay Badge Green
color grey Pay Badge Grey
color transparent Pay Badge Transparent
Вариант отображения бейджа (cashback)
variant default Pay Badge Default
variant compact Pay Badge Compact
Цвет бейджа (cashback)
color primary Pay Badge Primary
color grey Pay Badge Grey
color transparent Pay Badge Transparent
Вариант отображения бейджа (ultimate)
variant .default Pay Ultimate Default
variant .compact Pay Ultimate Compact
Цвет бейджа (ultimate)
Белый По умолчанию Pay Ultimate White
Зеленый Настраивается при интеграции Pay Ultimate Green
Красный Настраивается при интеграции Pay Ultimate Red
Дополнительные параметры (ultimate payload)
source Строка, например: "main", "listing", "item", "cart", "checkout", "other" Место размещения бейджа
skuID Строка Уникальный ID продукта для персонализации

Шаг 2. Запустите приложение и проверьте правильность отображения бейджей

В случае, если контейнер бейджа не помещается, уменьшите его размер. По умолчанию выберется режим скрытия .gone.

Примеры

Пример создания бейджа кешбэка для UIKit:

let cashbackBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 4555,
        currency: .rub,
        theme: .system,
        align: .left,
        type: .cashback(color: .primary, variant: .default),
        hidingPolicy: .invisible
    )
)

Пример создания бейджа сплита для UIKit:

let splitBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 4555,
        currency: .rub,
        theme: .system,
        align: .left,
        type: .split(color: .primary, variant: .detailed)
    )
)

Пример создания Ultimate-бейджа для UIKit:

let ultimateBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 1500,
        currency: .rub,
        theme: .system,
        align: .left,
        type: .ultimate(
            variant: .default,
            payload: YPBadgeModel.UltimatePayload(
                source: "item",
                skuID: "unique_product_id"
            )
        ),
        hidingPolicy: .invisible
    )
)

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

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

Шаг 1. Обновите тип бейджа в модели

Было:

let cashbackBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 4555,
        currency: .rub,
        theme: .system,
        align: .left,
        type: .cashback(color: .primary, variant: .default),
        hidingPolicy: .invisible
    )
)

Стало:

let ultimateBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 4555,
        currency: .rub,
        theme: .system,
        align: .left,
        type: .ultimate(
            variant: .default, // .default соответствует cashback .default
            payload: YPBadgeModel.UltimatePayload(
                source: "item",
                skuID: "unique_product_id"
            )
        ),
        hidingPolicy: .invisible
    )
)

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

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

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

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

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

Варианты отображения:

  • variant: .default — соответствует cashback .default (детальный вариант)
  • variant: .compact — соответствует cashback .compact (компактный вариант)

Дополнительные параметры для персонализации:

  • source — место размещения бейджа ("main", "listing", "item", "cart", "checkout", "other")
  • skuID — уникальный идентификатор товара для персонализации предложений
// Пример полной настройки ultimate-бейджа
let ultimateBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
    model: YPBadgeModel(
        amount: 1500,
        currency: .rub,
        theme: .system,
        align: .center,
        type: .ultimate(
            variant: .compact,
            payload: YPBadgeModel.UltimatePayload(
                source: "listing",
                skuID: "product_${productId}"
            )
        ),
        hidingPolicy: .gone
    )
)

Примечание

Ultimate-бейдж автоматически определяет наиболее подходящее предложение (кешбэк, скидка или акция) на основе пользовательских данных и настроек мерчанта.

Предыдущая
Кнопка Яндекс Пэй
Следующая
Виджеты