Donation Buttons (and other easy tweaks) using Google Checkout’s HTML API

A common request that I get with a lot of the non-profit or foundation work that I do is to have a donation button. Previously, PayPal was the way to go, since they had a donation button maker. The downside was, that paypal takes a cut on your donations unless you jump through some hoops to become a registered “foundation”.

Recently, Google Checkout has rolled out and has some rather enticing features…besides integrating their single sign-on checkout procedures, invoicing, and a bunch of other handy things…for the entire year of 2007 they are offering card-processing with no fees. Thats right…no fees. All of 2007. Nice.

Before I go on to listing my hacks, I do have one small request…I’m building up a referral base and if you have any intention of signing up for a new google sellers account, please consider using my referral link if the info below has helped you (or anything else ive ever posted has). it’s much appreciated, and I get a kickback on your sales (.5%). Full disclosure. Sign up here to use my code.

On to the help.

So…Google Checkout, like most of Google’s other services, has a pretty extensive API and code example library. Sometimes, though, you’re not looking for full integration. You just need a simple donation button where the user can specify any amount.

Or maybe a “buy now” button with a quantity…for tickets, for example.

At first glance…the Google Checkout buttons won’t let you. They only supply 2 options…buy now with a fixed price, or buy now with a drop down of pre-set prices.

So how did I build the buttons above? Using the HTML API. But before I could get started…even the demo code was screwing up with my Merchant Key…because I had missed one tiny setting.

This one’s important.

Under Settings->Integration, there is a checkbox that stops anything but digitally signed XML cart posts. While this IS an important security feature…since you arent posting any secure information via the HTML API, you’re safe enough to allow unsigned posts.

From there…just follow the example listed here on the API help guide. Using the first code block, replacing the dummy merch key with your own merch key should be enough to get it working. Assuming you can post the “chunky peanut butter” demo to your account, you’re ready to move on.

The next step is to make some modifications.

Here’s my ticket-purchase with quantity box code:

<form class="gcheckout" method="POST" action="https://checkout.google.com/cws/v2/Merchant/[[merchID]]/checkoutForm” accept-charset=”utf-8″>
<input type=”hidden” name=”item_name_1″ value=”Martini Tasting Cocktail Benefit”/>
<input type=”hidden” name=”item_description_1″ value=”Join Us for an evening of food & fun Martini tasting & silent auction at the Flanders Hotel.”/>
<label>Quantity:</label><input type=”text” name=”item_quantity_1″ value=”1″ id=”qty”/>
<input type=”hidden” name=”item_price_1″ value=”3.99″/>
<input type=”hidden” name=”_charset_”/>
<input type=”image” id=”submit” name=”Google Checkout” alt=”Fast checkout through Google”
src=”path/to/submit button” />
</form>

And here’s my donation button code:

<form class="gcheckout" method="POST" action="https://checkout.google.com/cws/v2/Merchant/[[merchID]]/checkoutForm” accept-charset=”utf-8″>
<input type=”hidden” name=”item_name_1″ value=”Quintin Foundation Donation”/>
<input type=”hidden” name=”item_description_1″ value=”Thanks for your donation. Every little bit helps!”/>
<input type=”hidden” name=”item_quantity_1″ value=”1″ id=”qty”/>
<label>Donation Amount: $</label><input type=”text” name=”item_price_1″ value=”" id=”amt”/>
<input type=”hidden” name=”_charset_”/>
<input type=”image” id=”submit” name=”Google Checkout” alt=”Fast checkout through Google”
src=”path/to/image/btn_donatenow.gif” />
</form>

At this point you should notice some differences between the demo code and mine. First, the form action is now posting to the actual cart form rather than the sandbox (i bypassed the whole sandbox thing since this isn’t a full e-commerce integration). Replace [[merchID]] with your own ID (and drop the angle brackets). I added the class gcheckout to the form tag for formatting purposes. Also, set the path of the input id=”submit” to your submit button graphic.

All of that leadup, and the trick itself is actually very simple!

The core pieces to making this whole thing work are the inputs, which, in the demo code, are all set to hidden. It’s very simple to change the type from hidden to text, and make them user-editable. By placing a label in front of them, and a little bit of styling, you get some pretty swanky buttons with user-input flexibility.

All of the customizable input fields are detailed here. This should allow you to specify shipping details, tax details, and many other parameters…depending on the needs. And remember…so long as you keep the “name” property, you can switch to a dropdown or a multi-select box…allowing you to create some fairly robust button codes!

Oh..and for debugging? Go back to that integration place (where you unchecked the shopping cart post security box) and check the log. It’s pretty useful when google checkout chucks a fairly nondescript error for the user, but lets you track down problems.

TAKE THAT PAYPAL!

I’ll come back to this post in about a week when we’ve launched the site that I figured this out for, so you can see the code in action.
Check things out at http://www.quintinfoundation.com. Note, that we were asked by Google to take down our donation button until there was some tax-related information squared up. More on that issue to come.

Tags: google checkout, donation button, HTML, API