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

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

Рис.: Платежная страница, открытая как модальное окно



Интеграция виджета

Чтобы интегрировать виджет на веб-страницу, вам необходимо добавить ссылки на библиотеки и ресурсы 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_modal_wrap CSS-класс используемого элемента.

CSS-классы должны быть доступны на странице сайта, на которой производится запуск виджета. Определить CSS-классы можно любым удобным для вас способом.

Доступные CSS-селекторы приведены в таблице ниже.

Табл. 1. Селекторы класса css_modal_wrap
Селектор Описание
.custom_wrap_class .ep-modal-wrap Обертка модального окна
.custom_wrap_class #ep-modal-body Тело модального окна. Внутрь этого элемента будет помещен iframe с виджетом
.custom_wrap_class #ep-modal-close Кнопка закрытия виджета