You can use iframes to display the Payment Pages within the layout of your website.
We provide additional HTML/CSS mark-up for cases where iframes are displayed within iOS browsers (scroll down to learn more).
Configuring your website
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.
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.
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:
And the following CSS: