Upgrading from skinning version 1 to version 2

What's New?

The structure for a skin zip itself has not changed at all between versions 1 and 2. The CSS, JavaScript and messages files all go in the same places. Version 2 skins can be uploaded and managed using the same processes, and can be chosen in the hosted request the same way. However, the details of each of these parts can be significantly different.

Skin Properties

Version 2 skinning provides full control over which fields are included on payment forms, and which extended behaviour features to use.

The skin.properties file at the top of the skin zip could be provided in a version 1 skin, but only a couple of properties were supported, and the file was optional. For a version 2 skin the file is mandatory, as it is this file that tells us it is a version 2 skin. If this file is not provided, with the version set as 2, then a skin will be interpreted as a version 1 skin.

See Skin Properties for full details.

JavaScript

A version 2 skin JavaScript file can be a lot shorter than its version 1 equivalent. A version 1 skin typically included a full copy of the Access PaySuite default skin and version of jQuery all inside one JavaScript file. This is no longer the case.

In a version 1 skin, the skin JavaScript file was the only JavaScript on the page. This usually meant the JavaScript in the skin needed to be very long. This is not the case with a version 2 skin, your skin JavaScript needs to only contain the custom behaviour specifically for the skin. All the Access PaySuite JavaScript features will be automatically included from separate files, and can be excluded if you wish via the skin properties.

Additionally the global JavaScript object on the page, that contains information about the hosted session, has been renamed to 'Hosted.Cashier' in version 2.

See Skin JavaScript for full details.

Client-side validation

The JavaScript in our version 1 default skin did not include any client side validation for the form fields, unless the Card Info service was being used, in which case there was some validation on the card number field. When using a Version 2 skin there is by default full validation of all form fields.

HTML

Perhaps the biggest change from version 1 to version 2, is that we have rebuilt the HTML of the payment pages from scratch. The HTML is now easier to style with CSS and manipulate with JavaScript. The page structure is more consistent, and every element on the page is marked up with classes for convenient targeting.

See Skin CSS for full details.

Localisation Messages

All message keys have been reviewed for version 2, with new keys chosen for consistency and clarity.

See Skin Localisation for full details.