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

Универсальный бейдж (ultimate)
Универсальный бейдж (ultimate) — это дебетовый бейдж, который отображает персонализированное предложение для пользователя, в том числе кешбэк или скидку. Бейдж также можно использовать для продвижения конкретного товара или услуги на сайте.
Примечание
Ultimate-бейдж — это улучшенная версия бейджа cashback
.
Виды бейджа | |
---|---|
Фиксированные проценты | ![]() |
Плавающие проценты | ![]() |
Абсолютное значение | ![]() |
Кешбэк | ![]() |
Бейдж может быть разного цвета:
Цвет бейджа | Внешний вид |
---|---|
Белый | ![]() |
Зеленый | ![]() |
Красный | ![]() |
При интеграции можно указать, какой цвет универсального бейджа будет основным. Обратитесь для этого в поддержку.
Интерактивное демо
Примечание
Ниже представлено демо для 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
...
}
YPBadgeModel
и передайте ее в один из методов выше
Шаг 1. Инициализируйте модель для описания бейджа 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 |
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)
)
)