API ЮKassa
Помощь
Подключить ЮKassa
Виджет для кредитования
Виджет для кредитования — дополнительное решение ЮKassa для способа оплаты «Заплатить по частям». Оно позволяет быстро рассчитать ежемесячный платеж по кредиту и показать его пользователю.
Если вы хотите отображать ежемесячный платеж, воспользуйтесь:
  • библиотекой CheckoutCreditUI.js и разместите с ее помощью готовую кнопку или информационный блок на вашем сайте;
  • методом credit-pre-schedule для расчета ежемесячного платежа и используйте данные в своих формах.
CheckoutCreditUI.js
С помощью этой JavaScript-библиотеки можно встроить виджет способа оплаты «Заплатить по частям» в вашу систему.
Вы можете выбрать режим отображения виджета — кнопка или информационный блок.
Кнопку можно встроить в корзину (когда пользователь выбрал товар). На кнопке отображается реальная сумма ежемесячного платежа. По кнопке пользователь попадает в процесс оформления кредита через ЮKassa.
Информационный блок можно разместить в карточке товара или в каталоге, чтобы рассказать пользователю о возможности купить этот товар в кредит. В блоке отображается реальная сумма ежемесячного платежа. Перейти из блока в оформление кредита невозможно.
Начало работы
Чтобы начать работу, подключите библиотеку и создайте экземпляр CheckoutCreditUI.
Подключите библиотеку
HTML
<script src="https://static.yoomoney.ru/checkout-credit-ui/v1/index.js"></script>
Создайте экземпляр CheckoutCreditUI
JavaScript
const $checkoutCreditUI = CheckoutCreditUI(params);
где params — параметры конфигурации.
Конфигурация
ПараметрТипОписание
shopIdlongИдентификатор магазина, выдается при подключении к ЮKassa.
sumCurrencyAmountСумма заказа.
Пример настройки CheckoutCreditUI
JavaScript
const $checkoutCreditUI = CheckoutCreditUI({
    shopId: '6677',
    sum: '3000'
});
Методы
НазваниеОписаниеПринимаетВозвращает
.updateОбновляет сумму ежемесячного платежа по кредиту и перерисовывает виджет.{void}{void}
.onОбработчик событий кнопки (работает для type='button').submit{void}
.UPDATE
Используется для вывода виджета.
JavaScript
$checkoutCreditUI.update();
НазваниеОписаниеТипПо умолчанию
domSelectorСелектор элемента в коде страницы, в котором будет выводиться виджет (id или class)string{void}
typeРежим отображения виджета. Возможные значения: button (кнопка), info (информационный блок).stringbutton
tagТег, в котором выводится кнопка (можно использовать, только если указан type='button'). Возможные значения: button, input.stringbutton
themeТема оформления кнопки (можно использовать, только если указан type='button'). Возможные значения: white или default.stringdefault
Кнопку (type='button') можно настроить:
  • Выбрать тег, который будет в коде. Если tag='input', клик по кнопке равносилен клику по <input type='submit'>. Если tag='button', клик по кнопке обрабатывается как <button type='submit'>.
  • Выбрать тему оформления. Если theme отсутствует или theme='default', кнопка будет желтой. Если theme='white', кнопка будет белой.
Желтая кнопка с тегом input type='button'
JavaScript
const checkoutCreditButton1 = $checkoutCreditUI({
    type: 'button',
    theme: 'default',
    domSelector: '.parent1'
});
Белая кнопка с тегом input type='submit'
JavaScript
const checkoutCreditButton2 = $checkoutCreditUI({
    type: 'button',
    tag: 'input',
    theme: 'white',
    domSelector: '.parent2'
});
Информационный блок
JavaScript
const checkoutCreditText = $checkoutCreditUI({
    type: 'info',
    domSelector: '.parent3'
});
.ON
Используется для обработки событий (нажатия на кнопку). Только для type='button'.
JavaScript
checkoutCreditButton.on = function() {
      alert('Submit');
};
Пример использования
JavaScript
const $checkoutCreditUI = CheckoutCreditUI({
      shopId: '6677',
      sum: '3000'
});              

const checkoutCreditButton = $checkoutCreditUI({theme: 'white', type: 'input', domSelector: '.parent'});

checkoutCreditButton.on = function() {
      alert('Submit');
};
Метод credit-pre-schedule
Этот метод позволяет заранее рассчитывать сумму ежемесячного платежа по кредиту для конкретного товара — при оплате через сервис ЮKassa «Заплатить по частям».
Вызов метода
Запросы отправляются методом GET по протоколу HTTP/1.1.
Адрес для отправки запросов
https://yoomoney.ru/credit/order/ajax/credit-pre-schedule
Параметры запроса
ПараметрТипОписание
shopIdlongИдентификатор магазина, выдается при подключении к ЮKassa.
sumCurrencyAmountСумма заказа.
Пример запроса
https://yoomoney.ru/credit/order/ajax/credit-pre-schedule?shopId=6677&sum=10000
Параметры ответа
ПараметрТипОписание
termlongСрок кредита или рассрочки, количество в месяцах.
creditPercentlongКредитная ставка (процент в месяц).
amountCurrencyAmountСумма платежа в месяц.
totalAmountCurrencyAmountПолная сумма кредита за весь период с процентами.
Пример ответа
JSON
{
    "term":12,
    "creditPercent":"3.90",
    "amount":"1223.33",
    "totalAmount":"14680.00"
}
Что почитать еще
Способы оплаты