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

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

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

Универсальный бейдж (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)
source main, listing, item, cart, checkout, other
Уникальные параметры (ultimate)
sku-id Уникальный 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)
    )
)
Следующая