Открытие в элементе iframe HTML-страницы

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

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

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

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

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

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

Для открытия Payment Page в элементе iframe с использованием собственных решений необходимо подготовить соответствующий скрипт, обеспечивающий вызовы формы с указанием требуемых параметров и подписи к ним.

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

При этих обращениях должен указываться идентификатор используемого элемента iframe — в параметре target_element объекта configObj. Если этот параметр не указывается, платёжная форма открывается иным способом: в модальном окне или в виде отдельной HTML-страницы (если это задано через параметр redirect или redirect_on_mobile).

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

Для открытия Payment Page в элементе iframe с использованием JavaScript-библиотеки merchant.js от Flashpay необходимо подключить эту библиотеку и использовать соответствующие обращения к объекту EPayWidget. В этих обращениях среди параметров вызова в объекте configObj должен указываться параметр target_element с идентификатором элемента iframe. В остальном должны соблюдаться следующие общие условия:

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

   Информация о применяемых параметрах и их подписывании представлена в отдельных статьях: Параметры вызова платёжной формы и Работа с подписью к данным.

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

   Информация о таких функциях представлена в статье Контроль интерфейсных событий.

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

EPayWidget.run(configObj, method);

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

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

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

<html>
<head>
<!-- Adding Flashpay libraries -->
  <link rel="stylesheet" href="https://paymentpage.flashpay.kg/shared/merchant.css">
  <script src="https://paymentpage.flashpay.kg/shared/merchant.js"></script>
  <script type="text/javascript">var EP_HOST = 'https://paymentpage.flashpay.kg';</script>
<!-- Other parts -->
</head>
<body>
  <!-- HTML Web page code to add the Payment Page widget -->
  <div class="container">
      <div class="cart-info">...</div><div id="widget-container"></div>
  </div>
  <!-- JS command to open Payment Page -->
  <script type="text/javascript">
      EPayWidget.run({ target_element: 'widget-container',
                       project_id: 42,
                       customer_id: '17008',
                       payment_id: '18641868',
                       payment_amount: 8855,
                       payment_currency: 'USD',
                       signature: 'YWb6Z20ByxpQ30hfTI' });
 <!-- Other parts -->
 </script>
</body>
</html>