Customizing Worldpay Hosted Checkout Page
The following wiki describes how to edit the styling of the hosted checkout page when using Worldpay E2E online processing. This is the page customers are directed to input credit card information when completing online purchases.
To edit this page, navigate to
Setup -> Credit Card, then select "Configure Credentials" under "Internet Account Setup". Next, select "Setup Custom CSS". This will open the form where the changes will be made. On this form, there are 2 methods for styling the hosted checkout page:
- Fill in preconfigured properties
- Upload your own stylesheet
Option 1: Edit Preconfigured Properties
This option is considered easiest and acts as a "fill in the blank" method. Simply fill out any desired settings on the form on the "Init Method" tab.
|Background Color||Specifies the background color of the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).|
|Button Background Color||Specifies the background color of the buttons on the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).|
|Button Text Color||Specifies the text color of buttons of the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).|
|Cancel Button Text||Defines custom text for the [Cancel] button. Default value is 'Cancel'.|
|Font Color||Specifies the color for the labels on the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).|
|Font Family||Defines the font family to be used for the labels on the page. Default is Arial. There are 3 pre-defined font-family values that may be used: FontFamily1, FontFamily2, FontFamily3. The pre-defined font families are defined as follows:|
A custom font family may also be specified using comma-delimited string of fonts. Example: ‘Comic Sans MS, Arial, sans-serif’
|Font Size||Specifies the font size. Default is 'Medium'. Options are Small, Medium, Large.|
|Logo Url||Specifies the URL of the logo to display at the top of the page. Default is no logo. The logo should be located on the Merchant’s eCommerce web site at a public URL.|
|Page Title||The html title of the page that the browser will display in the title bar. Default value is ‘Mercury Secure Checkout’.|
|Submit Button Text||Defines custom text for the [Submit] button. Default value is 'Submit Payment'.|
Option 2: Upload Your Own Style Sheet
If you would like to make more advanced changes to your hosted checkout page, you can upload your own stylesheet to be linked to your Worldpay merchant account. This is done by selecting "Upload" on the "Upload CSS Method" tab and selecting the file for upload.
If you have an existing CSS file, you can also download this to your disk using the "Download" button.
Note: If you have uploaded a custom stylesheet, it may override properties set on the "Init Method" tab used in Option 1 above.
Applying Your Changes
Once you have finished making changes, press the "Save" button. The changes will be posted right away.