gje4/moltincustomcart.html

## moltincustomcart.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cart.css">
<!-- <script src="cart.js"> -->
</script>

<script src="https://unpkg.com/@moltin/sdk"></script>
<!--
quick install https://developers.moltin.com/your-first-api-request
//-->

<script>
  const Moltin = moltin.gateway({
    //Add your client id
    client_id: 'D47VQWNv4xZnSvJJqo7iQS61jvf0sq44uou8lXx0Vm'
  })
</script>
</head>

<body>
<h1>Examples of Working With Custom Carts<h1>
<h2>Example 1</h2>
<p>Allowing a user to purchase an item that does not exist in Moltin</p>
<p>Example item:</p>
<code>
"name": "Black t-shirt with dragon","sku": "123029123","description": "This is a custom made t-shirt","quantity": 1,"price": "amount": 10000
</code>
<br />
<br />
<button onclick="cart1button()">Add Custom Item</button>
<br />
<br />
<iframe name="example1Frame"></iframe
<br />
<br />

<h2>Example 2</h2>
<p>User is in Newcastle, UK and wishes to buy a shirt from Boston, US.  This is going to cost more than what was originally accounted for in shipping fees.</p>
<p>Example item:</p>
<code>
"name": "Black t-shirt with dragon","sku": "123029123","description": "This is a custom made t-shirt","quantity": 1,"price": "amount": 10000
</code>
<br />
<br />
<button onclick="cart2button()">Add custom item</button>
<br />
<br />
<iframe name="example2Frame"></iframe
<br />
<br />

<h2>Example 3</h2>
<p>User is in Boston wants to buy a bottle of wine from your California vineyard.  You need to collect 7.25% tax on the order.</p>
<p>Example item:</p>
<code>
"name": "CA Tax","sku": "9238091","description": "TAX from CA to ship out of state.","quantity": 1,"price": "amount": 152500
</code>
<br />
<br />
<button onclick="example3button()">Add custom item</button>
<br />
<br />
<iframe name="example3Frame"></iframe
<br />
<br />

<h2>Try your own item</h2>
<p>This can be used when the product does not exsist in Moltin</p>
<form action=playgroundbutton() method="post" enctype="multipart/form-data">
  <label for="productname">Name:</label>
  <input type="text" id="productname" name="productname">
  <label for="sku">Sku:</label>
  <input type="text" id="sku" name="sku">
  <br />
  <label for="description">Description:</label>
  <input type="text" id="description" name="description">
  <label for="quantity">Quantity:</label>
  <input type="integer" id="quantity">
  <br />
  <label for="price">Price:</label>
  <input type="integer" id="price">
  <label for="customdata">Customdata:</label>
  <input type="text" id="customdata" name="customdata">
</form>

<button onclick="playgroundbutton()">Add custom item</button>
<br />
<br />
<iframe name="playgroundFrame"></iframe>

<script>
//You can have as many carts as you wont.  In this example the cart id is 123.
const exampleCart1 = Math.random();
const exampleCart2 = Math.random();
const exampleCart3 = Math.random();
const examplePlayground = Math.random();


//Example cart functionality
function cart1button() {
  const item = {
    //Type will alyways be custom_item
    type: "custom_item",
    name: "Black t-shirt with dragon",
    sku: "123029123",
    description: "This is a custom made t-shirt",
    quantity: 1,
    price: {
      amount: 10000
    }
  }

  Moltin.Cart(exampleCart1)
    .AddCustomItem(item)
    .then(cart => {
      document.example1Frame.document.body.innerHTML = JSON.stringify(cart)
      console.log(JSON.stringify(cart))
  })
}

function cart2button() {
  //Shipping outside of USA add additional shipping
  const shippingCountry = "UK"
  var item
  if(shippingCountry != "US")
  {
    //add 5
     item = {
      //Type will alyways be custom_item
      type: "custom_item",
      name: "Black t-shirt with dragon",
      sku: "123029123",
      description: "This is a custom made t-shirt",
      quantity: 1,
      price: {
        amount: 10000 + 500
      }
    }
  }
    Moltin.Cart(exampleCart2)
      .AddCustomItem(item)
      .then(cart => {
        document.example2Frame.document.body.innerHTML = JSON.stringify(cart)
        console.log(JSON.stringify(cart))
    })
}

function example3button() {
  //Shipping outside of CA need to collect 7.25% for the state.
  const shippingState = "NY"
  var item
  if(shippingState != "CA")
  {
  //add 5
     item = {
      //Type will alyways be custom_item
      type: "custom_item",
      name: "CA Tax",
      sku: "9238091",
      description: "TAX from CA to ship out of state.",
      quantity: 1,
      price: {
        amount: parseInt(210000 * .0725)
      }
    }
  }
    Moltin.Cart(exampleCart3)
      .AddCustomItem(item)
      .then(cart => {
        document.example3Frame.document.body.innerHTML = JSON.stringify(cart)
        console.log(JSON.stringify(cart))
    })
}

function playgroundbutton() {
    console.log(sku.value)
    console.log(productname.value)
    console.log(description.value)
    console.log(quantity.value)
    console.log(price.value)

    const item = {
      name: productname.value,
      sku: sku.value,
      description: description.value,
      quantity: parseInt(document.getElementById("quantity").value),
      price: {
        amount: parseInt(document.getElementById("price").value)
      }
    }
    Moltin.Cart(examplePlayground)
      .AddCustomItem(item)
      .then(cart => {
        document.playgroundFrame.document.body.innerHTML = JSON.stringify(cart)
        console.log(JSON.stringify(cart))
    })
  }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="cart.css">
	<!-- <script src="cart.js"> -->
	</script>

	<script src="https://unpkg.com/@moltin/sdk"></script>
	<!--
	quick install https://developers.moltin.com/your-first-api-request
	//-->

	<script>
	const Moltin = moltin.gateway({
	//Add your client id
	client_id: 'D47VQWNv4xZnSvJJqo7iQS61jvf0sq44uou8lXx0Vm'
	})
	</script>
	</head>

	<body>
	<h1>Examples of Working With Custom Carts<h1>
	<h2>Example 1</h2>
	<p>Allowing a user to purchase an item that does not exist in Moltin</p>
	<p>Example item:</p>
	<code>
	"name": "Black t-shirt with dragon","sku": "123029123","description": "This is a custom made t-shirt","quantity": 1,"price": "amount": 10000
	</code>
	<br />
	<br />
	<button onclick="cart1button()">Add Custom Item</button>
	<br />
	<br />
	<iframe name="example1Frame"></iframe
	<br />
	<br />

	<h2>Example 2</h2>
	<p>User is in Newcastle, UK and wishes to buy a shirt from Boston, US. This is going to cost more than what was originally accounted for in shipping fees.</p>
	<p>Example item:</p>
	<code>
	"name": "Black t-shirt with dragon","sku": "123029123","description": "This is a custom made t-shirt","quantity": 1,"price": "amount": 10000
	</code>
	<br />
	<br />
	<button onclick="cart2button()">Add custom item</button>
	<br />
	<br />
	<iframe name="example2Frame"></iframe
	<br />
	<br />

	<h2>Example 3</h2>
	<p>User is in Boston wants to buy a bottle of wine from your California vineyard. You need to collect 7.25% tax on the order.</p>
	<p>Example item:</p>
	<code>
	"name": "CA Tax","sku": "9238091","description": "TAX from CA to ship out of state.","quantity": 1,"price": "amount": 152500
	</code>
	<br />
	<br />
	<button onclick="example3button()">Add custom item</button>
	<br />
	<br />
	<iframe name="example3Frame"></iframe
	<br />
	<br />

	<h2>Try your own item</h2>
	<p>This can be used when the product does not exsist in Moltin</p>
	<form action=playgroundbutton() method="post" enctype="multipart/form-data">
	<label for="productname">Name:</label>
	<input type="text" id="productname" name="productname">
	<label for="sku">Sku:</label>
	<input type="text" id="sku" name="sku">
	<br />
	<label for="description">Description:</label>
	<input type="text" id="description" name="description">
	<label for="quantity">Quantity:</label>
	<input type="integer" id="quantity">
	<br />
	<label for="price">Price:</label>
	<input type="integer" id="price">
	<label for="customdata">Customdata:</label>
	<input type="text" id="customdata" name="customdata">
	</form>

	<button onclick="playgroundbutton()">Add custom item</button>
	<br />
	<br />
	<iframe name="playgroundFrame"></iframe>

	<script>
	//You can have as many carts as you wont. In this example the cart id is 123.
	const exampleCart1 = Math.random();
	const exampleCart2 = Math.random();
	const exampleCart3 = Math.random();
	const examplePlayground = Math.random();


	//Example cart functionality
	function cart1button() {
	const item = {
	//Type will alyways be custom_item
	type: "custom_item",
	name: "Black t-shirt with dragon",
	sku: "123029123",
	description: "This is a custom made t-shirt",
	quantity: 1,
	price: {
	amount: 10000
	}
	}

	Moltin.Cart(exampleCart1)
	.AddCustomItem(item)
	.then(cart => {
	document.example1Frame.document.body.innerHTML = JSON.stringify(cart)
	console.log(JSON.stringify(cart))
	})
	}

	function cart2button() {
	//Shipping outside of USA add additional shipping
	const shippingCountry = "UK"
	var item
	if(shippingCountry != "US")
	{
	//add 5
	item = {
	//Type will alyways be custom_item
	type: "custom_item",
	name: "Black t-shirt with dragon",
	sku: "123029123",
	description: "This is a custom made t-shirt",
	quantity: 1,
	price: {
	amount: 10000 + 500
	}
	}
	}
	Moltin.Cart(exampleCart2)
	.AddCustomItem(item)
	.then(cart => {
	document.example2Frame.document.body.innerHTML = JSON.stringify(cart)
	console.log(JSON.stringify(cart))
	})
	}

	function example3button() {
	//Shipping outside of CA need to collect 7.25% for the state.
	const shippingState = "NY"
	var item
	if(shippingState != "CA")
	{
	//add 5
	item = {
	//Type will alyways be custom_item
	type: "custom_item",
	name: "CA Tax",
	sku: "9238091",
	description: "TAX from CA to ship out of state.",
	quantity: 1,
	price: {
	amount: parseInt(210000 * .0725)
	}
	}
	}
	Moltin.Cart(exampleCart3)
	.AddCustomItem(item)
	.then(cart => {
	document.example3Frame.document.body.innerHTML = JSON.stringify(cart)
	console.log(JSON.stringify(cart))
	})
	}

	function playgroundbutton() {
	console.log(sku.value)
	console.log(productname.value)
	console.log(description.value)
	console.log(quantity.value)
	console.log(price.value)

	const item = {
	name: productname.value,
	sku: sku.value,
	description: description.value,
	quantity: parseInt(document.getElementById("quantity").value),
	price: {
	amount: parseInt(document.getElementById("price").value)
	}
	}
	Moltin.Cart(examplePlayground)
	.AddCustomItem(item)
	.then(cart => {
	document.playgroundFrame.document.body.innerHTML = JSON.stringify(cart)
	console.log(JSON.stringify(cart))
	})
	}

	</script>
	</body>
	</html>