[EU] Payments UI reference

In this guide, you will find information on each of the Payments UI product flows. This page also contains information about which payment UIs are supported across our European geographies.

These user journeys happen after you create a payment, to authorise the transaction on the end user's side.

We strongly recommend that you use one of the three TrueLayer UI options:

All three options handle the same basic flow — your user selects their bank, reviews the payment details, and consents to the payment.

The payment journey that displays depends on the bank that your user pays with, not which UI you select. For example, some banks might ask users to open their mobile banking app, while others might use SMS codes or biometric authentication. We handle these out of the box regardless of the UI that you’ve integrated.

Most payment flows in Europe are redirect flows. This means that:

your user selects their provider
we redirect them to the bank site or app of this provider
they log in to their bank with credentials or biometrics and authorise the payment
we display the result of the payment (on web and mobile) and redirect them back to your preferred page.

For some European payments, your user needs to input additional information as well as their choice of provider (for example, a branch) during redirect journeys.

However, some user journeys work differently. Embedded flows, for example, have users input their bank credentials directly inside TrueLayer’s bank screens, rather than being redirected to their bank. Embedded or decoupled flows are only used in German payments.

Additionally, some providers support app2app flows, where the user authorises a payment or connection in their banking app, rather than being directed to a webpage. App2app is particularly prevalent in Belgium, Spain, Ireland and France.

Germany

In Germany, there are multiple different types of payment journey:

Embedded (AIS and PIS)
Redirect flow
Embedded (PIS only)
Decoupled flow

These are all handled by default when you integrate with any TrueLayer UI.

UIs supported in Germany

The Web SDK, hosted page and mobile SDKs are all supported in Germany.

Whether you choose to integrate the hosted page, mobile SDKs or Web SDK, the screens after checkout look the same. The only major difference between the UIs is that the hosted page exists on a TrueLayer URL, while SDK screens are hosted in your native app. However, if you integrate with the Web SDK, you need to implement the dynamic button at checkout.

Below is an example German checkout screen with Web SDK enabled. The dynamic button shows the bank logos which are most relevant to your market.

Embedded combined flow (AIS and PIS)

The AIS and PIS embedded flow, or combined flow, enables the user to retrieve their IBAN without typing it manually. This improves user experience significantly, because most banks require a remitter IBAN to complete the payment.

The list of accounts associated with the user's bank credentials is returned, and they can choose which account they want to pay from.

On a returning user journey, if you have stored and recalled the user’s IBAN, the additional AIS step is not required.

First-time user

Returning user

Redirect flow

This is the standard redirect flow, which is also used in the rest of the EU and the UK.

In this flow, the user is redirected to their SCA provider once they have chosen their provider on the provider selection screen. Once they confirm the payment on the bank site or app, they are redirected back to your site, where you can show them the result of the payment.

Note that you will have to build your own result screen for this flow.

Embedded flow (PIS only)

In the embedded flow, your user inputs their bank credentials, including their IBAN on our screens, rather than being redirected to the bank.

Decoupled flow

In the decoupled flow, your user is directed to a different app for strong customer authentication (SCA), for example PhotoTAN. Most commonly, banks use their own SCA-specific apps for this.

France

In France, all flows are redirect but some require your user to select their branch. There are screens especially for this in Web SDK and hosted page integrations.

UIs supported in France

The Web SDK is supported in France. This provides the best and most feature-rich user experience, so we recommend integrating with it for payment authorisation (unless your use case doesn't allow it.)

If you integrate the hosted page, you will see the same UI but without the dynamic button at checkout.

Web SDK redirect flow with branch selection

Hosted page redirect flow with branch selection

The mobile SDK flow looks similar to the German UI, with the relevant banks for the French market.

Other EU countries

Belgian, Spanish, Italian and Irish payments all use the redirect flow.

Finland

Finnish payments use the redirect flow. However, if you are using Signup+ in Finland, the integration process is Finland-specific. Learn more about Signup+ in Finland.