Виджеты

Виджет — это элемент интерфейса, который сообщает пользователю о возможности рассрочки и кешбэка, помогая увеличить конверсию. В SDK для iOS реализованы виджеты трех типов:

  • Item-виджет
  • Checkout-виджет
  • BNPL-виджет

Item-виджет

Внешний вид по умолчанию

image

По умолчанию содержит в себе два блока: Сплит и баллы Плюса. На каждый блок можно нажать и перейти на страницу соответствующего лендинга с более подробной информацией о продуктах Сплита и Плюса.

Сплит Плюс
image image

Виджет умеет сжиматься по ширине, но его минимальная ширина — 280 points. Мы рекомендуем давать возможность виджету растянуться на всю ширину экрана (без учета отступов). Ограничивать виджет по высоте мы настоятельно не рекомендуем, так как он определяет свою высоту самостоятельно.

Пример создания Item-виджета

YandexPaySDKApi.instance.createItemWidgetView(
  model: YPItemWidgetModel(amount: 1000),
  presentationContextProvider: provider
)

где provider — сущность, подписанная под протокол YPPresentationContextProviding.

Внешний вид Item-виджета можно конфигурировать с помощью модели YPItemWidgetModel:

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

  // Валюта заказа
  public let currency: YPCurrencyCode

  // Стиль виджета: кешбэк, сплит или сплит+
  public let style: Style

  // Внешний вид: темный или светлый стиль, прозрачность
  public let appearance: Appearance
}

Конфигурация Item-виджетов

Параметры и значения

Внешний вид

 
amount = 1000
currency = .rub
style = .fullSize
appearance = .init(theme: .light, isTransparent: false)

widgets_ios_item_full_light

 
amount = 1000
currency = .rub
style = .split
appearance = .init(theme: .light, isTransparent: false)

widgets_ios_item_split_light

 
amount = 1000
currency = .rub
style = .cashback
appearance = .init(theme: .light, isTransparent: false)

widgets_ios_item_plus_light

 
amount = 1000
currency = .rub
style = .fullSize
appearance = .init(theme: .light, isTransparent: true)

widgets_ios_item_full_light_transp

 
amount = 1000
currency = .rub
style = .split
appearance = .init(theme: .light, isTransparent: true)

widgets_ios_item_split_light_transp

 
amount = 1000
currency = .rub
style = .cashback
appearance = .init(theme: .light, isTransparent: true)

widgets_ios_item_plus_light_transp

 
amount = 1000
currency = .rub
style = .fullSize
appearance = .init(theme: .dark, isTransparent: false)

widgets_ios_item_full_dark

 
amount = 1000
currency = .rub
style = .split
appearance = .init(theme: .dark, isTransparent: false)

widgets_ios_item_split_dark

 
amount = 1000
currency = .rub
style = .cashback
appearance = .init(theme: .dark, isTransparent: false)

widgets_ios_item_plus_dark

 
amount = 1000
currency = .rub
style = .fullSize
appearance = .init(theme: .dark, isTransparent: true)

widgets_ios_item_full_dark_transp

 
amount = 1000
currency = .rub
style = .split
appearance = .init(theme: .dark, isTransparent: true)

widgets_ios_item_split_dark_transp

 
amount = 1000
currency = .rub
style = .cashback
appearance = .init(theme: .dark, isTransparent: true)

widgets_ios_item_plus_dark_transp

YPPresentationContextProviding содержит в себе метод anchorForPresentation(), который требует предоставить контекст, в котором будут презентоваться экраны лендинга. Вы можете передать следующие виды контекста:

  • .viewController(UIViewController) — контроллер, поверх которого будут презентоваться лендинг;
  • .window(UIWindow) — окно, у которого лендинг будет презентовать поверх самого высокого в иерархии контроллера;
  • .keyWindow — текущее keyWindow, у которого лендинг будет презентовать поверх самого высокого в иерархии контроллера.

Checkout-виджет

Внешний вид по умолчанию

image

По умолчанию содержит в себе три секции: баллы Плюса, BNPL-план Сплита и информацию об оплате без первоначального взноса.

Checkout-виджет имеет минимальную ширину 280 points, но желательно дать ему возможность растянуться на всю ширину экрана. По высоте также не стоит ограничивать.

Пример создания Checkout-виджета

YandexPaySDKApi.instance.createCheckoutWidgetView(
  model: YPCheckoutWidgetModel(amount: 1000)
)

Внешний вид Checkout-виджета можно конфигурировать с помощью модели YPCheckoutWidgetModel:

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

  // Валюта заказа
  public let currency: YPCurrencyCode

  // Стиль виджета: кешбэк, bnpl сплит + кредитный сплит, кешбэк + bnpl сплит + кредитный сплит
  public let style: Style

  // Внешний вид: темный или светлый стиль
  public let appearance: Appearance
}

Конфигурация Checkout-виджетов

Параметры и значения

Внешний вид

 
amount = 1000
currency = .rub
style = .fullBox
appearance = .init(theme: .light)

widgets_ios_checkout_full_light

 
amount = 1000
currency = .rub
style = .splitOnly
appearance = .init(theme: .light)

widgets_ios_checkout_split_light

 
amount = 1000
currency = .rub
style = .cashbackOnly
appearance = .init(theme: .light)

widgets_ios_checkout_plus_light

 
amount = 1000
currency = .rub
style = .fullBox
appearance = .init(theme: .dark)

widgets_ios_checkout_full_dark

 
amount = 1000
currency = .rub
style = .splitOnly
appearance = .init(theme: .dark)

widgets_ios_checkout_split_dark

 
amount = 1000
currency = .rub
style = .cashbackOnly
appearance = .init(theme: .dark)

widgets_ios_checkout_plus_dark

BNPL-виджет

Внешний вид

image

Кастомизируемый BNPL-виджет позволяет предварительно ознакомиться с условиями доступных некредитных планов Сплит и выбрать подходящий.

Виджет состоит из четырех частей:

  • Кликабельная шапка с логотипом Сплит и краткой информацией о платежах и комиссии выбранного плана;
  • Селектор планов (отображается, если пользователю доступно более одного плана Сплита);
  • Информация о платежах по датам;
  • Кнопка «Оформить» (по умолчанию скрыта).

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

Пример создания BNPL-виджета

YandexPaySDKApi.instance.createBnplPreviewWidgetView(
  model: YPBnplPreviewWidgetModel(
    amount: 1000
  ),
  presentationContextProvider: provider
)

где provider — сущность, подписанная под протокол YPPresentationContextProviding.

Внешний вид BNPL-виджета можно конфигурировать с помощью модели YPBnplPreviewWidgetModel:

public struct YPBnplPreviewWidgetModel {
  // Сумма заказа
  public let amount: Decimal
  
  // Валюта заказа
  public let currency: YPCurrencyCode
  
  // Внешний вид виджета
  public let appearance: Appearance
  
  // Внешний вид шапки
  public var header: HeaderStyle
}

Конфигурация BNPL-виджетов

Свойство YPBnplPreviewWidgetModel.Appearance

Внешний вид

Тема виджета: Системная/Светлая/Темная:

theme: YPTheme = .system

public enum YPTheme {
  // Светлая тема
  case light

  // Темная тема
  case dark

  // Системная тема
  case system
}

Примеры виджета в светлой и темной теме:

widgets_ios_bnpl_light widgets_ios_bnpl_dark

Радиус скругления боковых краев виджета от 0 до 32 points:

radius: CGFloat = 20

Изменения радиуса недоступно при отключенном padding — всегда 0 points.

Радиус 0pt:

widgets_ios_bnpl_radius_0

Радиус 32pt:

widgets_ios_bnpl_radius_32

Наличие обводки:

hasOutline: Bool = false

Пример прозрачного виджета с границей:

widgets_ios_bnpl_has_outline

Без границы:

widgets_ios_bnpl_no_outline

Наличие отступов:

hasPadding: true

Пример виджета с отключенным padding:

widgets_ios_bnpl_no_padding

Наличие кнопки «Оформить»:

hasCheckoutButton: Bool = true

Свойство отвечает только за отображение кнопки. Чтобы настроить кнопку, добавьте делегат.

Пример виджета с кнопкой «Оформить»: widgets_ios_bnpl_checkout_button

Фон виджета:

background: Background = .default

public enum Background {
  // Прозрачный виджет
  case transparent

  // Виджет с фоном по умолчанию
  case `default`

  // Кастомный фон
  case custom(Color)
}

Пример виджета с кастомным фоном:

.custom(.white)
widgets_ios_bnpl_custom_background

Размер виджета:

size: WidgetSize = .medium

public enum WidgetSize {
  // Средний
  case medium

  // Маленький
  case small
}

Пример виджета .medium:

widgets_ios_bnpl_version_m

Виджет .small:

widgets_ios_bnpl_version_s

Настройка шапки BNPL-виджета

Стиль шапки виджета настраивается в конструкторе YPBnplPreviewWidgetModel:

header: HeaderStyle = .standard

public enum HeaderStyle {
  case minified

  case standard

  case standardWithCustomAction
}

Можно указать одно из трех значений: .standard, .minified и .standardWithCustomAction.

.standard

Классическая шапка виджета по умолчанию. При нажатии на шапку открывается всплывающее окно с подробным описанием выбранного плана Сплит.

Рекомендуем использовать этот вариант.

widgets_ios_bnpl_version_s widgets_ios_bnpl_landing_screen

.minified

Некликабельная уменьшенная шапка виджета.

widgets_ios_bnpl_minified_huge widgets_ios_bnpl_minified_tiny

.standardWithCustomAction

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

Для того, чтобы обработать нажатие пользователя по шапке виджета:

  1. При создании виджета в модели укажите параметр:

    header: .standardWithCustomAction

  2. Укажите объект delegate, который реализует протокол YandexPayBnplPreviewWidgetDelegate и переопределяет метод.

    func onYandexPayHeaderClick()

Пример создания виджета с переопределенным заголовком:

YandexPaySDKApi.instance.createBnplPreviewWidgetView(
  model: YPBnplPreviewWidgetModel(
    amount: 1000,
    header: .standardWithCustomAction
  ),
  presentationContextProvider: provider,
  delegate: CustomDelegate()
)

class CustomDelegate: YandexPayBnplPreviewWidgetDelegate {
  func onYandexPayHeaderClick() {
    print("User tapped on a header")
  }
}

Конфигурация кнопки «Оформить»

Чтобы добавить в виджет кнопку «Оформить»:

  1. В конфигурации appearance укажите hasCheckoutButton: true.
  2. Укажите объект delegate, который реализует протокол YandexPayBnplPreviewWidgetDelegate и переопределяет метод.
func onYandexPayCheckoutButtonClick(data: YandexPaySDK.YandexPayBnplPreviewWidgetData)

public struct YandexPayBnplPreviewWidgetData {
  // Количество месяцев в плане, который выбрал пользователь.
  public let splitMonthCount: Int
}

Пример создания виджета с кнопкой «Оформить»:

YandexPaySDKApi.instance.createBnplPreviewWidgetView(
  model: YPBnplPreviewWidgetModel(
      amount: 1000,
      appearance: .init(hasCheckoutButton: true)
  ),
  presentationContextProvider: provider,
  delegate: CustomDelegate()
)

class CustomDelegate: YandexPayBnplPreviewWidgetDelegate {
  func onYandexPayCheckoutButtonClick(data: YandexPaySDK.YandexPayBnplPreviewWidgetData) {
    print("Split for \(data.splitMonthCount) months was chosen by the user")
  }
}
Предыдущая
Бейджи
Следующая
Отладка Universal Link