Открытие в модальном окне

Общая информация

При открытии в модальном окне платёжная форма Payment Page отображается поверх страницы веб-сервиса. Такой вариант прерывает взаимодействие пользователя с веб-сервисом, но при этом сохраняет контекст, фокусирует на оплате и не ведёт к переходу на другую страницу.

Чтобы открывать платёжную форму в модальном окне, на стороне веб-сервиса следует:

Подключить CSS-библиотеку от ecommpay, расположенную по адресу https://paymentpage.ecommpay.com/shared/merchant.css.

Подключить в клиентской части CSS-библиотеку от ecommpay, обеспечивающую корректное отображение платёжной формы. Эта библиотека расположена по адресу https://paymentpage.ecommpay.com/shared/merchant.css.
Определить события, при наступлении которых должна открываться платёжная форма (например, переход по кнопке оплаты).
Обеспечить вызов платёжной формы по требуемым событиям, с использованием собственных решений или JavaScript-библиотеки от ecommpay, расположенной по адресу https://paymentpage.ecommpay.com/shared/merchant.js.

Вызов с использованием собственных решений

Для открытия Payment Page в модальном окне с использованием собственных решений необходимо подготовить соответствующий скрипт, обеспечивающий вызовы формы с указанием требуемых параметров и подписи к ним. Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: Параметры вызова платёжной формы и Работа с подписью к данным.

Вызов с использованием JavaScript-библиотеки ecommpay

Для открытия Payment Page в модальном окне с использованием JavaScript-библиотеки merchant.js от ecommpay необходимо подключить эту библиотеку в клиентской части веб-сервиса и использовать соответствующие обращения к объекту EPayWidget.

Поскольку этот вариант открытия платёжной формы является базовым для библиотеки merchant.js, при работе с объектом EPayWidget в таких случаях не требуется указывать специализированные параметры, характеризующие способ открытия, и достаточно соблюдения общих условий:

Каждое обращение может осуществляться одним из двух методов:
- bind (EPayWidget.bind) — если платёжную форму необходимо открывать по щелчку кнопки (с указанием её идентификатора, <pay_button_id>);
- run (EPayWidget.run) — если платёжную форму необходимо открывать по какому-либо другому событию в пользовательском интерфейсе.
В каждом обращении должен указываться JavaScript-объект configObj с параметрами вызова платёжной формы и с подписью к нимс параметрами вызова платёжной формы и с подписью к ним.
Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: Параметры вызова платёжной формы и Работа с подписью к данным.
При необходимости в любом обращении может также указываться HTTP-метод отправки запроса (method) — POST или GET. Если он не указывается, по умолчанию применяется метод GET.
Дополнительно в любом обращении могут указываться функции-обработчики для сбора информации о действиях пользователя (подробнее).
Информация о таких функциях представлена в статье Получение и обработка информации о действиях с платёжной формой.

Рис. 1. Сигнатура методов bind и run

EPayWidget.bind('<pay_button_id>', configObj, method);

EPayWidget.run(configObj, method);

Рис. 2. Пример обращения с использованием метода bind

EPayWidget.bind('pay_button_id', // Идентификатор кнопки 
    { project_id: 42, // Идентификатор проекта
      customer_id: '17008', // Идентификатор пользователя
      payment_id: '18641868', // Идентификатор платежа
      payment_amount: 8855, // Сумма платежа
      payment_currency: 'USD', // Код валюты платежа
      signature: 'YWb6Z20ByxpQ30hfTI' }, // Подпись
    'post')

Рис. 3. Пример обращения с использованием метода run

EPayWidget.run(    
    { project_id: 42, // Идентификатор проекта
      customer_id: '17008', // Идентификатор пользователя
      payment_id: '18641868', // Идентификатор платежа
      payment_amount: 8855, // Сумма платежа
      payment_currency: 'USD', // Код валюты платежа
      signature: 'YWb6Z20ByxpQ30hfTI' }, // Подпись
    'post')

HTML-код страницы веб-сервиса при этом может выглядеть следующим образом.

<html>
<head>
<!-- Adding ecommpay libraries -->
  <link rel="stylesheet" href="https://paymentpage.ecommpay.com/shared/merchant.css">
  <script src="https://paymentpage.ecommpay.com/shared/merchant.js"></script>
  <script type="text/javascript">var EP_HOST = 'https://paymentpage.ecommpay.com';</script>
<!-- Other parts -->
</head>
<body>
  <!-- JS command to open Payment Page -->
  <script type="text/javascript">
      EPayWidget.run({ project_id: 42,
                       customer_id: '17008',
                       payment_id: '18641868',
                       payment_amount: 8855,
                       payment_currency: 'USD',
                       signature: 'YWb6Z20ByxpQ30hfTI' });
  </script>
  <!-- Other parts -->
</body>
</html>

Управление размерами страниц сторонних сервисов

При открытии платёжной формы в модальном окне и последующем перенаправлении к сторонним сервисам, таким как сервисы банков, платёжных систем и провайдеров, размеры окна по умолчанию автоматически подстраиваются под размеры отображаемых страниц. Вместе с тем, для дополнительной подстройки под различные ситуации (в том числе с учётом размеров экранов пользователей) можно указывать желаемые размеры страниц таких сервисов — тогда для страниц сторонних сервисов используются указанные размеры, за исключением случаев, когда эти страницы открываются в виде отдельных HTML-страниц.

При открытии платёжной формы в модальном окне и последующем перенаправлении к сторонним сервисам размеры окна по умолчанию автоматически подстраиваются под размеры отображаемых страниц. Вместе с тем,можно указывать желаемые размеры страниц таких сервисов — тогда используются указанные размеры, за исключением случаев, когда эти страницы открываются в виде отдельных HTML-страниц.

Чтобы задавать размеры страниц, используемые при переходах к сторонним сервисам, при вызове платёжной формы в составе параметра payment_methods_options необходимо передавать требуемые значения высоты и ширины таких страниц, определяемые как redirect_window_height и redirect_window_width. Эти параметры можно указывать двумя способами:

Чтобы задавать размеры страниц, используемые при переходах к сторонним сервисам, при вызове платёжной формы в составе параметра payment_methods_options необходимо передавать требуемые значения высоты (redirect_window_height) и ширины (redirect_window_width). Эти параметры можно указывать двумя способами:

непосредственно в составе параметра payment_methods_options, как актуальные для всех сторонних сервисов, если не задано иное;
в качестве параметров для отдельных платёжных методов, указываемых через их коды (согласно справочнику) в соответствии с приведённой в примере структурой.

Рис. 4. Пример набора параметров для задания размеров страниц сторонних сервисов

payment_methods_options:"{
    "redirect_window_height":1200,
    "redirect_window_width":1200,
    "card":{"redirect_window_height":600, "redirect_window_width":900},
    "neteller-wallet":{"redirect_window_height":900, "redirect_window_width":1200}
}"

В приведённом примере указаны размеры, которые должны использоваться по умолчанию для всех сторонних сервисов, и размеры для отдельных платёжных методов. Эти размеры применяются следующим образом:

для всех методов, кроме card и neteller-wallet, задаются высота 1200 пикселей и ширина 1200 пикселей;
для метода card — задаются высота 600 пикселей и ширина 900 пикселей;
для метода neteller-wallet — задаются высота 900 пикселей и ширина 1200 пикселей.