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

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

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

Модальные окна виджета

После того как клиент нажимает кнопку целевого действия "Выбрать кредитный продукт" клиенту отображается виджет. В виджете клиент осуществляет выбор продукта. Предлагается два продукта на выбор.

Покупка в рассрочку

Покупка в рассрочку

Покупка в кредит

Покупка в кредит

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

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

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

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

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

Подключение

В качестве образца по отрисовке кнопок прилагаются гайды, компоненты кнопок и логотипы СберБизнес (Figma-файл).

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

Название папки Описание
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'); }

После загрузки страницы для инициализации виджета необходимо создать новый экземпляр CredInBaskSDK. Функция создания принимает следующие параметры:

  • params (Object)- параметры для инициализации виджета
  • onSuccessCallback (Function) - функция обратного вызова при успешном завершении процесса
  • onErrorCallback (Function)- функция обратного вызова, когда не было передано ни одного кредитного продукта.
  • onCancelCallback (Function) - функция обратного вызова при преждевременном закрытии модального окна.
  • onOpenModalCallback (Function) - функция обратного вызова, когда открывается модальное окно.
const creditProduct = { 
sumMin: 10000, 
sumMax: 3000000, 
rate: 17, 
termMin: 12, 
termMax: 36, 
productName: 'Оборотный кредит', 
productCode: 'MB-F-ip-19', 
delayRepayment: 30, 
checkSum: 3000000, 
individual: true, 
questions: { 
question: 'Как мне оплатить счёт кредитными деньгами?', 
answer: 'Подайте заявку онлайн, после одобрения подпишите кредитный договор электронной подписью и нажмите кнопку «Оплатить»' }, 
{ 
question: 'Как я могу подать заявку?' 
answer: 'Заявка подается через платформу Сбербанк Бизнес Онлайн. Для этого у вашей компании должен быть р/с в Сбербанке, а также доступ в личный кабинет Сбербанк Бизнес Онлайн.' 
} 
};
const buttonStyle = { 
theme: 'default', type: 'default', text: 'Купить в кредит', size: 'default', 
} 
const params = { 
containerModal: 'preview', 
containerButton: 'preview', 
repeatOpen: true, 
shopName: 'Маркетплейс Беру', 
amount: 37800.00, 
deliveryAmount: 1000, 
creditAvailable: true 
creditProducts: creditProduct 
buttonStyle: buttonStyle } 
function onSuccessCallback(result) { console.log(result) } 
function onErrorCallback(result) { console.log(result) 
} 
var obj = new CredInBaskSDK(params, onSuccessCallback, onCancelCallback, onErrorCallback);

Описание параметров

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

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

  • containerModal (String)- класс DOM-элемента, в котором будет размещена кнопка 'Купить в кредит'
  • containerButton (String)- Класс DOM-элемента, в котором будет размещено модальное окно
  • repeatOpen (Boolean) - признак того, что необходимо открыть модальное окно при инициализации виджета.
  • shopName (String) - название партнерского сервиса
  • amount (Number) - сумма заказа клиента
  • deliveryAmount (Number) - стоимость доставки
  • creditAvailable (Boolean) - признак доступности клиенту кредитные предложения
  • creditProducts (Array) - массив кредитных предложений
  • buttonStyle (Object) - параметры стилизации кнопок

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

Параметр repeatOpen = true передается при необходимости открыть модальное окно для инициализации виджета. Например, если при нажатии на кнопку 'Купить в кредит', клиент был переадресован на авторизацию.
Признак доступности клиенту кредитного предложения передается в REST-сервисе GET /fintech/api/v1/user-info

Массив параметров кредитных предложений (params.creditProducts)

  • sumMin (Number) - минимальная сумма доступная для покупки в кредит.
  • sumMax (Number) - максимальная сумма доступная для покупки в кредит.
  • rate (Number) - ставка по кредитному предложению (%).
  • termMin (Number) - минимальный срок кредита (в месяцах).
  • termMax (Number) - максимальный срок кредита (в месяцах).
  • productName (String) - наименование кредитного продукта.
  • productCode (String) - код кредитного продукта.
  • delayRepayment (Number) - льготный период.
  • checkSum (Number) - сумма займа после которой потребуется выездная проверка по месту ведения бизнеса.
  • individual (Boolean) - признак индивидуального кредитного предложения.
  • questions (Array) - часто задаваемые вопросы. Включает в себя вопрос и ответ на него.
const creditProduct = { 
sumMin: 10000, 
sumMax: 3000000, 
rate: 17, 
termMin: 12, 
termMax: 36, 
productName: 'Оборотный кредит', 
productCode: 'MB-F-ip-19', 
delayRepayment: 30, 
checkSum: 3000000, 
individual: true, 
questions: { 
question: 'Как мне оплатить счёт кредитными деньгами?', 
answer: 'Подайте заявку онлайн, после одобрения подпишите кредитный договор электронной подписью и нажмите кнопку «Оплатить»' }, 
{ 
question: 'Как я могу подать заявку?' 
answer: 'Заявка подается через платформу Сбербанк Бизнес Онлайн. Для этого у вашей компании должен быть р/с в Сбербанке, а также доступ в личный кабинет Сбербанк Бизнес Онлайн.' 
} 
};

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

  • theme (String)- цвет кнопки 'Купить в кредит'.

Возможные значения: default - зеленый цвет; white - белый цвет;

  • type (String) - тип кнопки 'Купить в кредит'. Возможные значения: default - квадратная кнопка; rounded - закругленная кнопка;
  • size (String) - размер кнопки 'Купить в кредит'. Возможные значения:

default - обычный размер кнопки; small - маленький размер кнопки;

  • text (String) - текст кнопки 'Купить в кредит'. Возможные значения:
const buttonStyle = { theme: 'default', type: 'default', text: 'Купить в кредит', size: 'default', }

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

Параметры

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

Внешний вид

Внешний вид

Параметры

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

Внешний вид

Внешний вид

Параметры

Тема: светлая, Тип: закруглённая, Текст: 'Купить в Кредит', Размер: уменьшенный

Внешний вид

Внешний вид

Для примера в архиве с библиотекой размещен файл html (SDK.html) с подключенным модулем кредита в корзине

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

Данные о кредитных продуктах должны быть получены через REST-сервис GET /fintech/api/v1/credit-offers. Далее приведен список соответствия полей из REST-сервиса полям для инициализации виджета:

Параметры из REST-сервиса Параметры виджета
sumMin sumMin
sumMax sumMax
rate rate
termMin termMin
termMax termMax
productName productName
productCode productCode
gracePeriod gracePeriod
question question
answer answer
checkSum checkSum
individual individual
delayRepayment delayRepayment

Параметры для функций обратного вызова

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

  • creditAmount (Number) - запрошенная сумма кредита, равная сумме заказа.
  • creditTerm (Number) - выбранный срок кредита (в месяцах).
  • productName (String) - наименование кредитного продукта.
  • productCode (String) - код кредитного продукта.

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

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

  • messageText (String) - сообщение об ошибки.

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

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

Обновление параметров виджета

В случае когда данные по кредитным предложениям получены после открытия модального окна, необходимо вызывать функцию обновления данных refreshModal. Это функция принимающая следующие объекты params, onSuccessCallback, onCancelCallback, onErrorCallback, onOpenModalCallback, которые имеют ту же структуру, что и при инициализации виджета.

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

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

Параметры из REST-сервиса Параметры виджета
creditAmount creditAmount
creditTerm creditTerm
creditProductCode productCode
Остальные параметры REST-сервиса POST /fintech/api/v1/credit-requests заполняются в соответствии с правилами указанными на странице с описанием сервиса.

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

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