User interface basics

What is payment authorisation?

After you create a payment or mandate, you must enable your user to authorise it.

In this process, the user is prompted to specify the bank and account they want to pay from. They then give consent for TrueLayer to make open banking payments from the chosen bank account.

Users must authorise all pay-ins to a merchant account or payments to another external account.

Users must also authorise VRP mandates, but don't need to authorise subsequent payments on a mandate.

User don't need to authorise payouts or refunds, as you initiate those payments.

Overview of authorisation user interface

The authorisation flow starts as soon as the user has begun the payment at checkout. Within the auth flow:

1. The user selects the provider they want to pay with in a provider selection screen, if applicable.
2. The user selects the scheme they want to pay with, if applicable.
3. The user inputs any additional information the provider needs for them to complete the payment, for example an IBAN or a branch name.
4. The user is redirected to their provider to log in with their banking credentials.
5. The user gives explicit consent for the payment.
6. The user is redirected to a page that you choose, which confirms whether the payment succeeded or failed.

Below is an example of an authorisation flow where the user can select their provider, and logs in to their provider with face recognition.

Embedded vs hosted authorisation UIs

There are two types of TrueLayer authorisation UI you can integrate, embedded or hosted. Our embedded and hosted UIs are regularly updated, support all providers and countries out of the box, and are designed to be compliant and drive conversion. You also benefit from new features with minimal or no integration required.

Embedded UIs

If you're able to use an SDK in your site, we recommend that you use an embedded authorisation UI. Our embedded UIs display within your website or app, providing the most seamless user experience.

Learn more about our embedded UIs.

Hosted UIs

Our hosted UIs provide the simplest integration for payment authorisation. You use values returned by the Payments API to generate a URL, where your user can authorise their payment or mandate.

Learn more about our hosted UIs.

Which authorisation UI should I use?

The authorisation UIs you should use depends on a variety of factors such as:

• Whether you can accommodate a complex integration.
• How quickly you need to go live.
• If you already use an ecommerce platform that TrueLayer offers a plugin for.
• Whether you have a mobile app, and whether it supports using our SDKs.

Generally, we recommend the embedded payment page (EPP) if your website can use an SDK. This displays as part of your site, and supports all payment requirements across different regions.

The hosted payment page (HPP) is very simple to integrate, as you just need to redirect your users to a page to authorise the payment.

The simplest integration paths are to use payment links, or an ecommerce plugin if you use the associated ecommerce platform.

Our mobile SDKs offer a seamless integration with Android, iOS, and React Native applications. However, you can use the HPP or EPP in a mobile app too.

🚧

You can build a direct API integration to completely whitelabel your integration, but this is far more complex than other integration options.