Развернуть

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

Обновлено 20 февраля 2025

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

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

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

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

Подключение

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

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

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

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

@font-face {
        font-family: SB Sans Interface;
        src: url('../fonts/SBSansUI-Light.ttf');
    }

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

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-сервиса	Параметры виджета
sumMin	sumMin
sumMax	sumMax
rate	rate
termMin	termMin
termMax	termMax
productName	productName
productCode	productCode
delayRepayment	delayRepayment
contractNumber	contractNumber
availableSum	availableSum
dateSince	dateSince
dateUntil	dateUntil

Список соответствия кодов продукта типу продукта (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))	Параметры стилизации кнопки
}

const params = {
containerButton: 'preview',
containerModal: 'preview',
creditAvailable: true,
creditProducts: [{creditProduct1}, {creditProduct2}, ...]
buttonStyle: buttonStyle
}

Массив параметров кредитных предложений (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))	Ответы на вопросы
}]
};

const creditProduct = {
sumMin: 10000,
sumMax: 1000000,
rate: 17,
termMin: 12,
termMax: 12,
productName: 'Оборотный кредит',
productCode: 'MB-F-ip-225',
delayRepayment: 30,
contractNumber: 7768763
availableSum: 843000.00
dateSince: 2020-09-15
dateUntil: 2020-10-15
questions: [{
question: 'Как мне оплатить счет кредитными деньгами?',
answer: 'Подайте заявку онлайн, после одобрения подпишите кредитный договор электронной подписью и нажмите кнопку «Оплатить»'
}]
};

Параметры для стилизации кнопки (params.buttonStyle)

const buttonStyle = {
theme (String)	Цвет кнопки 'Оплатить покупку'. Возможные значения: default - зеленый цвет; white - белый цвет;
type (String)	Тип кнопки 'Оплатить покупку'. Возможные значения: default - квадратная кнопка; rounded - закругленная кнопка;
text (String)	Текст кнопки. По умолчанию 'Оплатить покупку'.
size (String)	Размер кнопки 'Оплатить покупку'. Возможные значения: default - обычный размер кнопки; small - маленький размер кнопки;
}

const buttonStyle = {
theme: 'default',
type: 'default',
text: 'Оплатить покупку',
size: 'default',
}

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

Параметры

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

Внешний вид

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

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

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

{
text: "Оплатить покупку"
}

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

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

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

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

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

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

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

{
productCode: MB-F-ip-225
amount: 1676789
}

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

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

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

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

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

"Оплатить в кредит" (действующая кредитная линия)

{
contractNumber (Number)	Номер договора ,
productCode (String)	Код кредитного продукта ,
paymentAmount (Number)	Сумма, на которую необходимо создать платежное поручение ,
}

{
contractNumber: 3378389
productCode: MB-F-ip-225
paymentAmount: 200000
}

"Оплатить в кредит" (новая кредитная линия)

{
creditAmount (Number)	Выбранная сумма кредита ,
creditTerm (Number)	Срок кредита (в месяцах) ,
productCode (String)	Код кредитного продукта ,
}

{
creditAmount: 105300.00
creditTerm: 12
productCode: MB-F-ip-225
}

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

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

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

{
messageText: "Вы отклонили заявку"
}

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

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

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

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

Параметры REST-сервиса	Параметры функции onSuccessCallback
creditAmount	creditAmount
creditTerm	creditTerm
creditProductCode	productCode

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

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

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

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

Параметры REST-сервиса	Параметры onSuccessCallback
creditContractNumber	contractNumber
amount	paymentAmount

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

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней

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

Подключение﻿

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

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

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

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

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

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

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

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

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

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

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