Create a gist now

Instantly share code, notes, and snippets.

Commerce.js Checkout (Advanced)
<!---
This is a advanced javascript checkout built with Commerce.js (http://commercejs.com).
Tutorial: Checkout Tutorial (Advanced) - http://commerce.js.com/docs/overview/checkout-tutorial-advanced/
!-->
<html>
<head>
<title>Checkout Tutorial (Advanced)</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.7.2/jquery.serializejson.js"></script>
<script type="text/javascript" src="https://chec-cdn.s3.amazonaws.com/js/commerce.js"></script>
<script>
var myStore = new Commerce('pk_test_1101361e43dd408534afd852d22f128d0b7aab34d59d6', true);
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body { text-align: center; font-family:Open Sans; font-weight:400; font-size: 14px; }
#checkout { display: inline-block; margin:0 auto; text-align: left; }
b { font-weight:600; }
.block {
margin: 25px auto;
}
.row { margin: 5px auto; text-align: left; }
input, select { margin: 5px 0px; }
button { font-size: 16px; padding: 15px 25px;}
</style>
</head>
<body>
<h1>Commerce.js Checkout (Advanced) Example</h1>
<form id="checkout">
<div id="cart">
<div class="row">
<h2>Test Product (Advanced) - $79.00</h2>
Quantity: <input name="line_items[item_7RyWOwmK5nEa2V][quantity]" type="number" value="1">
</div>
</div>
<div id="variants" class="row">
<h3>Variants</h3>
</div>
<div id="customer" class="block">
<h3>Customer Details</h3>
<div class="row">
<b>First Name:</b>
<input type="text" name="customer[firstname]" value="" placeholder="First Name">
</div>
<div class="row">
<b>Last Name:</b>
<input type="text" name="customer[lastname]" value="" placeholder="Last Name">
</div>
<div class="row">
<b>Email:</b>
<input type="text" name="customer[email]" value="" placeholder="Email">
</div>
</div>
<div id="shipping" class="block">
<h3>Shipping Address</h3>
<div class="row">
<b>Country</b>
<select name="shipping[country]" onchange="get_regions($(this).val())"></select>
</div>
<div class="row">
<b>Name:</b>
<input type="text" name="shipping[name]" value="">
</div>
<div class="row">
<b>Street Address:</b>
<input type="text" name="shipping[street]" value="">
</div>
<div class="row">
<b>City:</b>
<input type="text" name="shipping[town_city]" value="">
</div>
<div class="row">
<b>Province/Region/State:</b>
<select name="shipping[county_state]"></select>
</div>
<div class="row">
<b>Postal/Zip Code</b>
<input type="text" name="shipping[postal_zip_code]" value="">
</div>
</div>
<div id="shipping-method" class="block">
<h3>Shipping Method</h3>
<select name="fulfillment[shipping_method]"></select>
</div>
<div id="payment" class="block">
<h3>Payment</h3>
<div class="row">
<input type="radio" name="payment[gateway]" value="test_gateway" checked> Test Gateway
</div>
<hr>
<div class="row">
<b>Card Number:</b>
<input type="text" name="payment[card][number]" value="4242 4242 4242 4242" placeholder="Card Number">
</div>
<div class="row">
<b>Expiry Month:</b>
<input type="text" name="payment[card][expiry_month]" value="01" placeholder="Expiry Month">
</div>
<div class="row">
<b>Expiry Year:</b>
<input type="text" name="payment[card][expiry_year]" value="2021" placeholder="Expiry Year">
</div>
<div class="row">
<b>Security Code (CCV):</b>
<input type="text" name="payment[card][cvc]" value="123" placeholder="Security Code (CCV)">
</div>
<div class="row">
<b>Billing Postal/Zip Code:</b>
<input type="text" name="payment[card][postal_zip_code]" value="94107" placeholder="Billing Postal/Zip Code">
</div>
</div>
<button type="button" onclick="capture();">Buy Now</button>
</form>
<script defer>
$(document).ready(function(){
//Create a checkout token for the product with the permalink 'commerce-js-example'.
myStore.Checkout.generateToken('commerce-js-advanced', 'permalink', function(resp){
//Store the checkout token id as a global variable
checkout_token_id = resp.id;
/*
CREATE VARIANT <SELECT>'s'
__ __ _____ _____ _ _ _______ _____
\ \ / / /\ | __ \ |_ _| /\ | \ | | |__ __| / ____|
\ \ / / / \ | |__) | | | / \ | \| | | | | (___
\ \/ / / /\ \ | _ / | | / /\ \ | . ` | | | \___ \
\ / / ____ \ | | \ \ _| |_ / ____ \ | |\ | | | ____) |
\/ /_/ \_\ |_| \_\ |_____| /_/ \_\ |_| \_| |_| |_____/
*/
//Loop through each variant in the first line item (we only have one product for this checkout)
$.each(resp.line_items[0].variants, function(k, variant) {
//Open select
var variant_html = "<select name=\"line_items["+resp.line_items[0].id+"][variants]["+variant.id+"]\">";
//For each option in this variant create an <option> field
$.each(variant.options, function(k, option) {
//Set the <option> value as this option's id
variant_html += "<option value=\""+option.id+"\">" + option.name + "</option>";
});
//Close the select
variant_html += "</select><br>";
//Append the new <select> in the variants <div>
$('#variants').append(variant.name+': '+variant_html);
});
/*
CREATE THE SHIPPING METHOD <SELECT>'s
_____ _ _ _____ _____ _____ _____ _ _ _____
/ ____| | | | | |_ _| | __ \ | __ \ |_ _| | \ | | / ____|
| (___ | |__| | | | | |__) | | |__) | | | | \| | | | __
\___ \ | __ | | | | ___/ | ___/ | | | . ` | | | |_ |
____) | | | | | _| |_ | | | | _| |_ | |\ | | |__| |
|_____/ |_| |_| |_____| |_| |_| |_____| |_| \_| \_____|
*/
//Loop through each shipping option
$.each(resp.shipping_methods, function(k, method) {
//Create an <option> for the method
var option_html = "<option value=\""+method.id+"\">"+method.description+" + "+method.price.formatted_with_symbol+"</option>";
//Append the new option to the shipping option <select>
$('select[name="fulfillment[shipping_method]"]').append(option_html);
});
//Let's use the List all countries helper to populate the shipping[country] <select> with countries
myStore.Services.localeListCountries(function(resp){
$('select[name="shipping[country]"]').html(resp.html);
//Pre select USA
$('select[name="shipping[country]"] option[value="US"]').prop('selected', true);
//lets grab a list of all states for the US and populate the shipping[county_state] <select>
get_regions('US');
});
},
function(error){
console.log(error);
}
);
});
//When the buyer select their country, lets grab a list of all provinces/states for that country and populate the shipping[county_state] <select>
function get_regions(country_code){
myStore.Services.localeListSubdivisions(country_code, function(resp){
$('select[name="shipping[county_state]"]').html(resp.html);
});
}
/*
The capture function
_____ _____ _______ _ _ _____ ______
/ ____| /\ | __ \ |__ __| | | | | | __ \ | ____|
| | / \ | |__) | | | | | | | | |__) | | |__
| | / /\ \ | ___/ | | | | | | | _ / | __|
| |____ / ____ \ | | | | | |__| | | | \ \ | |____
\_____| /_/ \_\ |_| |_| \____/ |_| \_\ |______|
*/
function capture(){
//We're using jQuery.serializeJSON (https://github.com/marioizquierdo/jquery.serializeJSON) to convert the form into a json object so we don't have to do any extra formatting
var order = $('#checkout').serializeJSON();
myStore.Checkout.capture(checkout_token_id, order,
function(resp) {
console.log(resp)
},
function(error) {
console.log(error)
}
);
}
</script>
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment