Getting started | Payment page flows | Sample iframe/lightbox payment pages

Sample iframe and lightbox pages

We apply responsive web design to payment content displayed in an iframe or lightbox. When the width of the parent page is resized, the content in the iframe or lightbox is automatically adjusted.

Depending on the content being displayed, the height of the iframe or lightbox may increase. For an iframe, the content in the parent page that is below the iframe is pushed down as the payment page content expands vertically.

Example of an iframe

With an iframe integration, an iframe containing the Hosted Payment Pages is injected directly into a webpage on your site. Although your customers are redirected to our secure payment pages for payment, it appears to them that they remain on your website.

The following figure shows a payment details page for a fictional bike shop. The payment details page is embedded as an iframe. In the figure, a red border has been added to indicate the area containing the iframe content.

 

example of an iframe

iframe example

Example of a lightbox

With lightbox integration, the Hosted Payment Pages are displayed in a layer over your website.

The following figure shows a lightbox with the payment details page for a fictional bike shop.

Lightbox showing the payment details page for a fictional bike shop

Lightbox example