Style the HPP user interface

Customise hosted payment page to fit with your brand

your name and logo

You can customise your hosted payment page to match the look and feel of your brand. Go to the Payments Customisation section of our developer console to:

  • Upload your merchant logo
  • Update the application name

When you update these settings, they automatically apply to the hosted payment page.

2880

Image showing a bank selection screen with the customisable features of payee account name and app name.

Colour scheme

The hosted payment page accepts 3 optional hash parameters in the URL to override the default colour scheme:

  • c_primary to customise background colour
  • c_secondary to customise button and loader colour
  • c_tertiary to customise input, links and hover colour

📘

The colours must be provided in hexadecimal format. For example, c_primary=bbbbbb.

2880

Image showing bank selection screen with the customisable features of primary background and tertiary link and hover colours.

2880

Image showing bank selection screen with the customisable feature of tertiary input and illustration colours.

2880

Image showing payment confirmation screen with the customisable features of secondary button and tertiary link colours.

2880

Image showing a screen redirecting the user to their bank with the customisable feature of secondary loader colours.

https://payment.truelayer-sandbox.com/payments#c_primary=0000FF&c_secondary=00FF00&c_tertiary=FF0000&payment_id=6755dacf-7dd8-4577-ba11-667b6aca8474&resource_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGllbnRfaWQiOiJwZW5ueWRldi1lNTkzOGEiLCJqdGkiOiI2NzU1ZGFjZi03ZGQ4LTQ1NzctYmExMS02NjdiNmFjYTg0YmYiOjE2MzQ2Mzk1NDQsImV4cCI6MTYzNDY0MDQ0NCwiaXNzIjoiaHR0cHM6Ly9hcGkmRldiIsImF1ZCI6Imh0dHBzOi8vYXBpLnQ3ci5kZXYifQ.vlEvoSdFv8g7t21RlXYyus01uEZlalK89P4Ii7Avl_8&return_uri=http://localhost:3000/redirect