Данная страница описывает интеграцию web-виджета на страницу вашего интернет магазина.
Бизнес логика работы интерфейса задается на уровне создания сессии и передачи токена SSO.
Виджет не поддерживает работу с WebView. Для работы с WebView просьба использовать платёжную страницу.
Для установки платёжного виджета необходимо прописать на сайте скрипт в раздел head:
<script src="https://pay.mts.ru/web-sdk/sdk.js"></script>
Затем добавить в body новый элемент:
<div id="widget"></div>
interface ResultHandlerData {
errorCode?: string
message?: string
eventName: 'successPayment' | 'failPayment' | 'validationError' | 'close'
}
type TResultHanlder = (data: ResultHandlerData) => void
type TScenarioType = 'pay' | 'refill'
type TColorMode = 'light' | 'dark'
type TBtnEndText = 'complete' | 'returnToStore' | 'close' | 'return'
type TSelectedPaymentToolType = 'mtsBankCard' | 'boundCard' | 'mtsCharging' | 'mtsMobileCommerce' | 'extMobileCommerce' | 'applePay' | 'googlePay' | 'samsungPay' | 'sbp' | 'newCard' | 'ewalletBinding' | 'mtsDengiBankCard' | 'sbpToken'
interface InitSdkProps {
scenarioType: TScenarioType
sessionId: string
tokenId?: string
successReturnUrl?: string
failReturnUrl?: string
selectedPaymentToolType?: TSelectedPaymentToolType
selectedPaymentToolId?: string
environment?: 'TEST' | 'PROD'
colorMode?: TColorMode
btnEndText?: TBtnEndText
hasSuccessScreen?: boolean
isBnplActive?: boolean
resultHandler?: TResultHanlder
}
type TMTSPay = (props: InitSdkProps) => {
render: (param: string | HTMLElement) => void
destroy: () => void
}
Для инициализации виджета необходимо при клике по кнопке оплаты пользователем вставить следующий код:
function widgetResultHandler({ errorCode = '', message = '', eventName }) {
// business logic
}
var params = {
scenarioType: 'pay',
sessionId: 'sessionId',
tokenId: 'tokenId',
successReturnUrl: 'https://merchant.site/success',
failReturnUrl: 'https://merchant.site/failed',
selectedPaymentToolType: 'sbp',
environment: 'PROD',
colorMode: 'light',
btnEndText: 'complete',
hasSuccessScreen: true,
resultHandler: widgetResultHandler
}
var widget = new MTSPay(params);
widget.render('widget');
Где params - объект с инициализируемыми данными.
В него входят:
widget.render - функция, которая отрендерит виджет в тот id, который в нее передается.
widget.destroy - функция, которую можно вызвать, чтобы размонтировать виджет.
Вместо id элемента, куда будет рендериться виджет, можно передать сам элемент:
var widget = new MTSPay(params); // инициализируем
var element = document.getElementById('widget') // ищем элемент
widget.render(element); // рендерим
Если по каким-то причинам необходимо вручную удалить виджет с экрана, то необходимо выполнить следующий код:
var widget = new MTSPay(params); //
инициализируем widget.render('widget'); // рендерим
widget.destroy(); // удаляем
Callback функция - в которую будет передаваться информация об ошибках, статусе платежа.
resultHandler, вызывается:
В недавнем прошлом у нас существовал замечательный виджет, который многим не нравился, поэтому теперь он не развивается. Мы обновили дизайн, сделали логику более прозрачной и понятной. Однако (куда же без однако), требуется немного обновить способ взаимодействия.
Нельзя использовать глобальные стили вместе с нашим виджетом, так как они могут повлиять на его внешний вид и вызвать некорректное отображение.
Пример того, как делать нельзя:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<style>
h1 {
color: red;
}
</style>
</head>
<body>
</body>
</html>
Обратите внимание, что при работе с виджетом идет обрезка лишних нулей (например, 10.10→10.1; 1,00→1), это является особенностью функционала.