Виджет для кредитования — Прием платежей по API ЮKassa

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

Если вы подключили Кассу до октября 2017 — читайте про виджет в старом протоколе приема платежей.

Виджет для кредитования — дополнительное решение ЮKassa для способа оплаты «Заплатить по частям». Оно позволяет быстро рассчитать ежемесячный платеж по кредиту и показать его пользователю.

Если вы хотите отображать ежемесячный платеж, воспользуйтесь:

библиотекой CheckoutCreditUI.js и разместите с ее помощью готовую кнопку или информационный блок на вашем сайте;
методом credit-pre-schedule для расчета ежемесячного платежа и используйте данные в своих формах.

CheckoutCreditUI.js

С помощью этой JavaScript-библиотеки можно встроить виджет способа оплаты «Заплатить по частям» в вашу систему.

Вы можете выбрать режим отображения виджета — кнопка или информационный блок.

Кнопку можно встроить в корзину (когда пользователь выбрал товар). На кнопке отображается реальная сумма ежемесячного платежа.

Информационный блок можно разместить в карточке товара или в каталоге, чтобы рассказать пользователю о возможности купить этот товар в кредит. В блоке отображается реальная сумма ежемесячного платежа.

Начало работы

Чтобы начать работу, подключите библиотеку и создайте экземпляр 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.

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') можно настроить — выбрать тему оформления. Если 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'
});

Пример использования

JavaScript
const $checkoutCreditUI = CheckoutCreditUI({
    shopId: '6677',
    sum: '3000'
});

const checkoutCreditText = $checkoutCreditUI({
    type: 'info',
    domSelector: '.parent3'
});

Метод 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"
}

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

Проведение платежей Заплатить по частям