# Открытие в модальном окне {#ru_PP_method_ModalWindow .concept}

статья о порядке открытия платёжной формы Payment Page в модальном окне HTML-страницы с использованием JavaScript-библиотеки Ecommpay и собственных решений

**На уровень выше:**[Способы открытия платёжной формы](ru_PP_Integration.md)

## Общая информация {#ru_pp_opening_modal_overview}

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

![](images/ecommpay/ru_pp_general_2.svg)

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

1.  Подключить в клиентской части CSS-библиотеку от Ecommpay, обеспечивающую корректное отображение платёжной формы. Эта библиотека расположена по адресу `https://paymentpage.ecommpay.com/shared/merchant.css`.

2.  Настроить политику обеспечения безопасности контента с помощью директив Content Security Policy, указав в HTTP-заголовке `Content-Security-Policy` адреса источников, необходимых для корректной работы платёжной формы \([подробнее](ru_pp_interaction_organisation.md#section_m5x_m2v_njc)\).

    ``` {#codeblock_ejr_n4k_mjc}
    Content-Security-Policy:
    script-src https://paymentpage.ecommpay.com https://applepay.cdn-apple.com;
    style-src https://paymentpage.ecommpay.com;
    img-src https://applepay.cdn-apple.com;
    frame-src https://paymentpage.ecommpay.com https://applepay.cdn-apple.com
    ```

3.  Определить события, при наступлении которых должна открываться платёжная форма\(например, переход по кнопке оплаты\).
4.  Обеспечить вызов платёжной формы по требуемым событиям, с использованием собственных решений или JavaScript-библиотеки от Ecommpay, расположенной по адресу `https://paymentpage.ecommpay.com/shared/merchant.js`.

**Внимание:** Следует учитывать, что для корректной работы платёжной формы CSS- и JavaScript-библиотеки от Ecommpay должны подключаться через сеть доставки содержимого \(Content Delivery Network, CDN\); локальное хранение этих библиотек не допускается.

Для работы с платёжным методом Apple Pay при таком варианте открытия Payment Page необходимо также предварительно зарегистрировать рабочие домены веб-сервиса в сервисе Apple Pay \([подробнее](ru_dbl_projects.md#)\).

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

Для открытия Payment Page в модальном окне с использованием собственных решений необходимо подготовить соответствующий скрипт, обеспечивающий вызовы формы с указанием требуемых параметров и подписи к ним. Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: [Спецификация Payment Page API](ru_PP_Parameters.md) и [Работа с подписью к данным](ru_platform_signature.md#).

## Вызов с использованием JavaScript-библиотеки Ecommpay {#ru_pp_opening_modal_via_javascript_library}

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

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

1.  Каждое обращение может осуществляться одним из двух методов:
    -   `bind` \(`EPayWidget.bind`\) — если платёжную форму необходимо открывать по щелчку кнопки \(с указанием её идентификатора, `<pay_button_id>`\);
    -   `run` \(`EPayWidget.run`\) — если платёжную форму необходимо открывать по какому-либо другому событию в пользовательском интерфейсе.
2.  В каждом обращении должен указываться JavaScript-объект `configObj` с параметрами вызова платёжной формы и с подписью к ним.

    Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: [Спецификация Payment Page API](ru_PP_Parameters.md) и [Работа с подписью к данным](ru_platform_signature.md#).

3.  При необходимости в любом обращении может также указываться HTTP-метод отправки запроса \(`method`\)— POST или GET. Если он не указывается, по умолчанию применяется метод GET.
4.  Дополнительно в любом обращении могут указываться функции-обработчики для сбора информации о действиях пользователя.

    Информация о таких функциях представлена в статье [Контроль интерфейсных событий](ru_pp_ui_monitoring.md#).


```language-javascript
EPayWidget.bind('<pay_button_id>', configObj, method);

EPayWidget.run(configObj, method);
```

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

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

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

```language-xml
<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>
```

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

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

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

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

```language-json
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 пикселей.