Add your branding
To give your customers a more consistent shopping experience, you can add your branding to the Hosted Payment Pages.
To add your branding, you can:
- Add your logo.
- Customise a cascading stylesheet (CSS). You can download and modify a public CSS that we provide.
The set of customisations applies to one installation ID.
To add your logo and customise the public CSS, use the Payment Page Designer. For more information, see the Payment Page Designer.
Add your logo
When your logo is added, it appears in the upper left-hand corner of the payment pages. The logo file should meet the following specifications:
|Asset type||Maximum dimension restrictions||Allowed file types||Maximum file size|
Width: 700 pixels
Height: 200 pixels
To style the Hosted Payment Pages with your branding, you can download and modify our public CSS stylesheet, public.css.
The Worldpay public CSS is available in the Payment Page Designer. For more information, see the Payment Page Designer.
CSS customisation guidelines
To ensure that the customised CSS works properly, we recommend that you follow these guidelines:
Follow these size and naming guidelines for the public CSS file.
- Your edited CSS file should not exceed 30 KB (kilobytes) in size.
- Do not rename the public.css file.
The public CSS contains rule sets with customisable properties. Follow these guidelines when editing the rule sets:
For a given rule set, you can:
- Change the property values.
- Remove the rule set.
- Add new properties to an existing rule set.
- Add new rule sets.
For security purposes, observe the following restrictions with the public.css file:
- Do not include a URL or embedded data in the CSS.
- Do not link to any external resources such as images or scripts.
- Do not use the ::before and ::after pseudo-elements in your CSS. (These pseudo-elements are used to insert content before or after the content of an element.)
- Breakpoints are not customisable. Media queries are not allowed.
You should test customisations on a variety of devices. For example, a font may not render on some devices.