Payments UI customisation
You can customise your payments authorisation flow in Console.
The Payments UI Customisation page in Console contains options to change the appearance of your payment authorisation flow.
These are the payment-related UI options you can configure:
- Hosted Payments Page: A live preview of the hosted payment page, along with some customisation options, such as logo and merchant name.
Note that these customisation options apply to all Payments API v3 user interfaces, including the HPP, EPP, mobile SDKs, and payment links. - Payments Dialog (v2): Visual settings related to our legacy Payments API v2. All new integrations should use v3 instead. As such, this section only displays if you enable it within
- EPP Demo: A page where you can test and preview the EPP. Learn more in our EPP documentation.
Hosted payments page customisation
When you select Hosted Payments Page to customise your UI, a preview of the HPP user flow displays in the window on the right of the page. Use this to check your UI updates before you click Save in the top left to save your changes.
In the bar at the top edge of the preview window, you can:
- Switch between a desktop, portrait mobile, and landscape mobile preview.
- Switch between a preview of the Provider selection, Review payment, Loader, and No search result screens.
- Zoom in and out of the preview.
If you select the Search for your bank field, you can type to test provider search your users will experience.
This table contains all of the UI elements you can customise in Console.
| UI customisation option | Description |
|---|---|
| Your app name | The name of your app. This displays at the bottom of the provider selection screen and on the payment review screen. If Your app name is the same as your payee account name, the two are merged and display as one on the payment review screen. |
| Logo | The logo that displays for your app next to Your app name. |
The customisations you make in the Hosted Payments Page section also apply to other Payments API v3 UIs, such as the EPP, mobile SDKs, and payment links.
Further UI customisation
Some TrueLayer UIs support additional customisation. For example, you can use hash parameters in your HPP link you can customise the colour of elements in the HPP.
See our payment user interface documentation to find the available customisation options for your chosen UI.
Updated 9 days ago