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

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

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

Чтобы интегрировать виджет на веб-страницу, добавьте ссылки на библиотеки и ресурсы Payment Page в заголовок своей веб-страницы следующим образом:

<link rel="stylesheet" href="https://paymentpage.rocketpay.kz/shared/merchant.css" /> 
<script type="text/javascript" src="https://paymentpage.rocketpay.kz/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}

Дополнительная кастомизация

В случае, если вы открываете виджет в модальном окне, вы можете стилизовать модальное окно в соответствии с дизайном вашего сайта.

Совет: Чтобы подключить кастомизацию 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 Кнопка закрытия виджета