Google Checkout: Implementing Miscellaneous Requirements

Miscellaneous Order Requirements

This sample shows how you might implement miscellaneous order requirement(s) prior to your shopping cart being sent over to Google Checkout. An example of an order requirement might be that the customer must "Agree to Return Policy" or some merchant "Terms", "Rental/Service Agreement", prior to the order being sent to Google Checkout.

This sample makes use of a check box that must be checked to imply some form of agreement/awareness/understanding/comprehension of some requirement between the merchant and the customer.

What the sample does:

Requires the user to check the box prior to sending the order to Google Checkout
Adds an "order instruction text" that displays this action (of agreeing to something) in the order itself
Note: this is not foolproof and can be edited/modified by the user, but if they do, then it implies some disagreement.
See: Gift Messages and Special Instructions

Note: This is a technical sample...and is not meant to provide any legal "binding" protection on returns, etc.

PayCircuit Coffee Mug
Price: $5.99
Text to print on mug:

Some Weird PayCircuit Widget
Price: $9.99
Text to print on mug:

Some Agreement

So be it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel sapien eu dui cursus iaculis. Aenean sollicitudin odio nec magna consectetur vitae tempus nulla laoreet. Nam auctor nulla id orci commodo non convallis nunc pharetra. Ut at consectetur felis. Nam tellus odio, ullamcorper sagittis aliquet ac, imperdiet non felis. Nulla facilisi. In risus dolor, consectetur quis elementum eu, hendrerit ac sapien. Proin erat turpis, congue sit amet dictum at, vestibulum eget est. Sed gravida, massa ut placerat gravida, enim eros tincidunt justo, non pulvinar turpis augue vel enim. Nunc quis turpis lorem, sed vehicula enim. Quisque nec metus augue.

So this will be as well.

Phasellus vestibulum ullamcorper nisl, vel dapibus eros malesuada eget. Sed mollis metus at ipsum congue venenatis. Nulla eleifend libero a ante tincidunt posuere. Integer luctus convallis nisi, ac vulputate massa blandit quis. Morbi congue elit et enim porttitor ultricies. Proin sapien dui, eleifend ut ultricies et, mattis in arcu. Curabitur et nunc turpis. Morbi aliquam venenatis tellus, non ultrices felis mollis ac. Nulla suscipit sem a nibh mattis malesuada. Etiam faucibus velit sodales dui condimentum interdum. Aliquam erat volutpat. Phasellus id velit nec urna tincidunt scelerisque. Donec sem nisl, iaculis a mattis eget, porttitor vestibulum arcu. Cras suscipit sagittis mauris a euismod. Vivamus ac nunc lectus, sed scelerisque ipsum. Donec nec enim magna, at porta libero. Maecenas placerat massa augue, sed luctus ante. In eu augue eget elit posuere egestas.

Source/Reference

JavaScript

<script type="text/javascript">

    /*        
    This toggles display (show/hide - using PrototypeJS) the TOS div.
    */
    document.observe("dom:loaded", function() {
        //tosLink ID is the link text
        $("tosLink").observe("click", function(event) {
            //Note: in order for toggle to work, display style must be inline. See TOS div.
            $("TOS").toggle();
            Event.stop(event);
        });
    }
    );


    //This function is called when the "checkout" button of the Google Shopping Cart is clicked
    function googlecartOnCheckoutClick() {
        //Obtain element via ID - tosChk is ID value of the checkbox
        var buttonTOS = $("tosChk");

        //evaluate if the checkbox was checked
        if (buttonTOS.checked) {
            //this adds an instruction text to the order
            //see: http://code.google.com/apis/checkout/developer/Google_Checkout_HTML_API_Gift_Messaging.html
            $("tosTxt").value = "Agreed to Some PayCircuit Agreement " + new Date();

            //if the checkbox was checked, proceed to Google for checkout
            return true;
        } else {
            //otherwise, the checkbox was not checked so alert the user and prevent
            //from moving forward to Google Checkout
            alert("You must agree to Some PayCircuit Agreement");
            return false;
        }
    };
    
</script>

HTML

 <div class="product">
        <span class="product-title">PayCircuit Coffee Mug</span>
        <br />
        Price: <span class="product-price">$5.99</span>
        <br />
        Text to print on mug:
        <input class="product-attr-something" type="text" />
        <input class="product-weight" type="hidden" value="2" />
        <div class="googlecart-add-button">
        </div>
</div>               

<div class="product">
        <span class="product-title">Some Weird PayCircuit Widget</span>
        <br />
        Price: <span class="product-price">$9.99</span>
        <br />
        Text to print on mug:
        <input class="product-attr-something" type="text" />
        <input class="product-weight" type="hidden" value="2" />
        <div class="googlecart-add-button">
        </div>
</div>

<div>
    <form id="googlecart-checkout-config">
        <!-- this is the config form for Google Shopping Cart -->
        
        <!-- note checkbox ID -->        
        <div style="padding: 10px 0px;">
            <input name="Checkbox1" type="checkbox" id="tosChk" />I have read and agreed to the <a href="http://www.paycircuit.com/" id="tosLink">PayCircuit Agreement</a> <span style="color: #f00; font-weight: bold">**</span>
        </div>
        
        <!-- Order instruction text value is assigned by Javascript -->
        <input id="tosTxt" type="hidden" name="shopping-cart.buyer-messages.delivery-instructions-1"
            value="" />
            
        <input type="hidden" name="shopping-cart.buyer-messages.delivery-instructions-1.max-chars"
            value="100" />
    </form>
</div>

<div id="TOS" style="display: none; border: 10px solid #999; width: 500px; height: 100px; overflow: auto; padding: 10px; margin-top: 10px;">
<p style="font-size: 2em;">
                Some Agreement</p>
            <p>
                <b>So be it.</b></p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel sapien eu dui cursus
                iaculis. Aenean sollicitudin odio nec magna consectetur vitae tempus nulla laoreet.
                Nam auctor nulla id orci commodo non convallis nunc pharetra. Ut at consectetur
                felis. Nam tellus odio, ullamcorper sagittis aliquet ac, imperdiet non felis. Nulla
                facilisi. In risus dolor, consectetur quis elementum eu, hendrerit ac sapien. Proin
                erat turpis, congue sit amet dictum at, vestibulum eget est. Sed gravida, massa
                ut placerat gravida, enim eros tincidunt justo, non pulvinar turpis augue vel enim.
                Nunc quis turpis lorem, sed vehicula enim. Quisque nec metus augue.
            </p>    
    ....
    
</div>

<!-- Replace with your own MID, and change sandbox=false; when done testing -->

<script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2_2/cart.js?mid=000000000000"  currency="USD" post-cart-to-sandbox="true"> </script>