iframe or lightbox set up

iframe or lightbox set up

You can use an iframe or lightbox to display the Hosted Payment Pages in your website.

Currently, an iframe and lightbox integration supports card payment methods only.

Prerequisites for setting up an iframe or lightbox

Ensure the following is set up:

  • Your account with us should be enabled for the Hosted Payment Pages. For more information, see Getting started.
  • Ensure that you include an installation ID in every XML order you submit to us. You should also make decisions about the parameters you send and receive. For more information, see Plan your order submission.
  • Optionally, you can customise the look and feel of the Hosted Payment Pages. You can add your branding. You can also control the display of menus and fields in the Hosted Payment Pages. For more information, see Customise look and feel.

Required files

The following files are required for an iframe or lightbox integration:

Files required for an iframe or lightbox integration
File name Purpose Action required
helper.html The helper file is used by hpp-embedded-integration-library.js (see below) to communicate with the parent page on your site.  It performs resizing and redirection actions.

Note: You must host this file in the same domain as the webpage into which you are integrating the iframe or lightbox.

Hosting the helper file in this way ensures that the iframe or lightbox dynamically resizes in response to the content being shown.

hpp-embedded-integration-library.js Creates an iframe or lightbox in your web page and connects it to the Hosted Payment Pages.

We host this file on the Worldpay domain.

Note: Do not host or cache this file on your website.

hpp-embedded-integration-library.css

Contains styling for creating the iframe or lightbox.

We host this file on the Worldpay domain.

Note: Do not host or cache this file on your website.

You can customise the cascading style sheet (CSS) for the Hosted Payment Pages. For more information, see Customise the cascading stylesheet (CSS).

Steps for setting up an iframe or lightbox

To integrate the Hosted Payment Pages into your website using an iframe or lightbox, complete the following steps:

  1. Download the helper file.

  2. Update your website.

Worldpay embedded integration wizard

In addition to this guide, we provide a wizard to guide you through the integration process for a lightbox or iframe. Using the wizard, you can download the helper file, specify parameters and generate code snippets. The wizard is available at https://payments.worldpay.com/resources/hpp/integrations/embedded/doc.

For best results, you should display the wizard using Internet Explorer.