Виджеты Яндекс Пэй

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

Посмотрите, какие виджеты имеются в арсенале Яндекс Пэй, и как внешний вид зависит от параметров.

Параметры виджета

Параметры виджета и их значения приведены в таблице:

Параметр	Значение	Внешний вид
Тема виджета
theme	WidgetTheme.Light
theme	WidgetTheme.Dark
Тип шапки
hideWidgetHeader	false (по умолчанию)
hideWidgetHeader	true
Фон виджета
background	WidgetBackground.Default (по умолчанию)
background	WidgetBackground.Saturated
background	WidgetBackground.Transparent
Обводка виджета
withOutline	true
withOutline	false (по умолчанию)
Радиус виджета
borderRadius	0px
borderRadius	20px (по умолчанию)
borderRadius	32px
Внутренний отступ
hasPadding	true (по умолчанию)
hasPadding	false
Размер виджета
size	ultimate-widgetize.SMALL
size	ultimate-widgetize.Medium (по умолчанию)
Кнопка «Оформить»
hasCheckoutButton	true
hasCheckoutButton	false (по умолчанию)

Модальные окна виджета

Работа с виджетом

Подключение в DOM

paymentSession.mountWidget(document.querySelector("<selector>"), {
    widgetType: YaPay.WidgetType.Ultimate,
});

Удаление из DOM

paymentSession.unmountWidget(document.querySelector("<selector>"));

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

Виджет принимает размеры контейнера, в который он встраивается. Но с помощью CSS стилей можно указать ширину контейнера виджета.

<style>
    .ya-pay-widget {
        width: 360px !important;
    }
</style>

Виджет оплаты только через Сплит

Вы можете указать в качестве способа оплаты только оплату через Сплит. В таком случае, если пользователю недоступна оплата через Сплит, виджет будет скрыт.

Чтобы включить режим оплаты только через Сплит, добавьте в PaymentData объект строку availablePaymentMethods со списком из одного метода оплаты 'SPLIT':

const paymentData = {
    // ... прочие параметры
    availablePaymentMethods: ["SPLIT"],
};

Логика отображения виджета

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

Пример расчета

Для клиента с лимитом Сплита 20 000 рублей стоимость покупки составила 28 600 рублей. При расчете Сплита на четыре платежа в рамках лимита сумма каждого платежа составит 5 000 рублей.

А так как превышающая лимит сумма составляет 28600 − 20000 = 8600 рублей, то, согласно логике отображения виджета, она будет добавлена к первому платежу. Таким образом, сумма, которую клиент должен будет оплатить в момент покупки в Сплит, составит 8600 + 5000 = 13600 рублей, как показано на рисунке.

Как мигрировать на новый виджет

При создании нового виджета мы старались сохранить названия и параметры для полей, которые использовались в других виджетах, чтобы миграция требовала минимальных затрат. Ниже можно посмотреть, какие изменения необходимо сделать для перехода на новый виджет.

paymentSession.mountWidget(document.querySelector("<selector>"), {
    widgetType: YaPay.WidgetType.Ultimate,
});

paymentSession.mountWidget(document.querySelector("<selector>"), {
    widgetType: YaPay.WidgetType.Ultimate,
});

paymentSession.mountWidget(document.querySelector("<selector>"), {
    widgetType: YaPay.WidgetType.Ultimate,
});