iframe or lightbox set up | Update your website

Update your website

You should update the code on the webpage in which the iframe or lightbox is displayed.

For example, your web page might contain a Check out button or link. When the shopper clicks to check out, the code triggers the display of the iframe or lightbox.

To update the code on your website, complete the following steps:

  1. Add a reference to the Hosted Payment Pages embedded integration library.

  2. Create your markup.

  3. Create a customOptions object.

You can also use the Worldpay embedded Integration wizard to complete these steps. The wizard is available at https://payments.worldpay.com/resources/hpp/integrations/embedded/doc.

For full code samples, including an example of an advanced integration, see Example webpage code.

1. Add a reference to the Hosted Payment Pages embedded integration library

In the code for the webpage that will display the iframe or lightbox, insert references to the following files:

  • hpp-embedded-integration-library.js
  • hpp-embedded-integration-library.css

We make periodic updates to these files. To ensure that you have the latest versions, do not host or cache these files on your website.

The following code shows links to these files.

<head>
   <title>Customer Example</title>
   <link rel='stylesheet' href='https://payments.worldpay.com/resources/hpp/integrations/embedded/css/hpp-embedded-integration-library.css'>
   <script src='https://payments.worldpay.com/resources/hpp/integrations/embedded/js/hpp-embedded-integration-library.js'></script>
</head>

Reference to the Hosted Payment Pages embedded integration library and CSS

For more information about these files, see Required files.

2. Create your markup

Indicate in your markup whether you are using an iframe or lightbox. You'll also need to specify a unique ID for the iframe or lightbox instance.

The ID value that you specify is also used in the customOptions object. This object contains settings for the operation and display of the iframe or lightbox.

If the implementation type is not specified, the default setting is for a lightbox.

iframe

For an iframe integration, use a <div> element to create a division on the page for the placement of the iframe.

The following sample code shows a <div> element:

<!-- html container element -->
<div id='custom-html'></div>

Sample code showing a <div> element for the placement of an iframe

Lightbox

For a lightbox integration, you can use an element, such as a button, to trigger the display of the lightbox. When a shopper clicks the button, the lightbox containing the Hosted Payment Pages is displayed.

The following sample code specifies a trigger:

<!-- html button element -->
<a href="#" id="id_trigger" class="button">Click me </a>

Sample code showing the trigger for a lightbox

3. Create a customOptions object

Use the customOptions object to define properties that will be used by the integration library. Examples of properties that you can define include:

  • Settings for rendering the lightbox, if used
  • Result URLs

For a complete list of properties for the customOptions object, see customOptions object properties.

Integration library initialisation

When your customer selects the option to pay, the customOptions object is initialised, followed by the initialisation of the integration library. Upon initialisation of the integration library, the Hosted Payment Pages content is injected into the webpage as either an iframe or lightbox (depending on the integration type you specified for the customOptions object).

The following takes place when an iframe or lightbox is injected:

  1. A new instance of the Worldpay library object is created.

  2. The setup method is invoked with the customOptions object.

The following code shows the JavaScript code related to the initialisation of the integration library.

var libraryObject = new WPCL.Library();
libraryObject.setup(customOptions);

Initialisation of the integration library

For full code examples, see Example webpage code.