Макеты виджета доступности MTS Flex
Для установки sdk необходимо прописать на сайте скрипт в раздел head:
<script src="https://pay.mts.ru/widgets/bnpl-light-sdk.js"></script>
После загрузки скрипта в глобальную область видимости добавится функция initMtsPayBnplLight.
Затем добавить в body новый элемент:
<div id="widget"></div>
В данный элемент будет рендериться виджет.
type TErrorRes = {
requestId: string;
code: string;
message: string;
userMessage: string;
isFatal: boolean;
name: string;
}
type TBnplLightOnEventData = {
error?: TErrorRes
value?: string | boolean
message?: string
eventName: 'error' | 'validationError' | 'flexPaymentUnavailable' | 'isFlexSwitched' | 'successPayment' | 'failPayment' | 'close'
}
type TBnplLightOnEvent = (data: TBnplLightOnEventData) => void
type TColorMode = 'light' | 'dark'
type TEnvironment = 'DEV' | 'TEST' | 'PROD' | 'LOCAL'
type TWindowType = 'current' | 'tab' | 'modal'
type TBnplFlexInfo = {
type?: 'default' | 'schedule'
onEvent: TBnplLightOnEvent
}
type TBnplFlexSwitchInfo = {
type?: 'default' | 'schedule'
onEvent: TBnplLightOnEvent
}
type TBnplLightFlexPayOnClick = () => Promise<string>
type TBnplLightSelectedPaymentToolType =
| 'mtsBankCard'
| 'boundCard'
| 'mtsDengiBankCard'
| 'sbpToken'
| 'mtsCharging'
| 'mtsMobileCommerce'
| 'extMobileCommerce'
| 'sbp'
| 'newCard'
| 'ewalletBinding'
type TBnplFlexPay = {
tokenId?: string
successReturnUrl: string
failReturnUrl: string
merchantUrl?: string
type?: 'default' | 'schedule'
btnType?: 'default' | 'payWithFlex'
btnColorMode?: 'default' | 'mts'
pageColorMode?: 'dark' | 'light'
windowType?: TWindowType
selectedPaymentToolType?: TBnplLightSelectedPaymentToolType
selectedPaymentToolId?: string
onEvent?: TBnplLightOnEvent
onClick: TBnplLightFlexPayOnClick
}
interface InitBnplLightSdkProps {
amount: string
phone: string
colorMode?: TColorMode
environment?: TEnvironment
flexInfo?: TBnplFlexInfo
flexSwitchInfo?: TBnplFlexSwitchInfo
flexPay?: TBnplFlexPay
}
type TInitMTSPayBnplLight = (props: InitBnplLightSdkProps) => {
render: (param: string | HTMLElement) => void
destroy: () => void
}
Для инициализации виджета можно использовать следующий пример:
// Пример кода
function widgetEventHandler(data) {
// business logic
}
var baseParams = {
amount: '1000',
phone: '74959214881',
colorMode: 'dark',
environment: 'PROD',
}
// Вариант с графиком платежей
var params = {
...baseParams,
flexSwitchInfo: {
type: 'schedule',
onEvent: widgetEventHandler
}
}
// Вариант с кнопкой оплаты
var params = {
...baseParams,
flexPay: {
onClick: () => Promise.resolve('000'),
onEvent: widgetEventHandler,
tokenId: '111',
merchantUrl: 'https://google.com/merchantUrl',
failReturnUrl: 'https://google.com/failReturnUrl',
successReturnUrl: 'https://google.com/successReturnUrl',
pageColorMode: 'light',
btnColorMode: 'mts',
windowType: 'modal',
type: 'payWithFlex',
selectedPaymentToolId: '',
selectedPaymentToolType: ''
}
}
var widget = window.initMtsPayBnplLight(params);
widget.render('widget');
params — объект с инициализируемыми данными, в который входят:
Приложение отправляет события:
widget.render - функция, которая отрендерит виджет в тот id, который в нее передается.
widget.destroy - функция, которую можно вызвать, чтобы размонтировать виджет.
Вместо id элемента, куда будет рендериться виджет, можно передать сам элемент:
var widget = initMtsPayBnplLight(params); // инициализируем
var element = document.getElementById('widget') // ищем элемент
widget.render(element); // рендерим
Если по каким-то причинам, необходимо вручную удалить виджет с экрана, то необходимо выполнить следующий код (рекомендуем избегать таких ситуаций):
var widget = initMtsPayBnplLight(params); // инициализируем
widget.render('widget'); // рендерим
widget.destroy(); // удаляем