Page header and footer
There are header and footer elements already on every hosted page, so you can add new content with JavaScript with the following code:
$("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 a file.
/assets/fragments/pageHeader.html <h1>Online Shop inc.</h1> <p>Selling things to people online.</p>
You can then bring this onto the page using this code:
$("header").load(Hosted.Cashier.resourcePath + "/assets/fragments/pageHeader.html");Dynamic custom fields
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 adds 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 is added to the transaction as a custom field with the name accountNumber.
Google Analytics
For Google Analytics to work with our content security policy, you need to bundle the analytics JavaScript library into the skin. Assuming it’s put in /assets/js/analytics.js, then you need the following code to 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');"+You need to replace the create code with your analytics account number. You can see the Google site for more information.
📌 Note: We don’t support the Google Tag Manager for analytics.
Hide content till skin applies
When the JavaScript of a hosted kind is manipulating the page content, you may see content flash up on your screen before styling. The skin can hide the hosted page content until all the JavaScript is applied with the following css:
body.js-enabled { display: none; } body.js-enabled.js-complete { display: block; }Client-side JavaScript adds the js-enabled class to the body element; this css doesn’t break the payment form for users who have disabled JavaScript.