Opening Payment Page in a modal window

When opened in a modal window, the Payment Page payment form is displayed to the customer over the merchant's web service page. This interrupts the customer's interaction with the web service but keeps them engaged and focuses the customer's attention on the purchase without redirecting them to another page.

For opening the payment form in a modal window, the following should be performed on the web service side:

1. Link the CSS library from Orchid available at https://paymentpage.orchid.works/shared/merchant.css.

   Link the CSS library from Orchid on the client side of the web service for the payment form to be displayed correctly. This library is available at https://paymentpage.orchid.works/shared/merchant.css.

2. Define the events that will trigger the opening of the payment form (for example, the purchase button click).
3. Set up the payment form to open upon the required events by using your in house-solutions or the JavaScript library from Orchid available at https://paymentpage.orchid.works/shared/merchant.js.

To open Payment Page in a modal window with the help of the merchant's in-house solutions, prepare the corresponding script that will ensure the payment form opening with the required parameters specified and signed. The information about the parameters that can be used to open Payment Page and about the signature generation is provided in the following articles: Parameters for opening the payment form and Signature generation and verification.

To open Payment Page in a modal window with the help of the merchant's in-house solutions, prepare the corresponding script that will ensure the payment form opening with the required parameters specified and signed.

To open Payment Page in a modal window with the help of the JavaScript library merchant.js from Orchid, link this library on the client side of the web service and use the corresponding calls to the EPayWidget object.

Since this option to open the payment form is the default one for the merchant.js library, no special parameters are required in the calls to the EPayWidget object can be made according to and complying with the following general conditions is enough:

1. Each call can be made via one of the two methods:
   • bind (EPayWidget.bind)—if the payment form should be opened with a button click (with the button identifier <pay_button_id> specified).
   • run (EPayWidget.run)—if the payment form should be opened upon any other event in the user interface.
2. Each call must contain the JavaScript object configObj with the parameters of the payment form opening and the signature for these parameters. with the parameters of the payment form opening and the signature for these parameters.

   The information about the parameters used and signature generation is provided in the following articles: Parameters for opening the payment form and Signature generation and verification.

3. If necessary, any call can also contain an HTTP request method (method)—POST or GET. If nothing is specified, the GET method is used by default.
4. Additionally, any call can contain functions to handle the information about customer's actions (details).

   The information about such handler functions is provided in the article Handling customer behaviour events on Payment Page.

EPayWidget.bind('<pay_button_id>', configObj, method);

EPayWidget.run(configObj, method);

EPayWidget.bind('pay_button_id', // Button identifier
    { project_id: 42, // Project identifier
      customer_id: '17008', // Customer identifier
      payment_id: '18641868', // Payment identifier
      payment_amount: 8855, // Payment amount
      payment_currency: 'USD', // Payment currency code
      signature: 'YWb6Z20ByxpQ30hfTI' }, // Signature
    'post')

EPayWidget.run(    
    { project_id: 42, // Project identifier
      customer_id: '17008', // Customer identifier
      payment_id: '18641868', // Payment identifier
      payment_amount: 8855, // Payment amount
      payment_currency: 'USD', // Payment currency code
      signature: 'YWb6Z20ByxpQ30hfTI' }, // Signature
    'post')

When either of the methods (bind and run) is used, the HTML code of the web service page looks as follows.

<html>
<head>
<!-- Adding Orchid libraries -->
  <link rel="stylesheet" href="https://paymentpage.orchid.works/shared/merchant.css">
  <script src="https://paymentpage.orchid.works/shared/merchant.js"></script>
  <script type="text/javascript">var EP_HOST = 'https://paymentpage.orchid.works';</script>
<!-- Other parts -->
</head>
<body>
  <!-- JS command to open Payment Page -->
  <script type="text/javascript">
      EPayWidget.run({ project_id: 42,
                       customer_id: '17008',
                       payment_id: '18641868',
                       payment_amount: 8855,
                       payment_currency: 'USD',
                       signature: 'YWb6Z20ByxpQ30hfTI' });
  </script>
  <!-- Other parts -->
</body>
</html>