Подключение кнопки

Установка

Для установки кнопки необходимо прописать на сайте в раздел head:

<script src="https://pay.mts.ru/mts-pay-btn/mts-pay-btn.js"></script>

Для отладки и тестирования кнопки и новых функций можно использовать: https://sandbox.pay.mts.ru/mts-pay-btn/mts-pay-btn.js

Затем добавить в body новый элемент:

<div id="mts-pay-btn"></div>

В данный элемент будет рендериться кнопка.

Интерфейсы кнопки

Типы данных, используемых при инициализации кнопки:

interface IError {
  requestId?: string
  code?: string
  message?: string
}

interface OnEventData {
  error?: IError
  propsName?: string
  value?: string
  eventName: 'initialized' | 'successPayment' | 'failPayment' | 'successTokenCreate' | 'validationError' | 'close' | 'error'
}

type TOnEvent = (data: OnEventData) => void
type TOnClick = () => Promise<string>

type TColorMode = 'dark' | 'light'
type TPageColorMode = 'dark' | 'light'
type TEnvironment = 'TEST' | 'PROD'
type TWindowType = 'current' | 'tab' | 'modal'
type TType = 'plain' | 'pay' | 'refill' | 'subscribe' | 'buy' | 'order' | 'book' | 'support' | 'donate' | 'rent' | 'tips' | 'continue'
type TSelectedPaymentToolType = 'mtsBankCard' | 'boundCard' | 'mtsCharging' | 'mtsMobileCommerce' | 'extMobileCommerce' | 'applePay' | 'googlePay' | 'samsungPay' | 'sbp' | 'newCard' | 'ewalletBinding' | 'mtsDengiBankCard' | 'sbpToken'

type TStyle = {
  width?: number
  height?: number
  borderRadius?: number
}

interface InitBtnProps {
  successReturnUrl: string
  failReturnUrl: string
  merchantUrl?: string
  phone?: string
  type?: TType
  colorMode?: TColorMode
  pageColorMode?: TPageColorMode
  style?: TStyle
  environment?: TEnvironment
  windowType?: TWindowType
  selectedPaymentToolType?: TSelectedPaymentToolType
  selectedPaymentToolId?: string
  hasSuccessScreen?: boolean
  onEvent?: TOnEvent
  onClick: TOnClick
}

type TMtsPayBtn = (props: InitBtnProps) => {
  render: (id: string) => void
  destroy: () => void
}

Инициализация кнопки

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

function clickHandler() {
  // custom business logic
  return Promise.resolve(sessionId)
}

const eventHandler = (data) => {
  // custom business logic
  console.log('eventHandler', data)
}

var params = {
  successReturnUrl: 'https://merchant.site?param1=value1¶m2=value2',
  failReturnUrl: 'https://merchant.site?param1=value1¶m2=value2',
  merchantUrl: 'https://merchant.site',
  type: 'pay',
  colorMode: 'light',
  pageColorMode: 'light',
  style: {
    width: 240,
    height: 44,
    borderRadius: 10,
  },
  environment: 'PROD',
  windowType: 'current',
  selectedPaymentToolType: 'sbp',
  hasSuccessScreen: true,
  onClick: clickHandler,
  onEvent: eventHandler
}

var mtsPayBtn = new MtsPayBtn(params);
mtsPayBtn.render('mts-pay-btn');

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

1. successReturnUrl — ссылка на страницу завершения оплаты при успешном сценарии, обязательно начинается с ’https://’ (обязательный параметр).
2. failReturnUrl — ссылка на страницу завершения оплаты при негативном сценарии, обязательно начинается с ’https://’ (обязательный параметр).
3. merchantUrl — ссылка на сайт мерчанта или партнера-интегратора (необязательный параметр)
4. phone — телефон пользователя для персонализации в кнопке (необязательный параметр)
5. type — тип кнопки, по умолчанию ’pay’ (доступные типы кнопок указаны ниже) (необязательный параметр)
6. colorMode — цвет кнопки по умолчанию (необязательный параметр).
7. pageColorMode — цветовая схема платежной страницы, куда будет перенаправляться пользователь для оплаты (необязательный параметр).
8. style — объект стилизующий кнопку (необязательный параметр):
   1. width — ширина кнопки, по умолчанию 100% (необязательный параметр);
   2. height — высота кнопки, по умолчанию 52px (необязательный параметр);
   3. borderRadius — радиусы скругления кнопки, по умолчанию 16px (необязательный параметр);
9. environment — если нужно использовать боевое апи, то необходимо передать значение ’PROD’ , иначе все запросы будут идти на тестовое апи. (необязательный параметр).
10. windowType — режим отображения платежной страницы (необязательный параметр):
    1. current — редирект на платежную страницу в текущем окне;
    2. modal — открытие платежной страницы в новом всплывающем окне;
    3. tab — открытие платежной страницы в новой вкладке (по умолчанию);
11. selectedPaymentToolType — предвыбранный тип платёжного инструмента (необязательный параметр).
12. selectedPaymentToolId — предвыбранный идентификатор платёжного инструмента. Для передачи идентификатора обязательно должен быть определен тип платёжного инструмента, т.е. selectedPaymentToolType (необязательный параметр).
13. hasSuccessScreen — при переданном значении true и windowType = ’current’ пользователю будет отображаться финальный экран успеха платежа. Если не передать параметр или передать значение false, то осуществится переход на successReturnUrl без отображения финального экрана успеха (необязательный параметр);
14. onClick — callback Promise функция, которая должна нам вернуть значение sessionId, по которому мы будем проводить платеж (обязательный параметр).
15. onEvent — callback функция, в которую мы будем передавать сообщение об ошибке, cardToken и событие происходящее в виджете карточного токена (необязательный параметр)

Если передаются невалидные successReturnUrl и failReturnUrl, то кнопка рендериться не будет.

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

mtsPayBtn.destroy — функция, которую можно вызвать, чтобы размонтировать кнопку.

Типы кнопок

• plain — без текста
• pay — ’Оплатить’
• refill — ’Пополнить’
• subscribe — ’Подписаться’
• buy — ’Купить’
• order — ’Заказать’
• book — ’Забронировать’
• support — ’Поддержать’
• donate — ’Пожертвовать’
• rent — ’Арендовать’
• tips — ’Оставить чаевые’
• continue — ’Продолжить’

Текст слева от иконки не выводится:

• Если он не помещается. Например, при очень маленькой ширине экрана или маленьком значении width в style

• При передаче параметра phone

Ручное удаление отрендеренной кнопки

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

var mtsPayBtn = new MtsPayBtn(params); // инициализируем
mtsPayBtn.render('mts-pay-btn'); // рендерим
mtsPayBtn.destroy(); // удаляем

Персонализация кнопки

Персонализация кнопки является опциональной возможностью, которая доступна при наличии авторизационной cookie. Cookie появляется после авторизации.

ВАЖНО! В мобильных браузерах сторонние cookie по умолчанию недоступны. После перезапуска приложения cookie будет недоступна. В результате в кнопке перестанет выводиться персональная информация (последние 4 цифры карты/аккаунта). Доступность cookie настраивается в настройках браузера на мобильном устройстве. После разрешения использования сторонних cookie в браузере и авторизации — в кнопке появится персональная информация.