В этом справочнике описаны:
- Параметры, которые передаются при инициализации виджета;
- Ошибки, связанные с инициализацией виджета;
- Методы виджета;
- События виджета.
Описание параметров, которые необходимо передать в экземпляр класса
YooMoneyCheckoutWidget на странице оплаты для инициализации виджета.| Параметр | Тип | Обязательность | Описание |
|---|---|---|---|
| confirmation_token | string | Обязательный | Токен ЮKassa для инициализации виджета. Чтобы получить токен, нужно создать платеж |
| return_url | string | Необязательный | Адрес страницы, на которую пользователь вернется после завершения оплаты. Адрес должен быть абсолютным (с указанием протокола и домена сайта). Пример: https://example.com/return_url.
Если адрес страницы не передан, необходимо обработать события процесса оплаты |
| error_callback | (error) => void | Обязательный | Callback-функция, которая принимает код ошибки инициализации |
| customization | object | Необязательный | Настройка платежной формы. Сейчас можно настроить способ отображения платежной формы, цветовую схему и отображение способов оплаты. |
| modal | boolean | Необязательный | Передается в customization.
Настройка способа отображения платежной формы. Возможные значения:
|
| colors | object | Необязательный | Передается в customization.Настройка цветовой схемы. В объекте передаются цвета, которые нужно изменить в интерфейсе платежной формы. |
| payment_methods | array | Необязательный | Передается в customization.Настройка отображения способов оплаты. Возможные значения:
|
Описание всех параметров объекта
colors, которые можно использовать для настройки цветовой схемы.Для тех, кто настраивает отображение способов оплаты: если на платежной форме виджета ЮKassa вы отображаете только Mir Pay или банковскую карту с Mir Pay, то вместо блока способа оплаты Mir Pay будет отображаться кнопка. Цветовую схему этой кнопки изменить нельзя — ее фон может быть только белым.
| Параметр | Тип | Описание | По умолчанию |
|---|---|---|---|
| control_primary | string | Цвет фона акцентных элементов: кнопка Заплатить, выбранные переключатели, опции, граница выбранного текстового поля. Рекомендуется использовать яркий цвет, привлекающий внимание | #FFCC00 (желтый) |
| control_primary_content | string | Цвет текста в кнопке Заплатить и содержимого акцентных переключателей и опций (например, выставленный флажок). Рекомендуется использовать цвет, контрастный к control_primary. Если параметр не передан, цвет рассчитывается на основе control_primary | #000000 (черный) или #FFFFFF (белый) — выбирается контрастный к control_primary |
| background | string | Цвет фона платежной формы, цвет сообщений об ошибках и подсказок. Рекомендуется использовать цвет, близкий к цвету фона контейнера, в котором размещен виджет | #FFFFFF (белый) |
| text | string | Цвет всех текстов на платежной форме, кроме текстов в кнопке Заплатить и во всплывающих подсказках. Если параметр не передан, цвет рассчитывается на основе background | Контрастный к background |
| border | string | Цвет границ и разделителей. Если параметр не передан, цвет рассчитывается на основе background | Контрастный к background |
| control_secondary | string | Цвет неакцентных элементов интерфейса. Если параметр не передан, цвет рассчитывается на основе background | Контрастный к background |
Если инициализация виджета закончилась неудачей, ЮKassa передаст в callback-функцию код ошибки.
| Код ошибки | Описание |
|---|---|
| customization_of_payment_methods_not_allowed | Этот магазин не может использовать параметр payment_methods. Если хотите настраивать отображение способов оплаты, напишите вашему менеджеру ЮKassa. |
| internal_service_error | При создании платежа возникла ошибка. Повторите инициализацию виджета |
| invalid_combination_of_payment_methods | Недопустимое сочетание способов оплаты в payment_methods объекта customization. Одновременно можно передавать только bank_card и mir_pay, если вам разрешено настраивать отображение способов оплаты. |
| invalid_payment_methods | Некорректное значение payment_methods объекта customization. В массиве можно передать коды только тех способов оплаты, которые поддерживает виджет. Если отображаете несколько способов, их коды нужно перечислять через запятую. |
| invalid_return_url | Некорректный URL возврата. При инициализации виджета передайте в return_url абсолютный URL страницы завершения оплаты, указав в нём протокол и домен вашего сайта |
| invalid_token | Неверный токен. Для получения токена создайте платеж |
| no_payment_methods_to_display | Отсутствуют способы оплаты для отображения: например, вы не можете принимать платежи выбранным способом или способ оплаты не поддерживает выбранные вами опции проведения платежа (оплату в две стадии, автоплатежи).
При инициализации виджета передайте в payment_methods другой способ оплаты |
| token_expired | Истек срок действия токена. Для получения нового токена создайте платеж |
| token_required | Токен не передан. При инициализации виджета передайте confirmation_token |
| Метод | Тип | Описание |
|---|---|---|
render | (id?: string) => Promise<undefined> | Отображение платежной формы. Исполнение Promise говорит о полной загрузке платежной формы. Promise можно не использовать. Если вы размещаете виджет на странице оплаты, в параметрах метода передайте значение атрибута id контейнера, в котором нужно разместить платежную форму. Если хотите отображать виджет во всплывающем окне, в параметрах метода ничего передавать не нужно.
|
destroy | () => void | Удаление инициализированного виджета. |
on | (event, callback) => void | Регистрация события виджета и вызов callback-функции. |
Виджет может уведомлять о следующих событиях:
| Событие | Описание |
|---|---|
| success | Пользователь успешно завершил оплату. Используется совместно с fail |
| fail | Пользователь неудачно завершил оплату. Используется совместно с success |
| complete | Пользователь завершил оплату. Событие наступает после успешной или неудачной оплаты. |
| modal_close | Пользователь закрыл всплывающее окно с платежной формой. Для тех, кто отображает виджет во всплывающем окне. |
Справочник APIИнтеграция виджетаТиповые сценарии интеграции виджета