Colours

You can customise the colours of these elements on the mobile payment pages:

You can specify a colour using either the hexadecimal value or the HTML colour name.

For more information about hexadecimal colour values, please refer to http://www.w3schools.com/html/html_colors.asp and http://www.w3.org/TR/css3-color/.

To customise the colours:

1.       At the Payment Page Editor, under the Edit Menu Mobile, click Colours.

2.       See the following sections for information on customising the colours of various elements on the mobile payment pages.

3.       To save your customisation(s), select the Set Colours check mark.


Your changes are saved to the test environment.

Breadcrumb colours

The breadcrumb appears at the top of a payment page. It lets the shopper know the current stage of the payment process. By default, the stage indicator or label is numeric. However, you can replace the number with a single alphanumeric character to match your order process.

Breadcrumb colour

The colour of the breadcrumb.

Breadcrumb stage 1-3 label

The stage indicator or label. To customise, enter a single alphanumeric character.

Breadcrumb stage labels colour

The colour of the alphanumeric stage indicator.

Text colours

You can customise the colours of different types of text on the mobile payment pages.

You can quickly see a preview of a customised colour by looking at the two text boxes to the right of each text type. The text box on the left shows the default text colour. When you select the Set Colours check mark to save your customisations, the text box on the right shows the specified custom colour. You can also click Preview to see sample mobile payment pages containing all of your customisations.

Type of text

Applies to

Title

Field names, section headings in the help.

Help Title

Title of a help page.

Body Text

Instructions, values displayed in fields by Worldpay

Highlighted Text

Screen instructions that are highlighted.

Error Text

Error message text.

Input Fields Text

Text input by the shopper into fields.

Button colours

You can customise the colour and font of the following five buttons that can appear on the mobile payment pages:

You can create a gradient effect on a button by specifying a starting colour and an ending gradient colours. The Payment Page Editor creates a smooth transition vertically from the start- to the end-colour.

You can quickly see a preview of a customised button by checking the two buttons labelled Text. The button on the left shows a default button. When you select the Set Colours check mark to save your customisations, the button on the right shows any customisations. You can also click Preview to see sample mobile payment pages containing all of your customisations.

Button characteristic

Meaning

Gradient start colour

The starting colour at the top of the button.

Gradient end colour

The ending colour at the bottom of the button.

Gradient end colour on focus

The gradient end colour at the bottom of a button that appears when a mouse pointer is hovered over the button.

Button border

The border of a button.

Button shadow

The shadow that appears when a mouse pointer is hovered over the button.

Button text colour

The colour of the text on the button.

Button text font

The font of the text on the button.