You can use iframes to display the Payment Pages within the layout of your website.
Compatibility
Iframes may not be rendered correctly in certain web browsers. (e.g. certain mobile web browsers)
We provide additional HTML/CSS mark-up for cases where iframes are displayed within iOS browsers (scroll down to learn more).
PayPal and Apple Pay do not support iframe integrations.
Please be aware of the browser security configuration updates linked below that could potentially cause issues for customers using your checkout when hosted in an iframe, especially those running iOS. We recommend reviewing this article from Microsoft to ensure correct handling of this scenario.
Configuring your website
It is imperative that all web pages on your site are encrypted using Secure Socket Layer (SSL) to ensure correct functionality of iframes across all browsers.
In order to include the iframe within your website, you need to include HTML code similar to the example below, within the HTML on your website:
<iframe src="<DOMAIN>/process/payments/choice?sitereference=test_site12345&mainamount=10.00¤cyiso3a=GBP&version=2&stprofile=default" width="100%" height="600" scrolling="auto" style="border:0px;"></iframe>
Replace <DOMAIN> with a supported domain. Click here for a full list.
Iframe-optimised layout
You can easily update your POST to Payment Pages to hide the address fields from the page. We provide an alternative default layout that is more compact and easier to fit within an iframe.
This configuration presumes that you are prompting the customer for the necessary billing and delivery address details on your own website and including these in the POST to Payment Pages, or that these address details are not required (e.g. purchase made by a returning customer). Click here to learn more.
You can perform further customisation to the appearance and layout of the Payment Pages within an iframe by modifying the HTML/CSS mark-up.
Handling iframes on iOS devices
To avoid compatibility issues when rendering the Payment Pages in iframes on iOS devices, include the following in your HTML mark-up:
stdefaultprofile=st_iframe_cardonly
And the following CSS:
overflow:hidden;
min-width:100%
