Виджет Плюса и Сплита

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

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

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

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

Параметр	Значение	Внешний вид
Тема виджета
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 (по умолчанию)

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

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

Передача корзины

Начиная с версии 4 платежной сессии можно передавать состав корзины для расчета предложений Ultimate Widget. Версия сессии задается полем version в данных платежа при вызове YaPay.createSession(). Укажите общую сумму заказа в totalAmount, а товары — в cart.items:

const paymentData = {
    env: YaPay.PaymentEnv.Sandbox,
    version: 4,
    currencyCode: YaPay.CurrencyCode.Rub,
    merchantId: '<MERCHANT_ID>',
    totalAmount: '15980.00',
    cart: {
        items: [
            {
                productId: '<PRODUCT_ID>',
                total: '15980.00',
            },
        ],
    },
};

const paymentSession = await YaPay.createSession(paymentData);

В поле productId передайте уникальный идентификатор товара у продавца, а в total — стоимость позиции с учетом количества. totalAmount остается итоговой суммой заказа для расчетов виджета.

Если состав корзины изменился, передайте актуальные cart и totalAmount через paymentSession.update():

paymentSession.update(() => ({
    totalAmount: '7990.00',
    cart: {
        items: [
            {
                productId: '<PRODUCT_ID>',
                total: '7990.00',
            },
        ],
    },
}));

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

Размещение виджета

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

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

Удаление из DOM

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

Ошибка запуска виджета

Чтобы обработать ошибку запуска Ultimate Widget, передайте onInitializationError в параметры mountWidget().

Если Web SDK не загрузился, вызвать onInitializationError невозможно. Обрабатывайте этот случай через событие error у тега script.

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

Виджет принимает размеры контейнера, в который он встраивается. Но с помощью 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,
});