Открытие платежной страницы, встроенной в веб-страницу

Вы можете открывать платежную страницу и как элемент веб-страницы, вписав его в дизайн своего сайта. В этом случае виджет работает в iframe. Страница, размещенная в iframe, занимает 100% ширины веб-страницы, высота iframe будет обновляться в зависимости от фактической высоты контента и адаптироваться под узко- и широкоформатные разрешения экрана устройства пользователя.

Для настройки размеров страницы передайте в запросе на открытие Payment Page значения высоты и ширины в параметрах redirect_window_height и redirect_window_width, включенных в строку payment_methods_options:

payment_methods_options={"redirect_window_height": 1200, "redirect_window_width": 1200}

Для настройки размеров страницы для конкретного платежного метода при его выборе пользователем также передайте код этого метода:

payment_methods_options={"card": {"redirect_window_height": 1200, "redirect_window_width": 1200}}

Если необходимо выбрать несколько методов – коды передаются через запятую. Полный список кодов платежных методов см. в Коды платёжных методов для работы через Payment Page.

Внимание: Минимальная ширина iframe, при которой виджет отображается корректно, 320px, минимальная высота — 600px. Версия для ПК становится адаптивной при ширине 480px.

Интеграция платежной страницы

Для размещения виджета Payment Page внутри iframe на вашей веб-странице добавьте ссылки на библиотеки и ресурсы Payment Page в ваш проект следующим образом:

  • В заголовок веб-страницы добавьте ссылки на библиотеки Payment Page и сохраните изменения.
    <link rel="stylesheet" href="https://paymentpage.ecommpay.com/shared/merchant.css" /> 
<script type="text/javascript" src="https://paymentpage.ecommpay.com/shared/merchant.js"></script>

После подключения библиотек вы сможете использовать объект EPayWidget для передачи параметров в платежную страницу.

Открытие платежной страницы

Для открытия встроенной платежной страницы используйте один из следующих способов:

При этом в объекте configObj передайте в параметре target_element идентификатор элемента, внутри которого необходимо разместить iframe.

Прим.: Iframe с содержимым в виде сгенерированной платежной страницы создается js-скриптом автоматически.

Рис.: Пример кода HTML-страницы со встроенной платежной страницей в элементе widget-container

<html>
<head>
<!-- Adding 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>
</head>
<body>
    <!-- HTML Web page code to add 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({ payment_id: 'X03936', 
                            payment_amount: 2035, 
                            payment_currency: 'USD', 
                            project_id: 0, 
                            target_element: 'widget-container', 
                            signature: 'YWb6Z20ByxpQ30hfTIjaCCsVIwVynXV%2BVLenAm' });
    </script>
</body>
</html>