---
metadata:
- name: generator
content: Diplodoc Platform v5.54.5
alternate:
- https://pay.yandex.ru/docs/ru/custom/web-sdk/ultimate-widget.md
- href: ru/custom/web-sdk/ultimate-widget.md
type: text/markdown
title: Markdown version
- href: ../../llms.txt
type: text/markdown
title: llms.txt
title: "Ultimate-виджет Яндекс\_Пэй\_— универсальный платежный виджет | Документация"
description: Мощный виджет для приема всех типов платежей. Полная кастомизация, адаптивный дизайн и простая интеграция на любой сайт.
---
> **Documentation Index:** Fetch the complete configuration index at https://pay.yandex.ru/docs/ru/llms.txt
# Виджеты Яндекс Пэй
{% note info %}
Вы находитесь в разделе, посвященном Web SDK. Если вы используете мобильные устройства, перейдите в соответствующий [раздел](https://pay.yandex.ru/docs/ru/custom/front-index.yaml).
{% endnote %}
## Интерактивное демо {#example}
Посмотрите, какие виджеты имеются в арсенале Яндекс Пэй, и как внешний вид зависит от параметров.
{% note warning %}
Внешний вид виджета Яндекс Пэй может меняться в зависимости от браузера, результата скоринга, авторизации на ya.ru или привязанной банковской карты.
{% endnote %}
## Параметры виджета {#options}
Параметры виджета и их значения приведены в таблице:
| **Параметр** | **Значение** | **Внешний вид** |
| --------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------- |
| **Тема виджета** | | |
| `theme` | `WidgetTheme.Light` | {width=640} |
| `theme` | `WidgetTheme.Dark` | {width=640} |
| **Тип шапки** | | |
| `hideWidgetHeader` | `false` (по умолчанию) | {width=640} |
| `hideWidgetHeader` | `true` | {width=640} |
| **Фон виджета** | | |
| `background` | `WidgetBackground.Default` (по умолчанию) | {width=640} |
| `background` | `WidgetBackground.Saturated` | {width=640} |
| `background` | `WidgetBackground.Transparent` | {width=640} |
| **Обводка виджета** | | |
| `withOutline` | `true` | {width=640} |
| `withOutline` | `false` (по умолчанию) | {width=640} |
| **Радиус виджета** | | |
| `borderRadius` | `0px` | {width=640} |
| `borderRadius` | `20px` (по умолчанию) | {width=640} |
| `borderRadius` | `32px` | {width=640} |
| **Внутренний отступ** | | |
| `hasPadding` | `true` (по умолчанию) | {width=640} |
| `hasPadding` | `false` | {width=640} |
| **Размер виджета** | | |
| `size` | `ultimate-widgetize.SMALL` | {width=640} |
| `size` | `ultimate-widgetize.Medium` (по умолчанию) | {width=640} |
| **Кнопка «Оформить»** | | |
| `hasCheckoutButton` | `true` | {width=640} |
| `hasCheckoutButton` | `false` (по умолчанию) | {width=640} |
## Модальные окна виджета
{% list tabs %}
- Модальное окно Плюса
{width=640x}
- Модальное окно Сплита
{width=640x}
{% endlist %}
## Работа с виджетом {#mount}
{% note warning %}
Перед перед началом работы [подключите SDK](https://pay.yandex.ru/docs/ru/custom/web-sdk/index.md#include-sdk).
{% endnote %}
**Подключение в DOM**
```javascript
paymentSession.mountWidget(document.querySelector(""), {
widgetType: YaPay.WidgetType.Ultimate,
});
```
**Удаление из DOM**
```javascript
paymentSession.unmountWidget(document.querySelector(""));
```
### Размеры виджета {#size}
Виджет принимает размеры контейнера, в который он встраивается.
Но с помощью CSS стилей можно указать ширину контейнера виджета.
{% note tip %}
В зависимости от наличия сопроводительных продуктов (оплата в рассрочку и т.д.), виджет может менять свою высоту.
По высоте виджет может занимать от `76px` до `364px`, учитывайте эту особенности при его установке.
{% endnote %}
```html
```
### Виджет оплаты только через Сплит {#split-only}
Вы можете указать в качестве способа оплаты только оплату через Сплит. В таком случае, если пользователю недоступна оплата через Сплит, виджет будет скрыт.
{% note tip %}
Скрытие виджета стоит учитывать при построении дизайна и верстки приложения.
{% endnote %}
Чтобы включить режим оплаты только через Сплит, добавьте в `PaymentData` объект строку `availablePaymentMethods` со списком из одного метода оплаты `'SPLIT'`:
```javascript
const paymentData = {
// ... прочие параметры
availablePaymentMethods: ["SPLIT"],
};
```
### Логика отображения виджета
Виджет автоматически рассчитывает и отображает суммы регулярных платежей на основании стоимости покупки и размера лимита Сплита клиента. При этом, если стоимость покупки превысит лимит Сплита, то сумма, на которую превышен лимит, будет добавлена к первому платежу.
#### Пример расчета
Для клиента с лимитом Сплита 20 000 рублей стоимость покупки составила 28 600 рублей. При расчете Сплита на четыре платежа в рамках лимита сумма каждого платежа составит 5 000 рублей.
А так как превышающая лимит сумма составляет **28600 − 20000 = 8600** рублей, то, согласно логике отображения виджета, она будет добавлена к первому платежу. Таким образом, сумма, которую клиент должен будет оплатить в момент покупки в Сплит, составит **8600 + 5000 = 13600** рублей, как показано на рисунке.
{width=400}
{% note info %}
Размер лимита Сплита может варьироваться в зависимости от результатов скоринга — оценки надежности клиента на основе его активности в сервисах Яндекса и других условий.
{% endnote %}
### Как мигрировать на новый виджет
При создании нового виджета мы старались сохранить названия и параметры для полей, которые использовались в других виджетах, чтобы миграция требовала минимальных затрат. Ниже можно посмотреть, какие изменения необходимо сделать для перехода на новый виджет.
{% cut "Миграция с BnplPreview" %}
Замените `widgetType` с `YaPay.WidgetType.BnplPreview` на `YaPay.WidgetType.Ultimate`.
Стартовая позиция должна выглядеть следующим образом:
```javascript
paymentSession.mountWidget(document.querySelector(""), {
widgetType: YaPay.WidgetType.Ultimate,
});
```
Больше информации о кастомизации можно увидеть в [интерактивном демо](#example)
{width=640x}
{% endcut %}
{% cut "Миграция с Simple" %}
Замените `widgetType` с `YaPay.WidgetType.Simple` на `YaPay.WidgetType.Ultimate`.
Стартовая позиция должна выглядеть следующим образом:
```javascript
paymentSession.mountWidget(document.querySelector(""), {
widgetType: YaPay.WidgetType.Ultimate,
});
```
Больше информации о кастомизации можно увидеть в [интерактивном демо](#example).
{width=640x}
{% endcut %}
{% cut "Миграция с Info" %}
Замените `widgetType` с `YaPay.WidgetType.Info` на `YaPay.WidgetType.Ultimate`.
Стартовая позиция должна выглядеть следующим образом:
```javascript
paymentSession.mountWidget(document.querySelector(""), {
widgetType: YaPay.WidgetType.Ultimate,
});
```
Больше информации о кастомизации можно увидеть в [интерактивном демо](#example).
{width=640x}
{% endcut %}