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
/assets/fragments/pageHeader.html
<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’.
Google Analytics
For google analytics to work with our content security policy, the analytics Javascript library will need to be bundled into the skin. Assuming it is put in /assets/js/analytics.js then the following code will activate it.
$("body").append("<script>"+
"(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){"+
"(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),"+
"m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)"+
"})(window,document,'script',Hosted.Cashier.resourcePath + '/assets/js/analytics.js','ga');"+
"ga('create', 'UA-XXXXX-Y', 'auto');"+
"ga('send', 'pageview');"+
"</script>"
);
The ‘create’ code will need to be replaced with your analytics account number, see https://developers.google.com/analytics/devguides/collection/analyticsjs for more details.
Google Tag Manager is not supported for analytics.
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.