Paylink-v2 Branding Guide

CityPay allows merchants to change the branding of the Paylink application through applying a cascading style sheet (CSS) to the payment request. Merchants are able to create a style sheet for individual customisable changes to the payment screens. Please note that no customisation is available for the workflow actions. If you have a particular action that is required, please consult your account manager.

The purpose of this guide is for merchants wishing to tailor the branding of the Paylink web forms and lists the elements and classes used for tailoring. CityPay supply example 'skins' of Paylink for users to review.

From time to time CityPay may be required to alter the structure of Paylink for enhancements or for external requirements. CityPay will not accept any responsibility for changes that may break the customisation process contained in this document. Wherever possible changes will adhere to this specification and enhancements added to the branding guide. Announcements will be made prior to these changes.

Hosting of style sheets

CityPay do not provide hosting of customisations and require that the merchant hosts any style sheets on their site. Style sheets should be hosted on a secure server to prevent browsers notifying the user that non secured content is loaded. Merchants therefore may manage their style sheets appropriately.

It is also possible to reference images from your site in standard css notation using background-image('your url')

Cascading Style Sheet Branding Specification

CSS Class or ID

Description

div#paylinkPage

The main page division which identifies the complete Paylink page. The Paylink page wraps all Paylink content.

div.paylinkMenu

Section which provides a navigation menu to the following pages: Help, Security and Privacy

div#cardSchemeLogos

Section provides the card scheme logos for view. The logos are required to be presented on a white background to be in line with the card scheme marketing and branding guidelines

div#paylinkHeader

A header section which may contain background images or logos.

div#paylinkBody

The main body of the application which contains text for help pages or the web form for the payment application. This section contains information regarding the transaction being processed or information responding back on the progress to the merchant.

div#paylinkFooter

The footer of the page which contains copyright information about the page and support information. The area may have an image set in the background

div#paylinkErrors

This contains text information regarding errors found in the web form.

div#paylinkMainterm

The main terminal form for card entry

div#processButton

The process button section

The following figure displays the division elements for the page design. By applying style sheets including position of the elements we can obtain differing branding based on these elements.

CityPay provides a default style sheet if no customisation is supplied. Merchant wishing to utilise their own branding should provide the parameter merch_branding containing a URL value of where the style sheet is hosted. This may be an internal development URL throughout the development and integration process however will need to be available across the Internet on final release.

Testing

CityPay have created a skin testing page for merchants to be able to test their style sheet changes in real time on the server. To access the skin test page, send a valid Paylink test request to the Paylink server, once the default terminal is shown, e.g. https://secure.citypay.com/paylink/12af3b084e1f6d8.paylink?js=1&ui=9N5UD90FV48&ck=true amend the URL to https://secure.citypay.com/paylink/skin-test.jsp. The page will display an example terminal screen, including an error and the ability for you to change the style sheet in real time.

CityPay provide the following examples to demonstrate the use of customisation:

https://secure.citypay.com/paylink/styles/paylink.css

The default Paylink style sheet

https://secure.citypay.com/paylink/styles/clean.css

A very simple clean example style sheet

https://secure.citypay.com/paylink/styles/charcoal.css

A simple dark example showing limiting the width of the terminal and central alignment

https://secure.citypay.com/paylink/styles/showdivborders.css

Shows the borders of the div elements

https://secure.citypay.com/paylink/styles/google.css

An example which uses a known branding including images

CSS Template

The following template provides a starting point for merchants to begin branding by providing empty css elements with clean branding.

body, td, div, .p, a, font, span {
    color:#333333;
    font-family:verdana,arial,sans-serif;
    font-size: 11px;
}

div#paylinkPage {}
div.paylinkMenu {}
div#paylinkHeader {}
div#paylinkBody {}
div#paylinkFooter {}
div#paylinkErrors {}
div#paylinkMainterm{}
div#processButton {}
div#cardSchemeLogos {background-color: #FFF;}
+44 (0)1534 884000