В этом справочнике описаны:
- Параметры, которые передаются при инициализации виджета;
- Ошибки, связанные с инициализацией виджета;
- Методы виджета;
- События виджета.
Описание параметров, которые необходимо передать в экземпляр класса
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Интеграция виджетаТиповые сценарии интеграции виджета