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