Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A gadget that combines Google Wallet/Checkout and PayPal's donation buttons at one place. It also provides input validation and Google analytics integration. Disclaimer: you can use this freely but it does not have any warranty.
<!-- Google Checkout/Paypal donation gadget -->
<!-- written by Falcon Dai, falcondai.com -->
<!--
Usage: Replace all occurrences of {mid} by your Google Merchant ID, {name} by your name, and {pid} by your PayPal account email then it should work.
Disclaimer: you can use this freely but it does not have any warranty. If you like it, you can buy me a coffee.
-->
<p>You can buy me a coffee!</p>
<b>via Google Checkout</b>
<form action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/{mid}?integration=supportgadget-blogger" id="BB_BuyButtonForm" method="post" name="BB_BuyButtonForm" onsubmit="return validateAmount(this, 'google checkout')" style="padding: 5px; margin: 0;" target="_top"><input name="item_name_1" type="hidden" value="Donation to {name}'s blog"><input name="item_description_1" type="hidden" value="You are getting {name} one or many cup(s) of coffee."><input name="item_quantity_1" type="hidden" value="1"><input name="item_currency_1" type="hidden" value="USD"><input name="item_is_modifiable_1" type="hidden" value="true"><input type="hidden" name="shopping-cart.items.item-1.digital-content.display-disposition" value="OPTIMISTIC"><input type="hidden" name="shopping-cart.items.item-1.digital-content.description" value="Thanks For Your Support!"><input name="item_min_price_1" type="hidden" value="1.00"><input name="item_max_price_1" type="hidden" value="100.0"><input name="_charset_" type="hidden" value="utf-8"><tr'></tr'><tr'></tr'><table cellpadding="0" cellspacing="0" width="1%" style="font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color:#444444"><tbody><tr><td nowrap="nowrap" style="padding-bottom:3px;">$ <input id="item_price_1" name="item_price_1" onfocus="this.style.color=&quot;black&quot;; this.value=&quot;&quot;;" type="text" style="color: black; width: 80px; " value="3.00"></td></tr> <tr><td> <input alt="Pay with your Google checkout." title="Pay with your Google checkout." src="https://checkout.google.com/buttons/support.gif?merchant_id={mid}&amp;w=130&amp;h=50&amp;style=white&amp;variant=text&amp;loc=en_US" type="image" style="height: 50px;"></td></tr></tbody></table></form>
<b>or PayPal</b>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return validateAmount(this, 'paypal')" style="padding: 5px; margin: 0;">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="{pid}">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Donation to {name}'s blog">
<input type="hidden" name="item_number" value="One or many cup(s) of coffee">
<input name="item_min_price_1" type="hidden" value="1.00">
<input name="item_max_price_1" type="hidden" value="100.0">
<input type="hidden" name="currency_code" value="USD">
<table cellpadding="0" cellspacing="0" width="1%" style="font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;color:#444444"><tbody><tr><td nowrap="nowrap" style="padding-bottom:3px;">$ <input id="amount" name="amount" onfocus="this.style.color=&quot;black&quot;; this.value=&quot;&quot;;" type="text" style="color: black; width: 80px; " value="3.00"></td></tr>
<!-- Display the payment button. -->
<tr><td><input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="Pay with your PayPal." title="Pay with your PayPal.">
<img border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" ></td></tr></tbody>
</form>
<script type="text/javascript">
// Validates the support amount
function validateAmount(form, method){
var box;
if (method == 'google checkout'){
box=form.item_price_1;
} else if (method == 'paypal'){
box=form.amount;
}
var currencyChar = '$';
if (!box.value.match( /^[0-9]+(\.([0-9]+))?$|^\.[0-9]+$/)) {
alert('Oops, what did you enter?');
box.focus();
return false;
} else {
minDonation = form.item_min_price_1.value.replace(/[^\-\.0-9]+/g,'');
maxDonation = form.item_max_price_1.value.replace(/[^\-\.0-9]+/g,'');
if ((minDonation != "") && (parseFloat(box.value) < parseFloat(minDonation))) {
alert('Thanks! But I don\'t wanna take donations below ' + currencyChar + parseFloat(form.item_min_price_1.value) + ' because the transaction fee will win.');
box.focus();
return false;
}else{
if ((maxDonation != "") && (parseFloat(box.value) > parseFloat(maxDonation))) {
alert('Wow, that\'s a lot! If you insist on giving me this much, you can break it down into shares below ' + currencyChar + parseFloat(form.item_max_price_1.value) + ' each.');
box.focus();
return false;
}else{
// Records the user interactions via google analytics events tracking
_gaq.push(['_addItem', '0', 'CONT', 'Contribution', 'contribution', parseFloat(box.value), '1']);
_gaq.push(['_trackEvent', 'support', 'clicked', method, parseFloat(box.value)]);
return true;
}
}
}
}
// Ading .trim() to String for IE
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/, '');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment