Opening checkout page in a modal window
The default payment page opens in a modal window, and the main part of the web page dims and stays on the background, and the widget is shown to the customer on the screen.
Integrating the Payment Page widget
To integrate the widget into your web page, you need to add the widget libraries links to the header of your web page as follows:
<link rel="stylesheet" href="https://paymentpage.rocketpay.kz/shared/merchant.css" /> <script type="text/javascript" src="https://paymentpage.rocketpay.kz/shared/merchant.js"></script>
Opening the Payment Page widget
To open a widget, use one of the following methods:
To set up the size of the page inserted in the iframe, pass the width and height values in the redirect_window_height and redirect_window_width parameters included in the payment_methods_options object in the request or Payment Page opening:
payment_methods_options={"redirect_window_height": 1200, "redirect_window_width": 1200}
Additional customizations
If you open a widget in a modal window, you can fully customize and style the modal window in accordance with the design of the web page to match your corporate style.
CSS class must be available on the site page that is used to launch the widget. You can define CSS classes as is comfortable for you.
The CSS selectors are listed in the table below.
Selector | Description |
---|---|
.custom_wrap_class .ep-modal-wrap | Modal window wrapper |
.custom_wrap_class #ep-modal-body | Body of the modal window. The iframe with the widget is placed into this element. |
.custom_wrap_class #ep-modal-close | Button that closes the widget |