Инструкция установки Виджета Кредит в Корзине V2

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

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

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

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

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

После того, как Клиент выбирает один из предложенных банком продуктов происходит следующее:

В случае кредита

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

В случае рассрочки

Возможно два сценария развития событий.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сумма покупки ниже минимально доступной суммы покупки в кредит

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

Сумма покупки

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

В случае если клиенту не доступны кредитные предложения (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 Рассрочка (ООО)
MB-F-ip-150 Кредит (ИП)
MB-F-oo-151 Кредит (ООО)

Параметры для инициализации виджета (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: 115679,
       sumMax: 3567891,
       checkSum: 1500000,
       rate: 17,
       termMin: 1,
       termMax: 36,
       individual: false,
       productName: 'Оборотный кредит',
       productCode: 'MB-F-oo-171',
       questions: [
         {
           question: 'Как мне оплатить счёт кредитными деньгами?',
           answer: '\"Все просто\" - \nвот наш девиз!'
         },
         {
           question: 'Как мне оплатить счёт кредитными деньгами?',
           answer: 'Подайте заявку онлайн, после одобрения подпишите кредитный договор электронной подписью и нажмите кнопку «Оплатить».'
         }
      ]
    },
     {
       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);

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

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

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

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

Кнопка кредит

Заполнение кнопки рассрочки:

С рассрочкой на creditProduct.delayRepayment дней без процентов

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

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

Кнопка покупка

Первая строчка:

Расчёт суммы оплаты в месяц по данному кредитному предложению предлагается рассчитывать по следующему алгоритму:

  • Рассчитывается коэффициент аннуитета (K) по формуле

Кнопка покупка

где: n - количество периодов, в течение которых выплачивается кредит (creditProduct.TermMax); i - месячная процентная ставка по кредиту (creditProduct.rate*).

  • В расчётах необходимо перевести параметр ставки в год creditProduct.rate в ежемесячную, десятичную форму (поделить на 1200)
  • Чтобы узнать сумму ежемесячного платежа, умножается коэффициент аннуитета (K) на сумма кредита (Сумма кредита равна сумме покупки). Полученную сумму ежемесячного платежа необходимо округлить, отбросив десятичную часть (26000.967 = 26000)

Вторая строчка:

creditProduct.rate / 12 % в месяц

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

Кнопка рассрочка

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

С рассрочкой на creditProduct.delayRepayment дней без процентов

creditProduct.rate / 12 % в месяц с creditProduct.delayRepayment + 1 дня, до 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 amount
contractNumber paymentAmount

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

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

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