Установка с кредитной линией

Обновлено 22 апреля 2024

Сценарий клиентского пути

Получение данных о действующей кредитной линии

Для получения данных о действующей кредитной линии необходимо добавить новые claim, направляемые в запросе /v2/oauth/authorize: creditLineAvailableSum, hasActiveCreditLine.

Работа клиента с виджетом

У Клиента нет действующей кредитной линии

Виджет возвращает партнеру параметры для формирования заявки на открытие новой кредитной линии (сумма займа = сумме заказа, срок займа = максимально возможному сроку, код продукта).

У Клиента есть действующая кредитная линия

В случае если у клиента есть действующая кредитная линия он переходит в модальное окно. В зависимости от параметров, переданных партнером при инициализации отрисовки виджета, возможны два варианта отрисовки модального окна - действующая кредитная линия не превышена, действующая кредитная линия превышена.

Действующая кредитная линия не превышена

В данной ситуации сумма заказа (amount) не превышает доступный лимит для оплаты в кредит (creditProducts.availableSum). У клиента так же остается возможность оформить новый лимит.

Действующая кредитная линия превышена

В данной ситуации сумма заказа (amount) превышает доступный лимит для оплаты в кредит (creditProducts.availableSum). У клиента остается возможность воспользоваться действующим лимитом для частичной оплаты покупки, но в то же время предоставляется возможность оформить новый лимит.

Альтернативные сценарии

Данные негативные сценарии могут возникнуть на любом продукте

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

В случае если сумма покупки (amount) превышает максимальную сумму доступную для покупки в кредит (creditProducts.sumMax) Клиенту выводится предупреждение с возможными вариантами решения данной ситуации.

Клиенту не доступны кредитные предложения

В случае если клиенту не доступны кредитные предложения (params.creditAvailable: false), Клиенту отображается следующее модальное окно со ссылкой на посадочную страницу.

Инструкция по установке

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

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

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

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

Подключение

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

Название папки	Описание
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) - функция обратного вызова, когда необходимо передать выбранный клиентом продукт в виджет.

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

Данные о кредитных продуктах должны быть получены через REST-сервис GET /v1/credit-offers. Далее приведен список соответствия полей из REST-сервиса полям для инициализации виджета (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 необходимо передать следующие параметры:

Структура объекта params

const params = {
containerButton (String (50))	Класс DOM-элемента, в котором будет размещена кнопка 'Оплатить покупку'
containerModal (String (50))	Класс DOM-элемента, в котором будет размещено модальное окно
creditAvailable (Boolean)	Доступны ли клиенту кредитные предложения
creditProducts (Массив объектов JSON (array))	Данные по кредитному продукту
buttonStyle (Массив объектов JSON (array))	Параметры стилизации кнопки
}

Пример объекта params

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)

Объект buttonStyle включает в себя параметры необходимые для отрисовки кнопки целевого действия

Структура объекта buttonStyle

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

Пример объекта buttonStyle

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

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

Параметры

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

Внешний вид

Параметры

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

Внешний вид

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

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

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

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

Пример параметров функции

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

Пример инициализации виджета

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);

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

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

Вид кнопок до авторизации клиента

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

Заполнение кнопки выбора Оплатить в кредит (коды продукта: MB-K-ip-225, MB-K-oo-226) после авторизации клиента

Заполнение данной кнопки:

Оплата в кредит на creditProduct.delayRepayment дней без процентов

creditProduct.rate / 12 % в месяц, до sumMax

От ПАО Сбербанк

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

После того, как Клиент выбрал способ оплаты и нажимает кнопку 'Оплатить покупку', в виджет должен быть передан код продукта, который выбрал клиент, и сумма заказа. Эти данные передаются в виджет с помощью функции 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
}

Кредит:

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

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

Пример параметров функции

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

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

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

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

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

Пример параметров функции

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

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

Если при инициализации виджета не было передано ни одно кредитное предложение, то в ответ будет вызвана функция 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.