Embedded payment page

Enable customers to complete a payment entirely within your website with TrueLayer's embedded payment page.

The embedded payment page (EPP) uses a prebuilt user interface to speed up the integration process. It's embedded in your web page as an overlay, or inline on your page.

The EPP also features QR code authentication to enable desktop users to authorise payments with their mobile banking app. In addition to this, it has built-in localisation, cover local languages and authentication flows across Europe, helping you accept payments in more countries.

An example that shows how the embedded payment page can display in a modal overlaid on a web page.

The embedded payment page supports:

• Single payments
• Variable recurring payment mandates
• Signup+ payments

EPP features

The EPP offers all of the functionality of the HPP, but embedded in your website or application. As such, the EPP offers:

• A bank selection screen
• A scheme selection screen for EUR payments, if the bank supports multiple payment schemes
• A consent screen
• Collecting any additional inputs needed from your user
• 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
• A built-in payment result screen to advise of payment success, or to help users with failed payments.

A benefit of the EPP over a direct API integration is that if any new features are added, you can take advantage of them with minimal or no integration needed.

Supported countries

The EPP is currently optimised for the UK, Ireland, France, Germany, Spain, Finland, the Netherlands, and Lithuania.

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

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

Supported browsers

We've built the EPP to work best on:

• Chrome
• Edge
• Firefox
• Safari

EPP Payment journey

When a customer makes a payment through the embedded payment page, it follows this flow:

1. The user selects the Pay by bank option or equivalent in your app or website.
2. Your integration creates a payment and gets a payment id and resource_token in the response.
   If you include signup_plus in related_products at payment creation, the authorisation flow changes to reflect this.
3. You integration initialises the EPP using this id and resource_token and the EPP displays as an overlay or inline within your app or website.
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 EPP redirects your user to their bank's website or app.
8. Your user authorises the payment in their bank's website or app.
   If the user needs to complete SCA as part of an embedded payment, they do so here.
9. Once the authorisation is complete, the bank redirects the user to the EPP's payment result screen.
10. After the user acknowledges the payment result screen, they are redirected to the return URI that you set in Console.