Before you begin modifying the HTML files you should note that you can make simple changes to our default header and footer files by using our Payment Page editor.
Our standard header and footer files include complex tags and tables structures, where some tables start in the header and end in the footer. These files are not complete HTML files, but are instead HTML fragments that are included within the Payment Service pages.
|
|
A table spans the header and footer in our default files - it is opened in the header and closed in the footer. So, if you add to or delete the table code in the header you will also need to update the code in the footer, to ensure that the table remains balanced and valid. |
If you are creating Payment Service pages in several languages, you cannot just add text in one language to the header and footer files - you need to use a 'displayer tag', which calls text for each of the languages you want to support. This ensures that when the Payment Service pages are displayed in one language, the correct text is used for that language. For more details, please refer to Creating your own Language Versions.
The header.html file defines the header area of the Payment Service pages. It includes:
the Worldpay logo
the side column and side column image
the co-branding image
the header links (to help files)
the background colour.
The header file should be named "header.html". If this file is not included in your set of Test environment files, then our default header.html version will be used.
The header.html file needs to start with a body tag (<body>), followed by anything else that you wish to include at the top of the Payment Service pages, including graphics.
However, you do not need to end the header.html file with a closing body tag, as this is done in the footer.html file.
The default header.html file includes links that appear at the top left corner of the Payment Selection page and Payment Page. These are Help, FAQ and Security. By default these links are for our standard help files, but you can change the links and the files that the links identify. For more details, please refer to Help Message Files.
We recommend that you use our standard default header.html file as the basis of your own customised version. Download the file from:
https://secure.worldpay.com/global3/payment/default/header.html
Although the HTML code in the standard header.html file may seem complex if you are new to HTML programming, you should note that you do not need to change all of the file's content in order to customise it. For instance, you can make small changes, then upload the file, and then make use of the Preview link in the Payment Page editor to assess the effect of the changes.
For example, to remove our logo and the table area that it displays in, delete the code shown in bold below:
<!-- header.html $Revision: 1.8.48.1 $ -->
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:100%;" valign="top" align="left">
<table width="760" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" style="width:760px; height:67px;">
<table class="header" cellspacing="0" cellpadding="0">
<tr>
<td><img src="<wpdisplay config=logo.image>" style="width:372px; height:67px; border:0px;" alt="<wpdisplay msg=header.logo.alt>" /></td>
<td class="headerlogo1"><wpdisplay disp=header.logo1 pre="<img src="" post="" alt="<wpdisplay msg=header.logo1.alt>" />"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:760px;">
<table class="nav" cellspacing="0" cellpadding="0">
<tr>
<td style="width:10px; height:21px;" align="left"><img src="/images/wp/magic.gif" style="width:10px; height:21px; border:0px;" alt="" /></td>
<td align="left" style="vertical-align:middle;"> <a href="<wpdisplay msg=header.tabonelinkaddress>" class="header" target="_blank" title="<wpdisplay msg=header.tabone> - <wpdisplay msg=newwindow.title>"><wpdisplay msg="header.tabone"></a> <a href="<wpdisplay msg=header.tabtwolinkaddress>" class="header" target="_blank" title="<wpdisplay msg=header.tabtwo> - <wpdisplay msg=newwindow.title>"><wpdisplay msg="header.tabtwo"></a> <a href="<wpdisplay msg=header.tabthreelinkaddress>" class="header" target="_blank" title="<wpdisplay msg=header.tabthree> - <wpdisplay msg=newwindow.title>"><wpdisplay msg="header.tabthree"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" style="width:760px;" valign="top" align="left">
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td class="headerlogo2"><wpdisplay disp=header.logo2 pre="<img src="" post="" alt="<wpdisplay msg=header.logo2.alt>" />"></td>
<td style="width:<wpdisplay disp=wp.container.width>" valign="top" align="left">
The footer.html file defines the footer that appears at the bottom of the Payment Service pages.
The footer file should be named "footer.html". If this file is not included in your Test environment, then our default footer.html version will be used.
|
|
This file needs to end with a closing body tag (</body>). Also note that the table structure within the header.html file is finally balanced by the three </table> closing tags included in the default footer.html file. |
We recommend that you use our standard default footer.html file as the basis of your own customised version. Download the file from:
https://secure.worldpay.com/global3/payment/default/footer.html
The default footer.html contains the following HTML code:
</td>
</tr>
<tr>
<td colspan="5" valign="top" align="left" style="height:5px;"><img src="/images/wp/magic.gif" style="height:5px; border:0px;" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" class="footerdivider"><img src="/images/wp/magic.gif" style="width:1px; height:1px; border:0px;" alt="" /></td>
</tr>
<tr>
<td colspan="5" class="footer"><wpdisplay msg="footer.copy" stylize=footer></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
To add an image into the header or footer areas of the Payment Service pages you will first need to upload it using the Payment Page editor's File Management option.
You will then need to add HTML code that references the image as follows:
<img src="/i/instId/fileName.ext">
Where:
/i/ - denotes the images folder in your Test environment on our server.
instId - is the ID of the installation you are customising.
fileName.ext - is the name and extension of the image file (both are case-sensitive), such as png, jpeg, or gif.
|
|
If you use links to images or files on your server, shoppers might receive a warning about both secure and non-secure items being displayed on our secure Payment Service pages. |
The following header HTML fragment sets the background colour, adds an image "logo.gif" and sets the header title to "My Company Ltd.":
<body bgcolor="#aaaa44">
<img src="/i/1234/logo.gif" align=left alt="Company Logo">
<br/>
<h1>My Company Ltd.</h1>
The following footer HTML fragment adds an image "baseline.gif" to the footer:
<img src="/i/1234/baseline.gif" alt="">
</body>
|
|
|
