По любому вопросу мы в одном клике

Задать вопрос
Поиск по ключевым словам
/

Beeline Mobile ID

Описание

Beeline Mobile ID - новый способ оплаты, который позволяет клиенту авторизовываться в личном кабинете с помощью технологии Mobile ID и проводить оплату с баланса телефона, а так же сохраненными картами.

На текущий момент доступны следующие способы оплаты:

Пошаговое руководство по интеграции beeline-mobile-id.js

Шаг 1. Укажите блок для размещения кнопки на странице

В HTML-коде странице, где должна будет отображаться кнопка Mobile ID нужно указать блок, в который в итоге добавится кнопка. Блок должен размещаться строго внутри тега 

<div class="mobile-pay__container"></div>

Шаг 2. Подключение beeline-mobile-id.js к странице

В <head> страницы нужно подключить скрипт beeline-mobile-id.js

Для UAT (Тестовая среда) используется:

<script src="https://mpay.rbsuat.com/sdk/v1/beeline-mobile-id.js"></script>

Для PROD (Продуктив) используется:

<script src="https://mpay.rbsgate.com/sdk/v1/beeline-mobile-id.js"></script>

Шаг 3. Инициализация кнопки

Подключение кнопки в странице должно происходить только после полной загрузки HTML-документа.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // << Инициализация скрипта
  });
</script>

3.1 Рендер кнопки

Для отрисовки кнопки требуется вызвать функцию BeelineMobileId.createButtonElement() и затем смонтировать элемент в DOM-дерево.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const BeelineMobileId = window.BeelineMobileId;
        const payButtonElement = BeelineMobileId.createButtonElement();
        document.querySelector('#root').append(payButtonElement);
    });
</script>

3.2 Передача параметров платежа

Для передачи параметров платежа, требуется создать сессию с помощью метода BeelineMobileId.createSession() которая может принимать параметры платежа

document.addEventListener('DOMContentLoaded', () => {
  const BeelineMobileId = window.BeelineMobileId;

  const payButtonElement = BeelineMobileId.createButtonElement();
  document.querySelector('#root').append(payButtonElement);

  const mobileIdSession = BeelineMobileId.createSession({
    buttonElement: payButtonElement,
    merchant: {
      login: 'mobilepay',
    },
    order: {
      description: 'Автомобиль DeLorean DMC-12',
      orderNumber: new Date().getTime().toString(),
      amount: 55000,
    },
    successUrl: 'https://example.com/success',
    failUrl: 'https://example.com/fail',
  });
});

Пример инициализации сессии. Кнопка становится кликабельной.

Параметры BeelineMobileId.createSession({})

buttonElement object required
Объект кнопки, полученный при инциализации BeelineMobileId.createButtonElement()

Объект с информацией о продавце.
Содержит в себе параметр login

successUrl string required
Ссылка, на которую нужно перенаправить пользователя после успешной оплаты.
Например: https://example.com/success
По итогу к ссылке добавятся параметры mdOrder (идентификатор заказа в платежном шлюзе)

failUrl string required
Ссылка, на которую нужно перенаправить пользователя после неудачной оплаты.
Например: https://example.com/fail
По итогу к ссылке добавятся параметры mdOrder (идентификатор заказа в платежном шлюзе)

Объект с информацией о заказе.
Содержит в себе следующие параметры:

email string optional
Электронная почта покупателя. На неё платежный шлюз отправит чек об операции.

phone string optional
Телефон покупателя. Если его указать, то он предзаполнится при вызове Mobile ID.
10 цифр. Указывается в формате 9000000000.

postAddress string optional
Адрес доставки товара.

Пример Beeline Mobile ID c корзиной

document.addEventListener('DOMContentLoaded', function () {
  const payButtonElement = BeelineMobileId.createButtonElement();
  document.querySelector('#root').append(payButtonElement);

  const mobileIdSession = BeelineMobileId.createSession({
    buttonElement: payButtonElement,
    merchant: {
      login: 'mobilepay',
    },
    successUrl: 'https://example.com/success',
    failUrl: 'https://example.com/fail',
    order: {
      description: 'Спортивные товары в SportSensey',
      orderNumber: new Date().getTime().toString(),
      amount: 810000,
      email: 'user@example.com',
      phone: '9000000000',
      orderBundle: {
        cartItems: [
          {
            positionId: 'i1',
            name: 'Кроссовки Bosko Sport 42',
            quantity: {
              measure: 'шт',
              value: '1',
            },
            itemAmount: 800000,
            itemCode: 'c1',
          },
          {
            positionId: 'i2',
            name: 'Злаковый батончик PumBar',
            quantity: {
              measure: 'шт',
              value: '2',
            },
            itemAmount: 10000,
            itemPrice: 5000,
            itemCode: 'c2',
          },
        ],
      },
    },
  });
});

Cобытия Beeline Mobile ID

Beeline Mobile ID имеет внутренние события для более гибкой настройки платежа. События позволяют сайту магазина (который использует Beeline Mobile ID) гибко реагировать на поведение пользователя внутри Beeline Mobile ID. Событие нужно передавать как параметр в функцию mobileIdSession.on().

Пользователь нажал кнопку оплаты Beeline Mobile ID.

Событие BeelineMobileId.Event.openDialog

Пример:

mobileIdSession.on(BeelineMobileId.Event.openDialog, () => {
  console.info('Пользователь нажал кнопку оплаты');
});

Пользователь закрыл окно оплаты.

Событие BeelineMobileId.Event.CloseDialog

Пример:

mobileIdSession.on(BeelineMobileId.Event.CloseDialog, () => {
  // Ваш код, который выполнится после того как пользователь закрыл окно оплаты Beeline Pay.
  console.info('Пользователь закрыл окно оплаты');
});

Пользователь закрыл окно в момент опроса статуса оплаты.

Событие BeelineMobileId.Event.UnfinishedOperation

Т.е. оплата могла пройти успешно, однако пользователь недождался экрана с подтверждением этой информации.

Пример:

mobileIdSession.on(BeelineMobileId.Event.UnfinishedOperation, () => {
  // Ваш код, который выполнится после того как пользователь закрыл окно оплаты Mobile ID в момент опроса статуса оплаты
  console.info('Пользователь закрыл окно в момент опроса статуса оплаты');
});

Изменение статуса оплаты.

Событие BeelineMobileId.Event.ChangePaymentStatus

Принимает параметры status и orderId Для корректного определения статуса рекомендуется использовать метод BeelineMobileId.PendingStatuses.includes(status) и BeelineMobileId.SuccessfulStatuses.includes(status)

orderId - id заказа внутри платежного шлюза.

Пример:

mobileIdSession.on(
  BeelineMobileId.Event.ChangePaymentStatus,
  ({ status, orderId }) => {
    if (BeelineMobileId.PendingStatuses.includes(status)) {
      console.log('🕒️ Завершение операции.');
    } else if (BeelineMobileId.SuccessfulStatuses.includes(status)) {
      console.log('✔️ Оплата выполнена УСПЕШНО.');
    } else {
      console.log('❌ Оплата выполнена НЕУСПЕШНО.');
    }

    console.log(`Статус заказа: ${status}. Номер заказа ${orderId}`);
  },
);

Пример:

const bgColors = [
  'linear-gradient(to right, #00b09b, #96c93d)',
  'linear-gradient(to right, #ff5f6d, #ffc371)',
  'linear-gradient(to right, #9a9a9a, #bdbdbd)',
];

function showToast(text, colorIndex) {
  Toastify({
    text: text,
    close: true,
    duration: -1,
    style: {
      background: bgColors[colorIndex],
    },
  }).showToast();
}

document.addEventListener('DOMContentLoaded', () => {
  // Создание кнопки Beeline Mobile ID
  const BeelineMobileId = window.BeelineMobileId;
  const payButtonElement = BeelineMobileId.createButtonElement();
  document.querySelector('#example5').append(payButtonElement);

  // Описание платежной сессии заказа
  const mobileIdSession = BeelineMobileId.createSession({
    buttonElement: payButtonElement,
    merchant: {
      login: 'mobilepay',
    },
    successUrl: 'https://example.com/success',
    failUrl: 'https://example.com/fail',
    order: {
      description: 'Набор T-72AB (Turms-T)',
      orderNumber: new Date().getTime().toString(),
      amount: 650,
      email: 'user@example.com',
      phone: '9001234567',
      currency: '810',
    },
  });

  // Слушаем события Mobile ID
  mobileIdSession.on(
    BeelineMobileId.Event.ChangePaymentStatus,
    ({ status, orderId }) => {
      if (BeelineMobileId.PendingStatuses.includes(status)) {
        showToast('🕒️ Завершение операции.', 2);
      } else if (BeelineMobileId.SuccessfulStatuses.includes(status)) {
        showToast('✔️ Оплата выполнена УСПЕШНО', 0);
      } else {
        showToast('❌ Оплата выполнена НЕУСПЕШНО.', 1);
      }

      showToast(`Статус заказа: ${status}. Номер заказа ${orderId}`, 2);
    },
  );

  mobileIdSession.on('openDialog', () => {
    showToast('Пользователь нажал кнопку оплаты', 2);
  });

  mobileIdSession.on('closeDialog', () => {
    showToast('Пользователь закрыл окно оплаты', 2);
  });

  mobileIdSession.on(BeelineMobileId.Event.UnfinishedOperation, () => {
    showToast('Пользователь закрыл окно в момент опроса статуса оплаты', 2);
  });
});

mobileIdSession.updateOrder() - обновление информации в сессии

Иногда требуется без перезагрузки страницы обновить информацию о цене, составе корзины, описания прямо в реальном времени. Для этого можно использовать метод .updateOrder()

Пример:

<div id="controls" style="margin-bottom: 20px">
  Сумма (в копейках):
  <input type="number" name="amount" value="9900" />
  <button type="button" id="apply">Изменить сумму</button>
</div>

<div id="example6"></div>

<script id="main-script">
  document.addEventListener('DOMContentLoaded', () => {
    const BeelineMobileId = window.BeelineMobileId;
    const payButtonElement = BeelineMobileId.createButtonElement();
    document.querySelector('#example6').append(payButtonElement);

    const mobileIdSession = BeelineMobileId.createSession({
      buttonElement: payButtonElement,
      merchant: {
        login: 'mobilepay',
      },
      successUrl: 'https://example.com/success',
      failUrl: 'https://example.com/fail',
      order: {
        description: 'Автомобиль DeLorean DMC-12',
        orderNumber: new Date().getTime().toString(),
        amount: 9900,
      },
    });

    document.querySelector('#apply').addEventListener('click', () => {
      mobileIdSession.updateOrder({
        ...mobileIdSession.options.order,
        amount: Number(document.querySelector('[name="amount"]').value),
      });
    });
  });
</script>

Сумма (в копейках):

mobileIdSession.destroy() - демонтаж кнопки

Метод mobileIdSession.destroy() используется для корректного удаления кнопки из DOM-дерева.

Пример:

<div id="controls" style="margin-bottom: 20px">
  <button type="button" id="destroy">mobileIdSession.destroy()</button>
  <button type="button" id="destroyRemoveButton">
    mobileIdSession.destroy({removeButton: true})
  </button>
</div>

<div id="example7"></div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const BeelineMobileId = window.BeelineMobileId;
    const payButtonElement = BeelineMobileId.createButtonElement();
    document.querySelector('#example7').append(payButtonElement);

    const mobileIdSession = BeelineMobileId.createSession({
      buttonElement: payButtonElement,
      merchant: {
        login: 'mobilepay',
      },
      order: {
        description: 'Автомобиль DeLorean DMC-12',
        orderNumber: new Date().getTime().toString(),
        amount: 55000,
      },
      successUrl: 'https://example.com/success',
      failUrl: 'https://example.com/fail',
    });
    document.querySelector('#destroy').addEventListener('click', () => {
      mobileIdSession.destroy();
    });

    document
      .querySelector('#destroyRemoveButton')
      .addEventListener('click', () => {
        mobileIdSession.destroy({ removeButton: true });
      });
  });
</script>

Определения статуса платежа

Для корректного и честного определения, что оплата по Mobile ID прошла, рекомендуется делать реализацию через бек-офиc (backend).

Запрос payment/getOrderStatusExtended.do

Для запроса состояния зарегистрированного заказа используется запрос getOrderStatusExtended.do. Например, после того, как вы получили событие BeelineMobileId.Event.ChangePaymentStatus, для того, чтобы убедиться что оплата выполнена успешно, магазин должен через backend сделать POST запрос с заголовком Content-Type: application/json и телом запроса со следующими параметрами:

userName string required
Логин магазина, полученный при подключении

password string required
Пароль магазина, полученный при подключении

language string optional
Язык в кодировке ISO 639-1. Если не указан, считается, что язык – русский. Сообщение ошибке будет возвращено именно на этом языке.

orderNumber string required*
Номер (идентификатор) заказа в системе магазина.

orderId string required*
Номер заказа в платёжной системе. Уникален в пределах системы.

В запросе должен присутствовать либо orderId, либо orderNumber. Если в запросе присутствуют оба параметра, то приоритетным считается orderId.

orderId - id заказа в платежном шлюзе. Его можно получить, либо через BeelineMobileId.Event.ChangePaymentStatus, либо взять из QUERY-параметра orderId для successUrl / failUrl. Запрос делается на следующий адрес:

Для тестовой среды

https://mpay.rbsuat.com/mobilepay/payment/getOrderStatusExtended.do

Для продуктовой среды

https://mpay.rbsgate.com/mobilepay/payment/getOrderStatusExtended.do

Поля ответа

Существует несколько наборов параметров ответа. Какие именно наборы параметров будут возвращены, завит от версии getOrderStatusExtended, указанной в настройках продавца.

orderNumber string required
Номер (идентификатор) заказа в системе магазина.

orderStatus number optional
По значению этого параметра определяется состояние заказа в платёжной системе.

По значению этого параметра определяется состояние заказа в платёжной системе. Во вложении список возможных значений.

actionCode number required
Код ответа.

actionCodeDescription string required
Расшифровка кода ответа на языке, переданном в параметре Language в запросе.

Код ошибки. Во вложении список возможных значений.

errorMessage string optional
Описание ошибки на языке, переданном в параметре Language в запросе.

amount number required
Сумма платежа в копейках (или центах).

currency number optional
Код валюты платежа ISO 4217. Если не указан, считается равным 810 (российские рубли).

date string required
Дата регистрации заказа.

orderDescription string optional
Описание заказа, переданное при его регистрации.

ip string required
IP-адрес покупателя.

Присутствует в ответе, если в заказе содержатся дополнительные параметры продавца. Каждый дополнительный параметр заказа представлен в отдельном элементе merchantOrderParams.

В элементе лежит структура, состоящая из списка элемента secureAuthInfo и следующих параметров:

Элемент состоит из параметров:

Элемент состоит из параметров:

Элемент состоит из параметров:

Примеры запроса и ответа

Пример запроса:

curl --request POST \
  --url https://mpay.rbsuat.com/mobilepay/payment/getOrderStatusExtended.do \
  --header 'Content-Type: application/json' \
  --data '{
    "userName": "test_user",
    "password": "test_user_password",
    "orderId": "04888d6f-7920-7531-8332-8de901efddd0",
    "language": "ru",
    "orderNumber"="0784sse49d0s134567890"
  }'

Пример ответа:

{
  "errorCode": "0",
  "errorMessage": "Успешно",
  "orderNumber": "0784sse49d0s134567890",
  "orderStatus": 6,
  "actionCode": 2007,
  "actionCodeDescription": "Время сессии истекло",
  "amount": 33000,
  "currency": "810",
  "date": 1383819429914,
  "orderDescription": " ",
  "merchantOrderParams":  [
    {
      "name":"email",
      "value":"yap"
    }
  ],
  "attributes": [
    {
      "name": "mdOrder",
      "value": "b9054496-c65a-4975-9418-1051d101f1b9"
    }
  ],
  "cardAuthInfo": {
      "expiration": "201912",
      "cardholderName": "Ivan",
      "secureAuthInfo": {
        "eci": 6,
        "threeDSInfo":  {
          "xid": "MDAwMDAwMDEzODM4MTk0MzAzMjM="
        }
      },
      "pan": "411111**1111"
  },
  "terminalId": "333333"
}

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

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

Номер телефона для проверки 9000000000
Будет некоторое время "грузить", затем перейдете ко второму шагу, выбору способа оплаты.

Тестовая карта
card: 4111 1111 1111 1111
expiry: 12/24 cvc: 123

Код СМС, для подтверждения оплаты по карте
12345678

Категории:
eCommerce Mobile pay
Категории
Результаты поиска
Навигация
Перейти
Закрыть
Категории
Результаты поиска