# Example Hosted Skin 'Big'

This skin styles the payment form as it if was part of the marchant's own website. It shows how to make several changes in the skin

1. Import page content
This skin has html fragment files saved in the directory /assets/fragments, this are loaded onto the page by main.js using the jQuery load() function. It uses the load callback to dynamically manipulate the fragment.

2. Separate CSS
The CSS for this skin is in two files, /assets/css/page.css and /assets/css/form.css. The central /assets/css/main.css imports these both

3. Changing form layout
This skin moves the amount details to above the card form. It also separates the card form to position the billing address fields.

4. Extracting PayPal
If PayPal is enabled then it is shown not as a radio control as an alternative payment method, but as a single button at the top of the page.

5. Dynamic page content

This skin supports showing shopping cart details. To take advantage of it the hosted initialisation request needs to include a 'skinField' to detail the cart contents. If defined a shopping cart logo will appear in the header and clicking on the logo will show the cart details.

Example custom fields:

"customFields" : {
	"dataFieldOrTextFieldOrLabelField" : [
		{
			"skinField" : {
				"format" : "application/json",
				"name" : "cart",
				"value" : "{ 'items' : [ { 'name' : 'Hat', 'quantity' : '4', 'price' : '4.99' }, { 'name' : 'Shoes', 'quantity' : '1', 'price' : '1.99' }, { 'name' : 'Coat', 'quantity' : '2', 'price' : '9.00' } ] }"
			}
		}
	]
}

THIS IS AN EXAMPLE SKIN PROVIDED WITHOUT WARRANTY.