Hosted payment page samples

The sequence of payment pages is the same whether you use a full-page redirect or JavaScript SDK integration:

Card payment page flow

The card payment page flow contains up to four pages, depending on the XML order you submit.

1. Payment method selection page

This first page displays the payment methods available to the shopper, which depend on:

  • The country specified

  • The payment methods set up on your account

Best practice: Alternatively, you can request the shopper's desired payment method on your website and thenprovide it to Worldpay. If you do, this page is bypassed, shortening the shopper's payment journey.

Tablet example

../resources/images/03000008_thumb_350_0.png

2. Payment details page

Shoppers can securely enter their payment information on the payment details page. They can also opt to select a different payment method or to cancel the payment.

Tablet example

In this example, JavaScript is enabled and the fields are validated in real-time. The Make payment button is not available until all mandatory fields are populated correctly:

../resources/images/03000009_thumb_350_0.png

3. 3D Secure iframe page

The payment pages display 3D Secure (3DS) content in an iframe. Shoppers have 30 minutes to enter their authentication details after which an expiry message is displayed. This 30-minute time-out period cannot be changed.

Note: We have no control over the display of 3DS content in an iframe. Scroll bars will appear within the 3DS Authentication window if the issuer's content exceeds the recommended scheme dimensions.

Tablet example

../resources/images/0300000a_thumb_350_0.png

4. Payment result page

The payment result page provides the status of the payment to the shopper.

Best practice: You can use Worldpay's default result pages. However, to ensure that your customer is returned to your website, we recommend that youprovide your own.

Tablet example

../resources/images/0300000b_thumb_350_0.png

APM payment page flow

The payment page flow for analternative payment method(APM) contains up to three payment pages depending on the APM selected.

1. Payment method selection page

This first page displays the payment methods available to the shopper, which depend on:

  • The country specified

  • The payment methods set up on your account

Best practice: Alternatively, you can request the shopper's desired payment method on your website and thenprovide it to Worldpay. If you do, this page is bypassed, shortening the shopper's payment journey.

Tablet example

../resources/images/03000008_thumb_350_0.png

2. APM-specific pages

Depending on the APM used for payment, one or more APM-specific pages can be displayed next in the payment page flow.

A data collection page is displayed for some alternative payment methods (APMs). Shoppers can enter additional payment details on this page. We validate all mandatory fields on a data collection page.

Smartphone example

In this example page, the shopper must select the bank they wish to use for the payment:

../resources/images/0300000d_thumb_350_0.png

Some APMs redirect the shopper to a page on the APM provider's website. In these cases, shoppers interact directly with the APM provider or bank during the payment journey. For example, at the APM provider page, shoppers may need to:

Log into their account with the APM provider and then complete the payment.

Print an invoice and take it to a kiosk where they complete the payment.

Note: The pages for some APM providers may not be optimised for smaller devices such as smartphones or tablets. We do not have control over the display of content shown on pages for APMs.

For more information about APMs, refer to theAlternative Payment Methods Guide.

For offline bank transfers we display an instruction page showing:

A payment reference number

Instructions to the shopper on how to complete the payment

On this page the shopper can:

Optionally print the instruction page, before continuing to the payment result page

Click Continue to proceed to the payment result page

Printing the instruction page

When the shopper clicks or taps Print instructions, a print preview version of the page is displayed in a lightbox. The shopper can print the page or cancel the print preview.

If the shopper clicks Continue without displaying the print preview, a message reminds the shopper that the bank transfer details were not printed. The shopper can opt to print or to continue to the result page.

3. Payment result page

The payment result page provides the status of the payment to the shopper.

Best practice: You can use Worldpay's default result pages. However, to ensure that your customer is returned to your website, we recommend that youprovide your own.

Tablet example

../resources/images/0300000b_thumb_350_0.png

Note: APMs must be consumed via a full-page redirect integration. The use of JavaScript is optional for this integration type, but you should note that Javascript may be required for some of the payment methods accessed via HPP. We therefore recommend that you tell your shoppers to have JavaScript and 3rd party cookies enabled before they select and use an APM website.

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.

../resources/images/hpp_iframe_-_paymt_mthd_select_page_04_thumb_350_0.jpg

Example of a lightbox

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

This image shows a lightbox with the payment details page for a fictional bike shop:

../resources/images/02000003_thumb_350_0.jpg

Currency conversion page

For payments where currency conversion is needed, we notify shoppers during the payment process and let them know what their options are. Currency conversion is triggered when the shopper attempts to pay in a currency that is not one of the accepted currencies for the payment method.

In our notification text, we indicate:

  • The original currency and amount

  • The new currency and amount into which the payment will be converted

The shopper can accept the currency conversion or choose another payment method.

Smartphone example

../resources/images/03000007_thumb_350_0.png

For more information about currency conversion, see theAlternative Payment Methods Guide.