Google Checkout's HTML API (including BUY NOW Buttons) are easily extended with
server-side code. This usually involves creating a shopping cart using server side
script, and dynamically creating HTML that conforms to Google's HTML API.
But what if you don't have access to server-side resources? This working sample is one way of creating "dynamic fields" with Javascript that conform to Google's HTML API. This is not meant to be replacement for server-side code, and, as with all client-side code, will not work on browsers with Javascript disabled.
What this sandbox sample does:
But what if you don't have access to server-side resources? This working sample is one way of creating "dynamic fields" with Javascript that conform to Google's HTML API. This is not meant to be replacement for server-side code, and, as with all client-side code, will not work on browsers with Javascript disabled.
What this sandbox sample does:
- Will use checkboxes to specify items from a list for checkout
- An additional requirement of 2 (and only 2, min/max) books must be selected from the list. You can modify this rule to anything you prefer.
- Allows you to do (a little) more than just static HTML with BUY Now or HTML API. This sample turns a "simple" BUY NOW button, into a not-so-simple implementation of Google Checkout!
Note: There is an issue/bug with this sample when the user navigates back from Google
Checkout without clicking "Edit Cart" (i.e. browser back arrow).
Source/Reference
JavaScript
<script type="text/javascript">
/*
Requires: PrototypeJS
http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js
*/
document.observe("dom:loaded", function() {
$("theGoogleForm").onsubmit = function() {
var itms = [];
//get checkboxes with name=selections
//use a different name for other checkbox groups in the theGoogleForm (if any)
//You can extend this to handle multiple checkbox groups by omitting the name parameter for later evaluation.
var checks = this.getInputs("checkbox", "selections");
checks.each(function(c) {
if (c.checked) {
var itm = $F(c).split("|");
itms.push({ "item_name": itm[0], "item_description": itm[1], "item_price": itm[2], "item_weight": itm[3] });
}
});
//Change 2 to any number of "required checked items" you need.
//Change validation as necessary, currently, user must select exactly 2 items
if (itms.length == 2) {
var x = 1;
var tgf = $("theGoogleForm");
//build the elements based on selections
itms.each(function(i) {
tgf.appendChild(e("item_name_" + x, i.item_name));
tgf.appendChild(e("item_description_" + x, i.item_description));
tgf.appendChild(e("item_price_" + x, i.item_price));
tgf.appendChild(e("item_weight_" + x, i.item_weight));
tgf.appendChild(e("item_weight_unit_" + x, "LB"));
tgf.appendChild(e("item_currency_" + x, "USD"));
tgf.appendChild(e("item_quantity_" + x, "1"));
x++;
});
//evaluation test was met, send to Google Checkout
return true;
} else {
//evaluation test was not met, prevent form submission
alert("A selection of 2 coffee blends is needed.\nYou selected " + itms.length + " blends.");
return false;
}
};
}
);
function e() {
return new Element("input", { name: arguments[0], value: arguments[1], type: "hidden" });
};
</script>
HTML
<!-- Replace with your sandbox MID. Replace url and mid for production. -->
<form action="https://sandbox.google.com/checkout/api/checkout/v2/checkoutForm/Merchant/000000000000"
id="theGoogleForm" method="post" name="BB_BuyButtonForm">
<p>
PayCircuit Peet's Coffee Sale: Please select <b>any 2 blends</b> from this list</p>
<ol>
<li>
<!--
The value of each checkbox correspond to: item_name, item_description, item_price, item_weight fields.
Modify values as necessary, but do not change sequence (if you do you have to modify Javascript)
Values are delimited by pipe character |
//-->
<input name="selections" type="checkbox" value="PayCircuit Coffees|Major Dickason|8.99|1" />Major
Dickason</li>
<li>
<input name="selections" type="checkbox" value="PayCircuit Coffees|House Blend|7.99|1" />House
Blend</li>
<li>
<input name="selections" type="checkbox" value="PayCircuit Coffees|Seasonal Blend|9.99|1" />Seasonal
Blend</li>
<li>
<input name="selections" type="checkbox" value="PayCircuit Coffees|Decaf House Blend|8.99|1" />Decaf
House Blend</li>
<li>
<input name="selections" type="checkbox" value="PayCircuit Coffees|Decaf Major Dickason|8.99|1" />Decaf
Major Dickason</li>
<li>
<input name="selections" type="checkbox" value="PayCircuit Coffees|Decaf Seasonal Blend|10.99|1" />Decaf
Seasonal Blend</li>
</ol>
<!-- No item fields are in static HTML. -->
<!-- Item fields are dynamically created by Javascript based on checkbox choices -->
<!-- Shipping fields below can also be removed if you prefer to use your profile settings -->
<input name="_charset_" type="hidden" value="utf-8" />
<input type="hidden" name="ship_method_name_1" value="USPS Priority Mail" />
<input type="hidden" name="ship_method_price_1" value="4.95" />
<input type="hidden" name="ship_method_currency_1" value="USD" />
<input alt="" src="https://sandbox.google.com/checkout/buttons/buy.gif?merchant_id=000000000000&w=117&h=48&style=white&variant=text&loc=en_US"
type="image" />
</form>
No comments:
Post a Comment