Last active
June 10, 2019 02:28
-
-
Save dvnkshl/a0d234863a0bb59c459431102ac6e180 to your computer and use it in GitHub Desktop.
Commerce.js Checkout (Advanced)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--- | |
| 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://cdn.chec.io/v1/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
It might be worth noting this is using the deprecated CDN URL on line 10. If it helps anyone viewing this gist, here's a working live demo of this web page. https://codepen.io/johnraymon/pen/yWmmxM.
Also here's the updated CDN URL, https://cdn.chec.io/v1/commerce.js.