iframe or lightbox set up | Example webpage code

Example webpage code

This page shows code for the following example webpages:

  • Basic iframe example
  • Basic lightbox example
  • Advanced iframe example

You can optionally use the Worldpay embedded integration wizard as a guide to generate code snippets for a basic iframe or lightbox integration. The integration wizard is available at https://payments.worldpay.com/resources/hpp/integrations/embedded/doc.

Basic iframe example

The following example shows code for a webpage in which a basic iframe integration is used.

<!DOCTYPE html> <html> <head> <title> My test page </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> <body> <div>This is my test page as a merchant</div> <div id='custom-html'></div> <script type="text/javascript"> //your options var customOptions = { iframeIntegrationId: 'libraryObject', iframeHelperURL: 'https://example.com/helper.html', iframeBaseURL: 'https://example.com', url: 'https://payments.worldpay.com/ngpp/integration/wpg/corporate?OrderKey=YOUR_ORDER_KEY&Ticket=YOUR_TICKET_ID', type: 'iframe', target: 'custom-html', accessibility: true, debug: false, language: 'en', country: 'gb', preferredPaymentMethod: 'VISA-SSL', successURL: 'https://example.com/success', cancelURL: 'https://example.com/cancel', failureURL: 'https://example.com/failure', pendingURL: 'https://example.com/pending', errorURL: 'https://example.com/error' }; //initialise the library and pass options var libraryObject = new WPCL.Library(); libraryObject.setup(customOptions); </script> </body> </html>

Sample webpage code for a basic iframe integration

Basic lightbox example

The following example shows code for a webpage in which a basic lightbox integration is used.

<!DOCTYPE html> <html> <head> <title> My test page </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> <body> <div>This is my test page as a merchant</div> <div id='custom-html'></div> <a href='#' id='custom-trigger'>Click me</a> <script type="text/javascript"> //your options var customOptions = { iframeIntegrationId: 'libraryObject', iframeHelperURL: 'https://example.com/helper.html', iframeBaseURL: 'https://example.com', url: 'https://payments.worldpay.com/ngpp/integration/wpg/corporate?OrderKey=YOUR_ORDER_KEY&Ticket=YOUR_TICKET_ID', type: 'lightbox', trigger: 'custom-trigger', lightboxMaskOpacity: 80, lightboxMaskColor: '#000000', accessibility: true, debug: false, language: 'en', country: 'gb', preferredPaymentMethod: 'VISA-SSL', successURL: 'https://example.com/success', cancelURL: 'https://example.com/cancel', failureURL: 'https://example.com/failure', pendingURL: 'https://example.com/pending', errorURL: 'https://example.com/error' }; //initialise the library and pass options var libraryObject = new WPCL.Library(); libraryObject.setup(customOptions); </script> </body> </html>

Sample webpage code for a basic lightbox integration

Advanced iframe example

This example shows sample code for a webpage in which a single-page application design is used.

<!DOCTYPE html> <html> <head> <title> My test page </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> <body> <div>This is my test page as a merchant</div> <div id='custom-html'></div> <script type="text/javascript"> //your options var libraryObject = new WPCL.Library(); var customOptions = { iframeIntegrationId: 'libraryObject', iframeHelperURL: 'https://example.com/helper.html', iframeBaseURL: 'https://example.com', type: 'iframe', target: 'custom-html', accessibility: true, debug: false, language: 'en', country: 'gb', preferredPaymentMethod: 'VISA-SSL', successURL: 'https://example.com/success', cancelURL: 'https://example.com/cancel', failureURL: 'https://example.com/failure', pendingURL: 'https://example.com/pending', errorURL: 'https://example.com/error' }; function initializeHostedPaymentPageContent(payment_url) { customOptions.url = payment_url; libraryObject.setup(customOptions); dispatchEvent(new Event('load')); } // Code to submit the order and invoke above function excluded // Note however that it could be triggered as the result of an // Ajax call; e.g. // $.ajax({ // Invoke Ajax request to submit order // success: function(redirect_url_returned) { // Code from initializeHostedPaymentPageContent // } // }); </script> </body> </html>

Sample webpage code for an advanced iframe integration