Customising our Banner

Our banner is a box displayed on either of the Result pages, showing our standard confirmation text for the shopper's payment and the dynamically generated text, shown in the example below as: Merchant's Reference: CardId and Worldpay Transaction ID.

Note: Some properties are reserved, such as those used in the banner, which means that you cannot change their contents. This ensures that the Payment Page meets legal requirements and protects consumer rights. However, you can change the fonts and colours of these property values, as described below.

../resources/images/result_layout2_thumb_350_0.jpg

Formatting the dynamically-generated text

The format of the dynamically generated text is controlled by the lines shown in italics in the following fragment of the display.properties file.

Copied!
#######################################################################  
# default font styles for use throughout unless changed for specific style  
#######################################################################  
default.font=Verdana,Geneva,Arial,Helvetica,Sans-Serif  
default.font.size=2  
default.style.start=  
default.style.end=  

# for card labels and small instruction text  
small.font.size=1  

# for button labels, by default bold text  
button.font=Verdana,Geneva,Arial,Helvetica,Sans-Serif  
button.font.size=3  
button.style.start=<strong>  
button.style.end=</strong>  

# mono-space font is used when we must distinguish characters in e.g.  
# a password or user name.
monospace.font=Courier  
monospace.font.size=3  
monospace.style.start=  
monospace.style.end=  
monospace.bold.font=@monospace.font  
monospace.bold.size=@monospace.size  
monospace.bold.style.start=<strong>  
monospace.bold.style.end=</strong>

You can customise the dynamically-generated text by adding to and modifying the properties. For example, to change the colour of the bold text in the banner to white, add the following property for the foreground (fg):

Copied!
monospace.bold.fg=#000000

Customising the Banner

To make the banner look like a page on your website shop, you may need to customise some of the following settings within our standard display.properties file:

Copied!
########################  
#  Banner - displayed on result page  
########################  
banner.bg=@2.bg  
banner.fg=@2.fg  
banner.font=@2.font  
banner.font.size=@2.font.size  
banner.style.start=  
banner.style.end=  

banner.button.fg=@banner.fg  
banner.button.font=@button.font  
banner.button.font.size=@button.font.size  
banner.button.style.start=@button.style.start  
banner.button.style.end=@button.style.end  
banner.button=@proceed.button  

# colours for error messages and warnings within the banner, on banner.bg  
banner.error.fg=@error.fg  
banner.error.font=@error.font  
banner.error.font.size=@error.font.size  
banner.error.style.start=  
banner.error.style.end=  

# configuration of container for banner  
banner.width=@wp.container.width  
banner.border.bg=@wp.container.border.bg  
banner.border.width=@wp.container.border.width  
banner.cellSpacing=@wp.container.cellSpacing  
banner.cellPadding=@wp.container.cellPadding  
banner.cellBorder=@wp.container.cellBorder