Архив
 
Виджет для кредитования
Это старая версия API. Переходите на API Ю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
(информационный блок).
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'
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"
}
 
Что почитать еще
Способы оплаты