SDK-виджет для кредитов - фронтенд-компонент, который встраивается в процесс выбора способы оплаты на Вашем ресурсе как альтернативный способ оплаты покупки. Виджет имеет готовое оформление в стилистике Альфа-Банка с возможностью изменения состояния и оформления под стилистику магазина.
Пример SDK-виджета:
Добавление компонента с CDN-сервера Альфа-Банка
1<script src="https://alfabank.servicecdn.ru/files/alfa-b2b-installment-plugin-1.0.js"></script>Взаимодействие с SDK-виджетом
При взаимодействии пользователя с фронтенд-компонентом необходимо настроить обработчики событий для взаимодействия с API Банка.
В клиентском сценарии необходимо использовать методы для изменения состояния компонента, описанные ниже.
| Метод | Входные параметры | Описание |
|---|---|---|
setIsLoading |
boolean | Отображение спиннера |
setIsDisabled |
boolean | Управление доступностью виджета |
setTooltipMessage |
string | Отображение переданного текста в тултипе |
showTooltip |
- | Отображение тултипа |
hideTooltip |
- | Скрытие тултипа |
addClick |
() => void | Обработчик события клика, внутри которого содержится бизнес-логика |
removeClick |
() => void | Удаление обработчика события addClick |
Для добавления обработчика события клика на виджет необходимо вызвать метод addClick, передав в него функцию обратного вызова (callback).
Параметры инициализации компонента
| Параметр | Тип параметра | Тип данных | Обязательность | Описание | Варианты значений |
|---|---|---|---|---|---|
| root | Пропс | HTMLElement | true | HTML-элемент размещения виджета | document.querySelector('.payment__methods__alfa') |
| view | Объект, который конфигурирует визуальное представление виджета | ||||
| text | Пропс | string | true | Текст, который будет отображён на виджете | Купить в рассрочку |
| size | Пропс | string | true | Размер виджета на странице | xs s m l xl |
| variant | Пропс | string | true | Вариант отображения виджета | primary secondary outlined |
| tooltip | Объект конфигурации тултипа | ||||
| defaultMessage | Пропс | string | true | Текстовое значение для тултипа по умолчанию | Что-то пошло не так, попробуйте ещё раз |
| position | Пропс | string | true | Позиция отображения тултипа относительно виджета | top right bottom left |
Пример работы виджета
1<script>
2 const {AlfaInstallmentPlanPlugin} = alfaB2B;
3
4
5 /** Пустой элемент, куда будет вставлен виджет **/
6 const root = document.querySelector('.payment__methods__alfa');
7
8
9 /** Инициализация виджета **/
10 const Plugin = new AlfaInstallmentPlanPlugin({
11 root,
12 view: {
13 size: 's',
14 variant: 'primary',
15 text: 'Купить в рассрочку',
16 tooltip: {
17 position: 'top',
18 defaultMessage: 'some text',
19 }
20 }
21 });
22
23
24 /** Условный пример обработчика события и работы виджета **/
25 const handleClick = async () => {
26 try {
27 Plugin.hideTooltip();
28 Plugin.setIsLoading(true);
29 const {data} = await fetch('https://partner.exampleurl.ru');
30
31
32 if (!data.params) {
33 throw new Error('Сервис сейчас не доступен, попробуйте позже')
34 }
35
36
37 window.open(`https://alfabank.ru/sme/profits/b2b/?dealId={dealId}`)
38 } catch (e) {
39 const {message} = e;
40 Plugin.setTooltipMessage(message);
41 Plugin.showTooltip();
42 } finally {
43 Plugin.setIsLoading(false);
44
45
46 setTimeout(() => {
47 Plugin.hideTooltip();
48 }, 5_000);
49 }
50 };
51
52
53
54
55 Plugin.addClick(handleClick);
56</script>