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

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

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

YandexCheckoutCreditUI.js

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

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

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

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

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

Чтобы начать работу, подключите библиотеку и создайте экземпляр YandexCheckoutCreditUI.

Подключение библиотеки

 <script src="https://static.yandex.net/kassa/pay-in-parts/ui/v1/"> </script> 

Создание экземпляра YandexCheckoutCreditUI

 const $checkoutCreditUI = YandexCheckoutCreditUI(params); 

где params — параметры конфигурации

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

Параметры конфигурации

Параметр

Тип

Описание

shopId

long

Идентификатор магазина, выдается при подключении к Яндекс.Кассе.

sum

CurrencyAmount

Сумма заказа.

Параметр

Тип

Описание

shopId

long

Идентификатор магазина, выдается при подключении к Яндекс.Кассе.

sum

CurrencyAmount

Сумма заказа.

Пример настройки YandexCheckoutCreditUI

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

Методы

Название

Описание

Принимает

Возвращает

.update

Обновляет сумму ежемесячного платежа по кредиту и перерисовывает виджет.

{void}

{void}

.on

Обработчик событий кнопки (работает для type='button').

submit

{void}

Название

Описание

Принимает

Возвращает

.update

Обновляет сумму ежемесячного платежа по кредиту и перерисовывает виджет.

{void}

{void}

.on

Обработчик событий кнопки (работает для type='button').

submit

{void}

.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

button

Параметр

Описание

Принимает

Возвращает

domSelector

Селектор элемента в коде страницы, в котором будет выводиться виджет (id или class)

string

{void}

type

Режим отображения виджета. Возможные значения: button (кнопка), info (информационный блок).

string

button

tag

Тег, в котором выводится кнопка (можно использовать, только если указан type='button'). Возможные значения: button, input.

string

button

theme

Тема оформления кнопки (можно использовать, только если указан type='button'). Возможные значения: white или default.

string

button

Кнопку (type='button') можно настроить:

  • Выбрать тег, который будет в коде. Если tag='input', клик по кнопке равносилен клику по <input type='submit'>. Если tag='button', клик по кнопке обрабатывается как <button type='submit'>.
  • Выбрать тему оформления. Если 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'
});

.ON

Используется для обработки событий (нажатия на кнопку). Только для type='button'.

checkoutCreditButton.on = function() {
      alert('Submit');
};

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

const $checkoutCreditUI = YandexCheckoutCreditUI({
      shopId: '6677',
      sum: '3000'
});              
        
const checkoutCreditButton = $checkoutCreditUI({theme: 'white', type: 'input', domSelector: '.parent'});
        
checkoutCreditButton.on = function() {
      alert('Submit');
};

Расчет платежа в месяц — метод credit-pre-schedule

Этот метод позволяет заранее рассчитывать сумму ежемесячного платежа по кредиту для конкретного товара — при оплате через сервис Яндекс.Кассы «Заплатить по частям».

Вызов метода

Запросы отправляются методом GET по протоколу HTTP/1.1.

Адрес для отправки запросов: https://money.yandex.ru/credit/order/ajax/credit-pre-schedule

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

Параметр

Тип

Описание

shopId

long

Идентификатор магазина, выдается при подключении к Яндекс.Кассе.

sum

CurrencyAmount

Сумма заказа.

Параметр

Тип

Описание

shopId

long

Идентификатор магазина, выдается при подключении к Яндекс.Кассе.

sum

CurrencyAmount

Сумма заказа.

Пример запроса

https://money.yandex.ru/credit/order/ajax/credit-pre-schedule?shopId=6677&sum=10000

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

Параметр

Тип

Описание

term

long

Срок кредита или рассрочки, количество в месяцах.

creditPercent

long

Кредитная ставка (процент в месяц).

amount

CurrencyAmount

Сумма платежа в месяц.

totalAmount

CurrencyAmount

Полная сумма кредита за весь период с процентами.

Параметр

Тип

Описание

term

long

Срок кредита или рассрочки, количество в месяцах.

creditPercent

long

Кредитная ставка (процент в месяц).

amount

CurrencyAmount

Сумма платежа в месяц.

totalAmount

CurrencyAmount

Полная сумма кредита за весь период с процентами.

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

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