Opening POLi as an inline option is considered an effective strategy to keeping customers on your site when done correctly. This guide is here to demonstrate the options available to you and help you to implement them properly, mitigating some of the common issues encountered when attempting these integration options.
All inline options require you (the merchant) to have your own SSL certificate for security reasons.
To open POLi in an iFrame, there are a few rules that need to be observed to preserve a good user experience.
The iFrame should initially open a page on your domain which initiates a transaction before redirecting the user to POLi.
Care needs to be taken with the styling of putting POLi in an iFrame. The iFrame should be opened as wide as possible - please be aware that while we use responsive design to make our pages look as presentable as possible at all screen sizes, the banks that we are displaying may not.
Scrollbars need to be kept to a minimum. See the example:
<div id="outerdiv" style="margin: 0 auto; width: 900px; padding: 0; max-width: 900px; height: 600px; max-height: 600px; border: 1px solid #f00; overflow: hidden; -webkit-overflow-scrolling: touch;"> <iframe src="http://google.com" frameborder="0" style="height:100%;width:100%;margin:0;padding:0;"></iframe> </div>
In order to open POLi in a popup without getting blocked by browser popup blockers, the open action must be synchronously started from a direct user action. For example,
<button onclick="window.open('http://google.com', 'newwindow', 'width=900, height=700')"> Open </button>
This button will open a page on your domain that will initiate a POLi transaction and then redirect the window there.
The Overlay method is mostly just an iFrame with different CSS styling.
The same rules must be observed: Open as wide as possible, minimize scrollbars and redirect to POLi from your domain.
<div style="width: 100%; background-color: #000; height: 100%; opacity: 0.4; position: absolute; top: 0px; z-index: 100;"></div> <div id="iframeContainer" style="display: inline-block; margin: 20px auto 100px; padding: 0px; width: 75%; max-width: 75%; height: 50%; min-height: 500px; max-height: 50%; overflow: hidden;position: fixed;right: 12%;top: 20%;z-index: 105;"> <iframe src="initiate.php" style="height:inherit;width:100%;margin:0;padding:0;min-height: 500px;" name="poliframe" id="poliframe"></iframe> </div>