Skin development tips and advice
Page Header and Footer
There are header and footer elements already on every hosted page, so new content can be added with Javascript.
$("header").html("<h1>Online Shop inc.</h1><p>Selling things to people online.</p>");
$("footer").html("<span>© Online Shop inc</span>");It may be easier to define the content in an html file separate from the Javascript. For example inside the skin there could be the file
<h1>Online Shop inc.</h1>
<p>Selling things to people online.</p>This can then be brought onto the page using
$("header").load(Hosted.Cashier.resourcePath + "/assets/fragments/pageHeader.html");Dynamic Custom Fields
The Javascript can dynamically create new form fields, either containing hidden data or for the user to provide. So long as the input name begins with 'cf_' then the value will be added to the transaction as a custom field. For example if the javascript creates the following:
<label>Account Number</label>
<input type="text" name="cf_accountNumber" value="">Then the value given by the user will be added to the transaction as a custom field with the name 'accountNumber'.
Hide content until skin has been applied
When the Javascript of a hosted skin is manipulating the page content, the user may see a unstyled content flash up on their screen. The skin can hide the hosted page content until all the Javascript has been applied with the following css.
body.js-enabled {
display: none;
}
body.js-enabled.js-complete {
display: block;
}The 'js-enabled' class is added to the body element with client-side Javascript, therefore this css will not break the payment form for users who have Javascript disabled.
The 'js-complete' class is added to the body using jQuery. Therefore it will not be present if the skin properties disable the inclusion of the jQuery library.