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.
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_primaryto customise background colourc_secondaryto customise button and loader colourc_tertiaryto customise input, links and hover colour
The colours must be provided in hexadecimal format. For example, c_primary=bbbbbb.
Image showing bank selection screen with the customisable features of primary background and tertiary link and hover colours.
Image showing bank selection screen with the customisable feature of tertiary input and illustration colours.
Image showing payment confirmation screen with the customisable features of secondary button and tertiary link colours.
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
Updated 22 days ago