Skip to content

Instantly share code, notes, and snippets.

@bkardell
Created February 2, 2012 20:19
Show Gist options
  • Save bkardell/1725528 to your computer and use it in GitHub Desktop.
Save bkardell/1725528 to your computer and use it in GitHub Desktop.
PayPal "donate" Hitch
/**
{
"title": "PayPal Donate Hitch",
"type": "html",
"description": "Provides PayPal simple donate button as an HTML hitch",
"package": "bkardell.paypal.simpledonate",
"version": "1"
}
====== <h2>PayPal Simple Donation Widget</h2>
<p>Provides PayPal simple donate button as an HTML hitch</p>
<h2></h2>
<ol>
<li><a href="#basic">Basic Usage in HTML</a></li>
<li><a href="#pluginAttributes">Hitch Attributes</a>
<ol>
<li>data-paypal-email</li>
<li>data-paypal-org</li>
<li>data-paypal-currencyCode</li>
</ol>
</li>
</ol>
<h3 class="sectionnumber"><a name="basic">1. Basic Usage in HTML</a></h3>
<p> In order to use, require the widget url on any block element and fill that element with
anchor tags. By default you need to supply an org name and an email address of who
'owns' the donations.
See <a href="#pluginAttributes">Hitch Attributes</a> for more details on optional
arguments and what their defaults are if not explicitly specified.
</p>
<div class="example">
<p>Examples: </p>
<p>
The following HTML will create a simple PayPal donation button
</p>
<pre>&lt;div data-hitch-widget="package:bkardell.paypal.simpledonate#simpledonate"
data-paypal-email="john.smith@example.com"
data-paypal-org="example.com" &gt;&lt;div&gt;</pre>
Or, you can also use the raw url..
<pre>&lt;div data-hitch-widget="http://www.hitchjs.com/use/bkardell.paypal.simpledonate#simpledonate"
data-paypal-email="john.smith@example.com"
data-paypal-org="example.com" &gt;&lt;div&gt;</pre>
</div>
<h3 class="sectionnumber"><a name="pluginAttributes">2. Optional Hitch Attributes</a></h3>
<p>The following attributes are optional and may be placed on the widget element.
Their explanation and defaults are described in the
table below.
</p>
<table>
<thead>
<tr>
<th style="width:200px">Option</th>
<th style="width:120px">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="required">data-paypal-email</td>
<td>none</td>
<td>The email address of the owner collecting the donation.</td>
</tr>
<tr>
<td class="required">data-paypal-org</td>
<td>none</td>
<td>The name of the organization collecting the donation</td>
</tr>
<tr>
<td>data-paypal-currencyCode</td>
<td>USD</td>
<td>Sets the expected currency code</td>
</tr>
</tbody>
</table>
**/
(function(){
Hitch.add([{
name: 'data-paypal-simpledonate',
base: '[data-hitch-widget$=simpledonate]',
type: 'html',
init: function(m){
for(var i=0;i<m.length;i++){
m[i].innerHTML = '<form action="https://www.paypal.com/cgi-bin/webscr" method="post">'
+ '<input type="hidden" name="cmd" value="_donations">'
+ '<input type="hidden" name="business" value="'
+ m[i].getAttribute("data-paypal-email")
+'">'
+ '<input type="hidden" name="lc" value="US">'
+ '<input type="hidden" name="item_name" value="'
+ m[i].getAttribute("data-paypal-org")
+ '">'
+ '<input type="hidden" name="no_note" value="0">'
+ '<input type="hidden" name="currency_code" value="'
+ (m[i].getAttribute("data-paypal-currencyCode") || "USD")
+ '">'
+ '<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest">'
+ '<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">'
+ '<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">'
+ '</form>';
};
}
}]);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment