| Note: This is the latest documentation. The previous version of this page is identical — only the left nav differs. |
The Google Checkout shopping cart uses CSS and JavaScript to enable you to quickly add shopping cart functionality to your website. Your customers can add items to the cart and then complete purchases through Google Checkout.
This page provides an example that shows how to add the shopping cart to your site. Once you have the example working, follow the instructions in the remaining documents – just follow the "Next page" links at the bottom of each page – to learn about advanced shopping cart features, such as the ability to customize the appearance of the shopping cart on your site. The instructions also explain how to change the information that your customers will see about your store and your products.
The following three-step example demonstrates how you can add the shopping cart to one of your web pages.
Step 1: Add product information to your web page
Add the following HTML to the body of your web page. (This HTML should appear between the <body> and </body> tags.) The highlighted portions of the code sample are annotations that describe the product to the shopping cart. You could list additional products on the same page by adding another <tr class="product"> element for each product.
|
<style>
.product-image { border:solid 1px #ccc; }
.product-title, .product-price, .product-shipping { font-weight:bold; }
.data-cell { padding:0px 50px 0px 10px;border:solid 0px #fff;vertical-align:top}
.align-cart { padding-left:480px }
</style>
<div id="googlecart-widget" class="align-cart"></div>
<table>
<tr class="product">
<td><img class="product-image"
src="http://code.google.com/apis/checkout/developer/files/google_tshirt.jpg"/>
</td>
<td class="data-cell">
<div class="product-title">Google T-Shirt</div>
<div class="product-price">Price: $12.99</div>
<div class="product-shipping">Shipping: $4.99</div><br/>
<div role="button" alt="Add to cart" tabindex="0" class="googlecart-add-button">
</div>
</td>
</tr>
</table>
After you add this code to your page, the page should display an image for a Google T-shirt along with a product name ("Google T-shirt") and pricing information as shown below:
 |
Google T-Shirt
Price: $12.99
Shipping: $4.99 |
Step 2: Include Google Checkout JavaScript file on your page
Add the following code snippet just before the </body> tag on your page. The mid parameter, which is highlighted in the URL in the code sample, identifies the merchant for the shopping cart. You can use the highlighted value to finish the demo, but you will need to sign up for your own merchant ID to complete your shopping cart integration.
<script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=801947958809860" currency="USD" post-cart-to-sandbox="true"> </script>
After you add this JavaScript snippet, refresh your page. You should see an add-to-cart button below the product information, and the Google Checkout shopping cart should appear next to the product information as shown below. By clicking the Add to Cart button, you will add a T-shirt to your shopping cart and the cart will expand to show an updated subtotal.
 |
Google T-Shirt
Price: $12.99
Shipping: $4.99 |
Step 3: Complete your order with Google Checkout
Okay. You don't really need to buy those Google T-shirts. But your page now includes the Google Checkout shopping cart. So, if you want to buy those T-shirts, just expand the shopping cart. Then click the Google Checkout image in the lower-right corner of the cart to send your order information to Checkout.
Although you have added the shopping cart to your page, you still have a few more steps, some of which are optional, before you are ready to make the shopping cart available to customers:
First, you will need to sign up as a Google Checkout merchant. By signing up, you make it possible for Google to tell you when customers submit orders and to pay you for those orders. You can also set up tax rules for your orders. After all, the last thing we want to do is get you in trouble with the law. The sign-up instructions explain the registration process. When you sign up, you'll get your own Checkout merchant ID, which you'll insert into the JavaScript snippet from step 2.
Note: The snippet in step 2 includes the post-cart-to-sandbox control. You will need to remove this control (or set it's value to false when implementing Checkout for your customer-facing store (as opposed to a testing site).
Second, chances are good that you're selling something other than Google T-shirts. So, you'll need to modify your pages so that the shopping cart can capture information about the products on each page. See the Annotating Pages with Product and Shipping Data instructions to understand the possibilities. Also, please review the Google Checkout content policies to make sure you have identified items that may not be sold using Google Checkout.
Third, you may want to customize the look and feel of the shopping cart. For example, instead of a light blue title background, you may prefer a color that matches your store logo. The shopping cart wizard is an interactive tool that you can use to customize the cart.
Finally, add Google Analytics tracking to your shopping cart integration to better understand how customers interact with your website, enabling you to optimize ad campaigns and website content for increased sales.
While this list identifies the key changes that you will need to make, the shopping cart documentation also includes a few other nuggets of information that you may also want to be familiar with before launching your shopping cart. For example, the Using the Merchant Center page explains how to review and manage your Checkout orders, and the launch checklist contains a complete list of all of the things you want to check before releasing your shopping cart.
Happy selling!
| « Previous (Hand Coding) |
Next » (Buyer Experience) |