ym88659208ym87991671
SDK виджет Оплата в кредит | Документация для разработчиков

SDK виджет Оплата в кредит

Обновлено 18 июня 2024

Общие сведения

Виджет для Партнеров, упрощающий подключение сервиса на сайте.

Виджет позволяет:

  • Генерировать стилизованную кнопку «Оплатить покупку»
  • Генерировать модальное окно с выбором клиентского пути.

Подключение

В прикрепленном архиве с виджетом располагаются три папки:

Название папкиОписание
exampleПапка с примером виджета в виде html файла
fontsПапка со шрифтами, которые использует СберБизнес
sdkПапка с файлом виджета, который необходимо подключать

Подключите виджет Оплата в кредит (creditInBasket-sdk.js) и шрифты в коде страницы вашего сайта.

<script src="js/libs/creditInBasket/creditInBasket-sdk.js"></script>

Инициализация виджета

Инициализация виджета должна происходить при загрузке страницы выбора способа оплаты. Объект инициализации виджета должен содержать следующие параметры:

  • params (Object)- массив объектов с параметрами для инициализации виджета.
  • onSuccessCallback (Function) - функция обратного вызова при успешном завершении процесса.
  • onCancelCallback (Function) - функция обратного вызова при преждевременном закрытии модального окна.
  • onErrorCallback (Function) - функция обратного вызова, когда в виджет не было передано ни одного кредитного продукта.
  • onOpenModalCallback (Function) - функция обратного вызова, когда открывается модальное окно.
  • onSelectedProduct (Function) - функция обратного вызова, когда необходимо передать выбранный клиентом продукт в виджет.
Пример инициализации виджета
var buttonStyle = {
   theme: 'default',
   type: 'default',
   size: 'default',
   text: 'Оплатить покупку'
}
var params = {
   buttonStyle: buttonStyle,
   containerModal: 'previewModal',
   containerButton: 'previewButton',
   creditAvailable: true,
   repeatOpen: false,
   creditProducts: [
     {
       sumMin: 115670,
       sumMax: 900000,
       rate: 17,
       termMin: 12,
       termMax: 3,
       productName: 'Оборотный кредит',
       productCode: 'MB-F-ip-225',
       delayRepayment: 31,
       contractNumber: '11111111',
       availableSum: 200000,
       questions: [
         {
           question: 'Как мне оплатить счет кредитными деньгами?',
           answer: 'Подайте заявку онлайн, после одобрения подпишите кредитный договор электронной подписью и нажмите кнопку «Оплатить».'
         }
       ]
     }
   ]
};
function onSuccessCallback(result) {
  console.log(result)
}
function onCancelCallback(result) {
  console.log(result)
}
function onErrorCallback(result) {
  console.log(result)
}
function onSelectedProduct() {
      var radios = document.getElementsByName('product');
      var radioValue;
      var sumValue = document.getElementById("orderSum").value;
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          radioValue = radios[i].value;
          break;
        }
      }
      return {
          productCode: radioValue,
          amount: sumValue
      }
}
var obj = new CredInBaskSDK(params, onSuccessCallback, onCancelCallback, onErrorCallback, onOpenModalCallback, onSelectedProduct);

Заполнение полей при инициализации виджета

Данные о кредитных продуктах вы получаете с помощью GET-запроса /v1/credit-offers.

Список соответствия полей полей для инициализации виджета (params.creditProducts):

Таблица соответствия полей
Параметры из REST-сервисаПараметры виджета
sumMinsumMin
sumMaxsumMax
raterate
termMintermMin
termMaxtermMax
productNameproductName
productCodeproductCode
delayRepaymentdelayRepayment
contractNumbercontractNumber
availableSumavailableSum
dateSincedateSince
dateUntildateUntil

Список соответствия кодов продукта типу продукта (productCode):

Таблица соответствий кодов продукта
Код продуктаТип продукта
MB-K-ip-225Оплата в кредит (ИП)
MB-K-oo-226Оплата в кредит (ООО)

Параметры для инициализации виджета (params)

Массив объектов с параметрами для инициализации виджета (params)
const params = {
containerButton (String (50))Класс DOM-элемента, в котором будет размещена кнопка 'Оплатить покупку'
containerModal (String (50))Класс DOM-элемента, в котором будет размещено модальное окно
creditAvailable (Boolean)Доступны ли клиенту кредитные предложения
creditProducts (Массив объектов JSON (array))Данные по кредитному продукту
buttonStyle (Массив объектов JSON (array))Параметры стилизации кнопки
}
Массив параметров кредитных предложений (params.creditProducts)
const creditProduct = {
sumMin (Number, optional)Минимальная сумма доступная для покупки в кредит,
sumMax (Number, optional)Максимальная сумма доступная для покупки в кредит,
rate (Number, optional)Ставка по кредитному предложению (%),
termMin (Number, optional)Минимальный срок кредита (в месяцах),
termMax (Number, optional)Максимальный срок кредита (в месяцах),
productName (String, optional)Наименование кредитного продукта,
productCode (String)Код кредитного,
delayRepayment (Number, optional)Льготный период,
contractNumber (String (50), optional)Номер договора,
availableSum (Number (19, 2), optional)Сумма лимита,
dateSince (Date, optional)Дата начала действия договора,
dateUntil (Date, optional)Дата окончания договора,
questions (Массив объектов JSON (object), optional)[{
question (String (400))Часто встречающиеся вопросы,
answer (String (4000))Ответы на вопросы
}]
};
Параметры для стилизации кнопки (params.buttonStyle)
const buttonStyle = {
theme (String)Цвет кнопки 'Оплатить покупку'.
Возможные значения: default - зеленый цвет; white - белый цвет;
type (String)Тип кнопки 'Оплатить покупку'.
Возможные значения: default - квадратная кнопка; rounded - закругленная кнопка;
text (String)Текст кнопки. По умолчанию 'Оплатить покупку'.
size (String)Размер кнопки 'Оплатить покупку'.
Возможные значения: default - обычный размер кнопки; small - маленький размер кнопки;
}

Параметры кнопки

Параметры

Тема: по умолчанию, Тип: по умолчанию, Текст: 'Оплатить покупку', Размер: по умолчанию

Внешний вид

Default

Обновление кнопки

В случае необходимости изменения параметров уже отрисованной кнопки, необходимо вызывать функцию updateButtonText и передать следующие параметры:

{
text(String)Текст кнопки
}

Выбор продукта на стороне партнера

Для того, что бы кнопка выбора продукта была информативна и давала клиенту понять некоторые базовые характеристики продукта мы предлагаем следующие варианты заполнения.

Заполнение кнопки без динамических параметров.

Before client authorization

Передача продукта выбранного клиентом

После того, как Клиент выбрал способ оплаты и нажимает кнопку "Оплатить покупку", в виджет необходимо передать сумма заказа и код продукта, который выбрал клиент.

Данные передаются в виджет с помощью функции onSelectedProduct

{
productCode(String)Код кредитного продукта
amount(Number)Сумма заказа
}

Закрытие модального окна

Закрытие модального окна может произойти в трех случаях:

  • В случае завершения работы с виджетом (onSuccessCallback)
  • В случае преждевременного завершения работы с виджетом (onCancelCallback)
  • В случае ошибки при инициализации виджета (onErrorCallback)

Функция обратного вызова (onSuccessCallback)

Поле того, как клиент выбрал условия займа и отправил заявку, работа с модальным окном будет завершена успешно.

В следствии чего будет вызвана функция onSuccessCallback, принимающая в качестве параметра объект, в зависимости от выбранного клиентом продукта, содержащий следующие значения (параметры функции):

"Оплатить в кредит" (действующая кредитная линия)
{
contractNumber (Number)Номер договора ,
productCode (String)Код кредитного продукта ,
paymentAmount (Number)Сумма, на которую необходимо создать платежное поручение ,
}
"Оплатить в кредит" (новая кредитная линия)
{
creditAmount (Number)Выбранная сумма кредита ,
creditTerm (Number)Срок кредита (в месяцах) ,
productCode (String)Код кредитного продукта ,
}

Преждевременное завершение работы с виджетом (onCancelCallback)

Если работа с виджетом была завершена до отправки заявки на кредит (было закрыто модальное окно, была перезагружена страница и т.д.), будет вызвана функция onCancelCallback, принимающая в качестве параметра объект, содержащий следующее значения:

{
messageText (String)Сообщение об ошибке ,
}

Ошибка при инициализации виджета (onErrorCallback)

Если при инициализации виджета не было передано ни одно кредитное предложение, то в ответ будет вызвана функция onErrorCallback.


Заполнение полей для отправки заявки на кредит

После того, как клиент нажал "Оплатить покупку", необходимо через REST-сервис POST /v1/credit-requests отправить заявку в СберБизнес. Параметрами, полученными при вызове функции onSuccessCallback, необходимо заполнить следующие поля REST-сервиса:

Параметры REST-сервисаПараметры функции onSuccessCallback
creditAmountcreditAmount
creditTermcreditTerm
creditProductCodeproductCode

Остальные параметры REST-сервиса POST /v1/credit-requests заполняются в соответствии с правилами указанными на странице с описанием сервиса.


Направление клиента на форму платежки

В случае если у клиента была действующая кредитная линия и он выбрал ее в качестве средства оплаты, необходимо через REST-сервис POST /v1/payments/from-invoice-any создать платежное поручение на оплату заказа.

Параметрами, полученными при вызове функции onSuccessCallback, необходимо заполнить следующие поля REST-сервиса:

Параметры REST-сервисаПараметры onSuccessCallback
creditContractNumbercontractNumber
amountpaymentAmount

Так же необходимо заполнить параметр isPaidByCredit = true.

ПАО Сбербанк использует cookie для персонализации сервисов и удобства пользователей.
Вы можете запретить сохранение cookie в настройках своего браузера.