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