Hosted payment page

The hosted payment page (HPP) is a prebuilt UI that you can use for your payment authorisation journey. This flow collects all payment information required from your users and guides them through the payment authorisation journey.

If we develop new features or support new geographies, you do not need to make any updates or changes to support these in your flow.

The HPP user journey

When a customer makes a payment through the hosted payment page, it generally follows this the flow below. Some parts of the flow change based on the currency and region, and the provider and scheme selection method you chose at payment creation.

1. The user selects the Instant Bank Payment option.
2. Your integration creates a payment with TrueLayer and gets a payment id and resource_token in response.
3. Your system uses the ID and token to build the HPP URL and then displays it to your user.
4. Your user selects their bank on the screen.
   • If a bank is unavailable, it's greyed out on the provider selection screen, so the user can attempt to use a different bank.
   • If your user is paying internationally from certain French or Finnish banks, a screen displays that explains how to enable international payments.
5. Your user enters any additional information that the bank requires, and confirms.
   If the user is making a EUR payment through a provider that supports multiple payment schemes, they select a scheme at this point.
6. If their bank supports app-to-app authentication, desktop users see a QR code. Scanning the code enables them to continue the payment using the banking app on their phone. They can also continue on desktop.
7. The HPP redirects your user to their bank's website or app.
8. Your user authorises the payment in their bank's website or app.
9. Once the authorisation is complete, the bank redirects the user to the HPP's payment result screen.
10. After the user acknowledges the payment result screen, they are redirected to your <<return URI that you set in Console.

HPP mobile handoff

The HPP lets the user scan a QR code to open their banking app on their phone to authorise a payment. This is usually a far smoother experience and improves the user experience.

This is an example of the user experience when a user authorises the payment using their phone from step 6 in the flow above.

HPP features

The hosted payment page UI includes:

• A bank selection screen
• A scheme selection screen for EUR payments, if the bank supports multiple payment schemes
• Screens for collecting any additional inputs needed from your user
• A consent screen
• A QR code that allows desktop users to continue the payment on their mobile phone
• Functionality that enables users to authorise payments, such as:
  • Redirecting the user to their bank to authorise the payment
  • Using embedded payment authorisation for banks that need it (displaying input fields if needed)
• The ability to specify how long single payments stay in a pending state before success of failure, so you can run checks before a payment execution
• Built-in payment and mandate result screens to inform of success, or to help users with failed payments or mandates

You can use the HPP to enable your users to authorise mandates as well as payments.

HPP browser compatibility

The HPP works best with the following browsers:

• Chrome
• Edge
• Firefox
• Safari

Supported countries

The hosted payment page is currently optimised for the UK, Ireland, France, Germany, Spain, the Netherlands, and Lithuania.

Beta testers can also use the HPP for banks in Austria, Belgium, Finland, Poland and Portugal.

The user interface can be displayed in English, Spanish, French, Italian, German, Dutch, Portuguese, Polish, Finnish and Lithuanian.

Use the HPP in your integration

We recommend that you use the HPP for most integrations, as it simplifies payment authorisation and works in all regions. This section contains a variety of pages to help you integrate the HPP.

Authorise payments or mandates with the HPP

Learn how to configure the authorisation flow that starts after your user begins to pay.

Customise the HPP

Learn how to change the look and feel of the HPP to match your branding.

Use the HPP in a mobile web view

Learn how to configure redirects to your user's bank app, instead of their bank website, when they are on mobile.