iframe or lightbox set up | Advanced integration

Advanced integration

In a more advanced integration, to ensure that the integration library works correctly, you may need to consider these aspects:

  • Variable scope
  • Content initialisation, where technologies such as AJAX are used to dynamically update content.
    Recommendations about content initialisation apply to iframe integrations only.

For a code example, see the advanced iframe example in Example webpage code.

Variable scope

The helper file (helper.html) dynamically resizes the iframe or lightbox container to allow it to adapt to the content of the Hosted Payment Pages. To perform this function, the helper file must be able to access the object referred to as the iframeIntegrationId object in the customOptions object. The iframeIntegrationId object is passed into the integration library via the customOptions object. In the examples included in this guide, this would refer to the 'libraryObject', which is returned as a result of initialising the library.

This requires that the object referenced by iframeIntegrationId has global scope. If initialising the integration library from within a function, the declaration of the variable libraryObject.setup(customOptions) must occur outside. The customOptions object should also be declared globally.

Content initialisation

Recommendations in this section apply to iframe integration only.

For an iframe integration, the payment page content is injected into the webpage by way of a ‘window.onload’ event. This may cause issues in a single-page application website where the content is loaded once and then dynamically altered through the use of technologies such as AJAX.

To resolve this, you can have an additional ‘window.onload’ event triggered after setting up the integration library. The simplest mechanism for doing this is by using the JavaScript 'dispatchEvent' function. For more detail, see the advanced iframe example in Example webpage code.

This solution is not supported for versions of Internet Explorer before version 9. If support for older versions is required, it should be possible to trigger the same behaviour using the legacy ‘document.createEvent’ and ‘window.dispatchEvent’ mechanisms.