Открытие платежной страницы в модальном окне
Сгенерированная платежная страница по умолчанию открывается в модальном окне, при этом основная часть веб-страницы затеняется и остается в фоне, а на экране пользователю отображается виджет.
Рис.: Платёжная страница, открытая как модальное окно

Интеграция виджета
Чтобы интегрировать виджет на веб-страницу, вам необходимо добавить ссылки на библиотеки и ресурсы 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 для передачи параметров в платежную страницу.
Открытие виджета
Для открытия виджета используйте один из следующих способов:
Для настройки размеров страницы передайте в запросе на открытие 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.
Дополнительная кастомизация
В случае, если вы открываете виджет в модальном окне, вы можете стилизовать модальное окно в соответствии с дизайном вашего сайта.
CSS-классы должны быть доступны на странице сайта, на которой производится запуск виджета. Определить CSS-классы можно любым удобным для вас способом.
Доступные CSS-селекторы приведены в таблице ниже.
Селектор | Описание |
---|---|
.custom_wrap_class .ep-modal-wrap | Оболочка модального окна |
.custom_wrap_class #ep-modal-body | Тело модального окна. Внутрь этого элемента будет помещен iframe с виджетом |
.custom_wrap_class #ep-modal-close | Кнопка закрытия виджета |