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

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

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

Примечание

Ниже представлено демо для 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`
`variant`	`detailed`
Цвет бейджа (split)
`color`	`primary`
`color`	`green`
`color`	`grey`
`color`	`transparent`
Вариант отображения бейджа (cashback)
`variant`	`default`
`variant`	`compact`
Цвет бейджа (cashback)
`color`	`primary`
`color`	`grey`
`color`	`transparent`
Уникальные параметры (ultimate)
`source`, `skuID`	Уникальное значение	Внешний вид бейджа уникален для каждого партнера

Шаг 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)
    )
)

Была ли статья полезна?

Кнопка Яндекс Пэй

Виджеты