Виджет для кредитования — дополнительное решение ЮKassa для способа оплаты «Заплатить по частям». Оно позволяет быстро рассчитать ежемесячный платеж по кредиту и показать его пользователю.
Если вы хотите отображать ежемесячный платеж, воспользуйтесь:
- библиотекой CheckoutCreditUI.js и разместите с ее помощью готовую кнопку или информационный блок на вашем сайте;
- методом credit-pre-schedule для расчета ежемесячного платежа и используйте данные в своих формах.
С помощью этой JavaScript-библиотеки можно встроить виджет способа оплаты «Заплатить по частям» в вашу систему.
Вы можете выбрать режим отображения виджета — кнопка или информационный блок.
Кнопку можно встроить в корзину (когда пользователь выбрал товар). На кнопке отображается реальная сумма ежемесячного платежа.
Информационный блок можно разместить в карточке товара или в каталоге, чтобы рассказать пользователю о возможности купить этот товар в кредит. В блоке отображается реальная сумма ежемесячного платежа.
Чтобы начать работу, подключите библиотеку и создайте экземпляр
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
.$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'
) можно настроить — выбрать тему оформления. Если 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' });
const $checkoutCreditUI = CheckoutCreditUI({ shopId: '6677', sum: '3000' }); const checkoutCreditText = $checkoutCreditUI({ type: 'info', domSelector: '.parent3' });
Этот метод позволяет заранее рассчитывать сумму ежемесячного платежа по кредиту для конкретного товара — при оплате через сервис Ю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" }
Проведение платежейЗаплатить по частям