Открытие платежной страницы, встроенной в веб-страницу
Вы можете открывать платежную страницу и как элемент веб-страницы, вписав его в дизайн своего сайта. В этом случае виджет работает в 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.
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.
Рис.: Пример кода 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>