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:
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.
In the code for the webpage that will display the iframe or lightbox, insert references to the following files:
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.
<link rel='stylesheet' href='https://payments.worldpay.com/resources/hpp/integrations/embedded/css/hpp-embedded-integration-library.css'>
Reference to the Hosted Payment Pages embedded integration library and CSS
For more information about these files, see Required files.
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.
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 -->
Sample code showing a <div> element for the placement of an iframe
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
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:
A new instance of the Worldpay library object is created.
The setup method is invoked with the customOptions object.
var libraryObject = new WPCL.Library();
Initialisation of the integration library
For full code examples, see Example webpage code.