Opening Payment Page embedded in a web page

You can open a payment page inside a web page by embedding it into a web page of your system. In this case, the widget works in an iframe. Page inserted in the iframe occupies 100% width, the iframe height is updated to fit the actual content height and adapt to small format and wide-screen resolutions of the customer's device.

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.

Warning: The minimum iframe width at which the widget is displayed correctly is 320px, the minimum height is 600px. The PC version becomes adaptive with a width of 480px.

Integrating the Payment Page widget

To embed the iframe in your web page, add the links to the Payment Page libraries and resources 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>
    

After you have connected the libraries, you can use the EPayWidget object to pass parameters to the payment page.

Opening the embedded payment page

To open an embedded payment page, use one of the following ways:

In the configObj object, pass the target_element ID of the element within which to open a payment page.

Figure: Example of an HTML-page code with a payment page embedded in an widget-Container element

<html>
<head>
<!-- Adding libraries -->
    <link rel="stylesheet" href="https://paymentpage.ecommpay.com/shared/merchant.css">
    <script src="https://paymentpage.ecommpay.com/shared/merchant.js"></script>
    <script type="text/javascript">var EP_HOST = 'https://paymentpage.ecommpay.com';</script>
</head>
<body>
    <!-- HTML Web page code to add the Payment Page widget -->
    <div class="container">
        <div class="cart-info">...</div><div id="widget-container"></div>
    </div>
    <!-- JS command to open Payment Page -->
    <script type="text/javascript">
        EPayWidget.run({ payment_id: 'X03936', 
                            payment_amount: 2035, 
                            payment_currency: 'USD', 
                            project_id: 0, 
                            target_element: 'widget-container', 
                            signature: 'YWb6Z20ByxpQ30hfTIjaCCsVIwVynXV%2BVLenAm' });
    </script>
</body>
</html>