Виджет для кредитования — [Архив] Протокол приема платежей через ЮKassa

Виджет для кредитования

Это старая версия 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 — параметры конфигурации.

Конфигурация

Параметр	Тип	Описание
shopId	long	Идентификатор магазина, выдается при подключении к ЮKassa.
sum	CurrencyAmount	Сумма заказа.

Пример настройки 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

Параметры запроса

Параметр	Тип	Описание
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	Полная сумма кредита за весь период с процентами.

Пример ответа

JSON
{
    "term":12,
    "creditPercent":"3.90",
    "amount":"1223.33",
    "totalAmount":"14680.00"
}

Что почитать еще

Способы оплаты