Note: To use this tutorial, you should already be familiar with creating content items, adding images and pasting HTML code onto web community pages. This tutorial will demonstrate how to use the Google Checkout Gadget to accept payments for events or other items on your IAAP Web Community site. This can be used as an alternative to PayPal and/or the IAAP Form Generator. Because PayPal's default code does not work with IAAP's web community sites, you might use this option if you need to list multiple payment options, prices or quantities. View a live demonstration of the Google Form and Checkout Gadget View another live demonstration that the CO-WY-MT Division used for its 2011 annual meeting (more detailed) Let's get started... The first thing you will need to do is make sure you have an account setup through Google and follow the directions provided in Google's Checkout Store Gadget guide. When you have completed the steps to create your Checkout Store Gadget, you will eventually end up with a piece of HTML code that looks something like this:  Copy the entire code provided and either keep in in your clipboard or paste it into Notepad or another text editor so you can easily retrieve it. Once your Google Checkout Gadget has been created, you will also have a spreadsheet in your Google Documents that will look something like this:  The information in the spreadsheet is what actually determines what displays on your website. See the screenshot below to see how the columns in the spreadsheet correspond to what displays on the website. In this example, we've setup our spreadsheet for an APW luncheon that has different price points for members and non-members.  Note on images: If you want images to be displayed with each item, they should be sized to 100x100px and uploaded through the Image Manager of your site. You will need to right-click on the image to obtain the image URL. Pasting the image URL into the image_link column on your spreadsheet is how the images are added to the Checkout Gadget. If you do not wish to display images, leave those cells blank in the spreadsheet. In order for that information to display on your site, you will first need to create a new content item on the page you want the Checkout Gadget to appear.  Once you've created a new content item, select the HTML view from the bottom of the page editor.  Paste the entire HTML code we copied earlier and then click back on Design view (if you click Save without clicking back to Design view first, it will not work!). Click Save and your Checkout Gadget should now be displaying on your website. At this point, the Checkout Gadget portion is ready to go. However, if you would also like to collect some additional information from registrants, you can create a Google Form to go directly above the Checkout Gadget. Note: You could also use the IAAP Form Generator in conjunction with the Google Checkout Gadget. To do that, you would create a form that only asks for the main information and exclude any information about meal prices or PayPal account information. Then you would still create the Checkout Gadget using the same steps above. Setting up a Google Form Creating and embedding a Google Form is a similar process to the steps above. To create a new form, go to Google Docs and select Create New Form  Enter the information you want to collect on the form using Google's form creator. Once your form is finished, click "Embed" under the "More actions" menu. Note: You can also click "Edit confirmation" to change the default confirmation message. This is useful if you have specific instructions for registrants.  Clicking embed will again give you a piece of HTML code to add to your site. A separate spreadsheet will be created in Google Docs to store the information collected from your form. Like we did with the Checkout Gadget code, you'll need to create a new content item where you would like the form to appear, then paste the code as HTML, click back to Design view and save. You should now have two separate content items on your page, one for the Checkout Gadget and one for the Google Form (or one for the IAAP form if you use the IAAP Form Generator). In the example below, you can see that we have three separate content items: One for some introduction text, one for the registration form and another content item for the Checkout Gadget.  View a live demonstration of the Google Form and Google Checkout Gadget |
|
|
|
Advanced >
Google Checkout |