Виджет MTS Flex

Установка sdk

Для установки sdk необходимо прописать на сайте скрипт в раздел 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' | 'flexPaymentUnavailable'
}

type TResultHanlder = (data: ResultHandlerData) => void

 type TScenarioType = 'flex'
 type TColorMode = 'light' | 'dark'
 type TBtnEndText = 'complete' | 'returnToStore' | 'close' | 'return'
 type TSelectedPaymentToolType = 'mtsBankCard' | 'boundCard' | 'mtsDengiBankCard' | 'newCard' | 'ewalletBinding'

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
  resultHandler?: TResultHanlder
}

type TMTSPay = (props: InitSdkProps) => {
  render: (param: string | HTMLElement) => void
  destroy: () => void
}

Инициализация виджета для сценария Flex

Для инициализации виджета необходимо при клике по кнопке оплаты пользователем вставить следующий код:

function widgetResultHandler({ errorCode = '', message = '', eventName }) {
  // business logic
}

var params = {
  scenarioType: 'flex', 
  sessionId: 'sessionId',
  tokenId: 'tokenId',
  successReturnUrl: 'https://merchant.site/success',
  failReturnUrl: 'https://merchant.site/failed',
  selectedPaymentToolType: 'newCard',
  environment: 'PROD',
  colorMode: 'light',
  btnEndText: 'complete',
  hasSuccessScreen: true,
  resultHandler: widgetResultHandler
}

var widget = new MTSPay(params);
widget.render('widget');

Где params - объект с инициализируемыми данными, в который входят:

1. scenarioType - тип сценария, для разовой оплаты нужно передать значение 'flex' (обязательный параметр).
2. sessionId - id сессии, который мерчант получает при ее создании (обязательный параметр).
3. tokenId - токен, необходимый для бесшовной авторизации, позволяет показать привязанные карты пользователя, если такие имеются (необязательный параметр).
4. successReturnUrl - ссылка на страницу завершения оплаты при успешном сценарии, обязательно начинается с 'https://' (необязательный параметр).
5. failReturnUrl - ссылка на страницу завершения оплаты при негативном сценарии, обязательно начинается с 'https://' (необязательный параметр).
6. selectedPaymentToolType - предвыбранный тип платёжного инструмента (необязательный параметр).
7. selectedPaymentToolId - предвыбранный идентификатор платёжного инструмента. Для передачи идентификатора обязательно должен быть определен тип платёжного инструмента, т.е. selectedPaymentToolType (необязательный параметр).
   
   1. если selectedPaymentToolType=ewalletBinding, идентификационный номер привязанного способа оплаты (поиск осуществляется по cardId ПЦЭК и bindingId ПЦЭК).
8. environment - если нужно использовать тестовое апи, то необходимо передать значение 'TEST', иначе все запросы будут идти на продовое апи (необязательный параметр).
9. colorMode - цветовая палитра виджета по умолчанию (необязательный параметр).
10. btnEndText - текст кнопки завершения на финальном экране виджета (необязательный параметр).
11. hasSuccessScreen - при переданном значении true пользователю будет показываться финальный экран успеха платежа. Если не передать параметр или передать false, то финального экрана успеха не будет, виджет закроется, и передадутся события успеха платежа и закрытия виджета. Если был передан successReturnUrl, то также будет переход на этот урл. (необязательный параметр).
12. resultHandler - callback функция, в которую будет передаваться информация об ошибках, статусе платежа (необязательный параметр).

widget.render - функция, которая отрендерит виджет в тот id, который в нее передается.

widget.destroy - функция, которую можно вызвать, чтобы размонтировать виджет.

Передача в метод render HTMLElement

Вместо id элемента, куда будет рендериться виджет, можно передать сам элемент:

var widget = new MTSPay(params); // инициализируем
var element = document.getElementById('widget') // ищем элемент
widget.render(element); // рендерим

Ручное удаление отрендеренного виджета

Если по каким-то причинам, необходимо вручную удалить виджет с экрана, то необходимо выполнить следующий код (рекомендуем избегать таких ситуаций):

var widget = new MTSPay(params); // инициализируем
widget.render('widget'); // рендерим
widget.destroy(); // удаляем