Виджет для кредитования — дополнительное решение ЮKassa для способа оплаты «Заплатить по частям». Оно позволяет быстро рассчитать ежемесячный платеж по кредиту и показать его пользователю.
Если вы хотите отображать ежемесячный платеж, воспользуйтесь:
- библиотекой CheckoutCreditUI.js и разместите с ее помощью готовую кнопку или информационный блок на вашем сайте;
- методом credit-pre-schedule для расчета ежемесячного платежа и используйте данные в своих формах.
С помощью этой JavaScript-библиотеки можно встроить виджет способа оплаты «Заплатить по частям» в вашу систему.
Вы можете выбрать режим отображения виджета — кнопка или информационный блок.
Кнопку можно встроить в корзину (когда пользователь выбрал товар). На кнопке отображается реальная сумма ежемесячного платежа. По кнопке пользователь попадает в процесс оформления кредита через ЮKassa.
Информационный блок можно разместить в карточке товара или в каталоге, чтобы рассказать пользователю о возможности купить этот товар в кредит. В блоке отображается реальная сумма ежемесячного платежа. Перейти из блока в оформление кредита невозможно.
Чтобы начать работу, подключите библиотеку и создайте экземпляр
CheckoutCreditUI
.Подключите библиотеку
<script src="https://static.yoomoney.ru/checkout-credit-ui/v1/index.js"></script>
Создайте экземпляр CheckoutCreditUI
const $checkoutCreditUI = CheckoutCreditUI(params);
где
params
— параметры конфигурации.Параметр | Тип | Описание |
---|---|---|
shopId | long | Идентификатор магазина, выдается при подключении к ЮKassa. |
sum | CurrencyAmount | Сумма заказа. |
Пример настройки CheckoutCreditUI
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' });
Название | Описание | Принимает | Возвращает |
---|---|---|---|
.update | Обновляет сумму ежемесячного платежа по кредиту и перерисовывает виджет. | {void} | {void} |
.on | Обработчик событий кнопки (работает для type='button' ). | submit | {void} |
Используется для вывода виджета.
$checkoutCreditUI.update();
Название | Описание | Тип | По умолчанию |
---|---|---|---|
domSelector | Селектор элемента в коде страницы, в котором будет выводиться виджет (id или class) | string | {void} |
type | Режим отображения виджета. Возможные значения: button (кнопка), info (информационный блок). | string | button |
tag | Тег, в котором выводится кнопка (можно использовать, только если указан type='button' ). Возможные значения: button , input . | string | button |
theme | Тема оформления кнопки (можно использовать, только если указан type='button' ). Возможные значения: white или default . | string | default |
Кнопку (
type='button'
) можно настроить:- Выбрать тег, который будет в коде. Если
tag='input'
, клик по кнопке равносилен клику по<input type='submit'>
. Еслиtag='button'
, клик по кнопке обрабатывается как<button type='submit'>
. - Выбрать тему оформления. Если
theme
отсутствует илиtheme='default'
, кнопка будет желтой. Еслиtheme='white'
, кнопка будет белой.
Желтая кнопка с тегом input type='button'
const checkoutCreditButton1 = $checkoutCreditUI({ type: 'button', theme: 'default', domSelector: '.parent1' });
Белая кнопка с тегом input type='submit'
const checkoutCreditButton2 = $checkoutCreditUI({ type: 'button', tag: 'input', theme: 'white', domSelector: '.parent2' });
Информационный блок
const checkoutCreditText = $checkoutCreditUI({ type: 'info', domSelector: '.parent3' });
Используется для обработки событий (нажатия на кнопку). Только для
type='button'
.checkoutCreditButton.on = function() { alert('Submit'); };
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' }); const checkoutCreditButton = $checkoutCreditUI({theme: 'white', type: 'input', domSelector: '.parent'}); checkoutCreditButton.on = function() { alert('Submit'); };
Этот метод позволяет заранее рассчитывать сумму ежемесячного платежа по кредиту для конкретного товара — при оплате через сервис ЮKassa «Заплатить по частям».
Запросы отправляются методом GET по протоколу HTTP/1.1.
Адрес для отправки запросов
https://yoomoney.ru/credit/order/ajax/credit-pre-schedule
Параметры запроса
Параметр | Тип | Описание |
---|---|---|
shopId | long | Идентификатор магазина, выдается при подключении к ЮKassa. |
sum | CurrencyAmount | Сумма заказа. |
Пример запроса
https://yoomoney.ru/credit/order/ajax/credit-pre-schedule?shopId=6677&sum=10000
Параметры ответа
Параметр | Тип | Описание |
---|---|---|
term | long | Срок кредита или рассрочки, количество в месяцах. |
creditPercent | long | Кредитная ставка (процент в месяц). |
amount | CurrencyAmount | Сумма платежа в месяц. |
totalAmount | CurrencyAmount | Полная сумма кредита за весь период с процентами. |
Пример ответа
{ "term":12, "creditPercent":"3.90", "amount":"1223.33", "totalAmount":"14680.00" }