Console

Style the EPP user interface

Suggest Edits

Your name and logo

You can customise your embedded 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 embedded payment page.

Basic user interface styling

To sit well alongside the rest of your page, we provide some simple colour customisation options. Use hex values to define the following colour properties:

PropertyEffect
defaultColorSets a highlight colour that is used throughout the embedded payment page
spinnerOverrides the default colour to define a specific colour for the loading spinner.
illustrationOverrides the default colour to define a specific colour for the illustrations used throughout.
1114 
const payment = Payment(const payment = Payment({
    payment_id: 'example-string',
    resource_token: 'example-string',
    return_uri: 'example-string',
    appearance: {
        defaultColor: Color,
        spinner: { color: Color }
        illustration: { color: Color }
    },
    ...
}

👍

Displaying your brand name and logo

Remember to set your Payments Customisation options in Console to:

  • Set your merchant logo
  • Set your application name

These are used throughout the embedded payment page.

Extended user interface styling

With additional permissions, you can customise the look of EPP even further, to compliment your brand style.

🚧

Special access feature

If you're interested in extended user interface styling, please get in touch with your TrueLayer contact.

1144

The following customisation options can be defined separately for each state of the element (default, focus, hover, disabled):

ElementStyling OptionsElement States
buttoncolor: the text colour
background the background colour
border: color, borderRadius, width, style		default
hover
active
focus
disabled
listOptioncolor: the text colour
background the background colour
border: color, borderRadius, width, style		default
hover
active
focus
disabled
inputplaceholder: color for the colour of the placeholder text shown inside the input box
label: color for the title or label of the input box
icon: color for any icons shown with the input box
border: color, borderRadius, width, style
background: color		default
hover
focus
disabled
fontSimply set the font name, using any font available from Google Fonts.Not applicable.
import { Payment } from 'truelayer-embedded-payment-page'
const payment = Payment({
  payment_id: 'example-string',
  resource_token: 'example-string',
  return_uri: 'example-string',
  appearance: {
    font: "Roboto"
    defaultColor: '#F0FFFF',
    illustration: { color: '#FF00FF' },
    button: {
      default: { background: '#FF00FF' },
      disabled: { color: '#FF00FF' },
      hover: { background: '#FF0000' },
      focus: {
        border: { color: '#FF00FF', borderRadius: '8px', width: '4px' },
      },
    },
    listOption: { selected: { background: '#7700ff' } },
    input: {
      disabled: {
        placeholder: { color: '#0026ff' },
        label: { color: '#0026ff' },
      },
    },
    input: {
        default: {
            placeholder: {
              color: Color,
         },
         label: {
            color: Color,
            },
            icon: {
            color: Color,
            },
            border: {
            color: Color,
            borderRadius: CssPropertyValue,
            width: CssPropertyValue,
            style: CssPropertyValue,
            },
            color: Color,
            background: Color,
        },
  },
})

Updated 22 days ago