Skip to content

Frontend integration

The user starts checkout by scanning a QR-code in the webshop or tapping the widget on a mobile device. OpenApp provides a widget to generate this QR-code. This widget is provided as a Javascript library. Integration is a three step process:

  1. Include the javascript library in your HTML source code: 

    1
    <script src="https://static.prd.open-pay.com/dist/openapp.min.0.0.4.js"></script>

  2. Include an area where the OA Widget must be rendered, marking it with the class OpenAppCheckout and providing your merchant ID, your profile and the basket ID. The basket ID does not need to be just a basket ID, you are free to include any additional data in the basket ID (such as a timestamp, a userID or a checksum) as long as the total length is at most 96 bytes. The area must be square but you have full freedom to position and size it. In the example below this is done through inline styling, but you can integrate with your normal style management as well. Just be aware that some types of styling make the QR-code harder to scan.

1
2
3
4
<div class="OpenAppCheckout"
          data-merchantId="MERCHANT_ID" data-integrationProfileId="PROFILE_ID"
          data-basketId="BASKET_ID" data-basketValue="17" data-basketCurrency="PLN"
          data-uniqueProductsCount="1" data-letter="C" data-style=""></div>
  1. Include the javascript code in your store code. The code sends a CustomEvent each time you want the widget to be rendered. The event name must be OpenAppCheckout. On a static page it might look like this: 
      <script>
    const OAEvent = new CustomEvent('OpenAppCheckout', {
      detail: {},
      bubbles: true,
      cancelable: true,
      composed: false,
    });

    document.querySelector('#trigger').dispatchEvent(OAEvent);
  </script>

The OA Widget will be rendered automatically by the library in the position of the span tag. In this example it will be sized to 300 by 300 pixels. The OA Widget will contain the necessary information to start OpenApp on the users device, as well as the necessary information to identify your merchant account, your profile and the basket. Whenever you change any of the parameters, the widget will update automatically, so it is possible to generate a different QR-code without re-initializing the HTML.

OA Login Widget

To generate OA Widget for authentication, replace the HTML code with the following code: 

1
2
<div class="OpenAppCheckout" data-merchantId="MERCHANT_ID" data-integrationProfileId="PROFILE_ID"
          data-token="TOKEN" data-letter="I" data-version="1" ></div>

You have to provide the following parameters: - merchantId - ID of the store, - integrationProfileId - ID of integration profile, - token.