Что такое бейджи
Бейджи — небольшие элементы интерфейса, которые содержат информацию о кешбэке Плюса или платежах Яндекс Сплит. Рекомендуем размещать бейджи в каталоге товаров:
Интерактивное демо
Примечание
Ниже представлено демо для 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
}
public enum BadgeType {
// Бейдж для отображения возможного платежа по сплиту
case split(color: SplitColor, variant: SplitVariant)
// Бейдж для отображения кешбэка за товар
case cashback(color: CashbackColor, variant: CashbackVariant)
}
Поддерживаемые параметры бейджей:
| Параметр | Значение | Внешний вид |
|---|---|---|
| Вариант отображения бейджа (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 |
 |
Шаг 2. Запустите приложение и проверьте правильность отображения бейджей
В случае, если контейнер бейджа не помещается, уменьшите его размер.
Примеры
Пример создания бейджа кешбэка для UIKit:
let cashbackBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
model: YPBadgeModel(
amount: 4555,
currency: .rub,
theme: .system,
align: .left,
type: .cashback(color: .primary, variant: .default)
)
)
Пример создания бейджа сплита для UIKit:
let splitBadgeView: UIView = YandexPaySDKApi.instance.createBadgeView(
model: YPBadgeModel(
amount: 4555,
currency: .rub,
theme: .system,
align: .left,
type: .split(color: .primary, variant: .detailed)
)
)