# Открытие в виде отдельной HTML-страницы {#ru_PP_method_NewTab .concept}

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

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

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

При открытии в виде отдельной HTML-страницы платёжная форма Payment Page отображается в отдельной вкладке браузера.С учётом того, как настроена работа браузера, это может быть уже использовавшаяся для веб-сервиса или новая вкладка, но в любом из этих случаев взаимодействие пользователя с веб-сервисом прерывается и он перенаправляется к другой странице, которая фокусирует его на оплате. При этом по завершении оплаты пользователь может быть снова перенаправлен от платёжной формы к веб-сервису \([подробнее](ru_PP_redirect_modes.md#)\).

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

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

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

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

Для открытия Payment Page в виде отдельной HTML-страницы достаточно перенаправить пользователя по ссылке следующего формата:

```
https://paymentpage.ecommpay.com/payment?<parameters>
```

В этой ссылке `<parameters>` представляет собой строку данных в виде пар названий и значений параметров \(в том числе подписи\) со знаком `&` в качестве разделителя. Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: [Спецификация Payment Page API](ru_PP_Parameters.md) и [Работа с подписью к данным](ru_platform_signature.md#).

```
https://paymentpage.ecommpay.com/payment?project_id=42&customer_id=123&payment_id=4438&payment_amount=1000&payment_currency=EUR&signature=AE5hmtzdP0Dt7qGTg...
```

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

Предоставляемая Ecommpay JavaScript-библиотека, прежде всего, призвана упрощать открытие платёжной формы [в модальном окне](ru_PP_method_ModalWindow.md#) и [в элементе iframe](ru_PP_method_Embedded.md#). Вместе с тем, она может использоваться и для открытия формы в виде отдельной HTML-страницы. Например, это может быть актуально для открытия формы в виде отдельной страницы на мобильных устройствах и в модальном окне на любых других.

Для открытия Payment Page в виде отдельной страницы с использованием JavaScript-библиотеки `merchant.js` от Ecommpay необходимо подключить эту библиотеку в клиентской части веб-сервиса и использовать соответствующие обращения к объекту `EPayWidget`. Кроме того, если планируется использовать JavaScript-библиотеку `merchant.js` и для других способов открытия Payment Page, следует подключить также CSS-библиотеку, расположенную по адресу `https://paymentpage.ecommpay.com/shared/merchant.css`.

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

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

-   `redirect_on_mobile` со значением `true` — для открытия платёжной формы в виде отдельной HTML-страницы только на мобильных устройствах;
-   `redirect` со значением `true` — для открытия платёжной формы в виде отдельной HTML-страницы на всех устройствах.

Если эти параметры не указываются или неприменимы для используемого устройства, платёжная форма открывается иным способом: в модальном окне или в элементе iframe \(если это задано через соответствующий параметр `target_element`\).

**Прим.:** При одновременном использовании в параметрах вызова платёжной формы указателей на открытие в отдельной вкладке и в элементе iframe более приоритетным считается открытие в отдельной вкладке.

В остальном работа с объектом `EPayWidget` для открытия Payment Page в отдельной вкладке соответствует общим условиям, актуальным и для других способов открытия:

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', // Код валюты платежа 
      redirect_on_mobile: true, // Указатель открытия в виде отдельной HTML-страницы
                                // на мобильных устройствах
      signature: 'YWb6Z20ByxpQ30hfTI' }, // Подпись
    'post')
```

```language-javascript
EPayWidget.run(    
    { project_id: 42, // Идентификатор проекта
      customer_id: '17008', // Идентификатор пользователя
      payment_id: '18641868', // Идентификатор платежа
      payment_amount: 8855, // Сумма платежа
      payment_currency: 'USD', // Код валюты платежа 
      redirect_on_mobile: true, // Указатель открытия в виде отдельной HTML-страницы
                                // на мобильных устройствах
      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',
                       redirect_on_mobile: true,
                       signature: 'YWb6Z20ByxpQ30hfTI' });
  </script>
  <!-- Other parts -->
</body>
</html>
```