Opening Payment 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.

Figure: A payment page opened as a modal window



Integrating the Payment Page widget

To integrate the widget into your web page, you need to add the widget libraries to your project as follows:

  • To the header of your web page add links to Payment Page libraries and resources and save changes.
    <link rel="stylesheet" href="https://paymentpage.ecommpay.com/shared/merchant.css" /> 
    <script type="text/javascript" src="https://paymentpage.ecommpay.com/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 string in the request or Payment Page opening:

payment_methods_options={"redirect_window_height": 1200, "redirect_window_width": 1200}

To set up the size of the page for the specific payment method selected by a customer, also specify the payment method code:

payment_methods_options={"card": {"redirect_window_height": 1200, "redirect_window_width": 1200}}

If you need to select several methods – codes are separated by commas. The full list of payment method codes see in IDs of supported payment methods.

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.

Tip: To enable CSS customization, in the css_modal_wrap parameter pass the CSS class of the element.

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.

Table 1. Selectors of the css_modal_wrap class
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