Search

Blog

  Blog
Techemistry Blog

Dynamic PayPal Buttons without using tags

10/16/2013 3:21:00 PM -- Ted Krapf

<p>A client of mine recently wanted to collect payments on her website for event registration with her PayPal account. &nbsp;The catch was, Adults were $10 ea, Children (3-12) were $8 ea, and Children (3 &amp; younger) were $5 ea. So I set out on an adventure to figure out how to do this. &nbsp;Obviously we didn't want to make a PayPal button for every possible combination of registration possible, that would be of been maddening. &nbsp;Instead, ideally I wanted to build a form on her site using some basic HTML and jQuery to pull it off. &nbsp;And after a little playing around, figured out just how to do it. &nbsp;It was also especially important that we accomplish our goal without introducing additional &lt;form&gt; tags into the web page, because the website runs DotNetNuke and already contains &lt;form&gt; tags that would interfere with the PayPal &lt;form&gt; tags.<br /> <br /> </p> <p>The following code is how we accomplished a dynamic PayPal button without using a form tag.<br /> <br /> </p> <p><strong>First the HTML:<br /> <br /> </strong></p> <p>&lt;table&gt;<br /> &nbsp;&lt;tbody&gt;<br /> &nbsp; &lt;tr&gt;<br /> &nbsp; &nbsp; &lt;td&gt;Adults ($10 ea)&lt;/td&gt;<br /> &nbsp; &nbsp; &lt;td&gt;&lt;input type="text" name="adults" id="adults" value="0" /&gt;&lt;/td&gt;<br /> &nbsp; &lt;/tr&gt;<br /> &nbsp; &lt;tr&gt;<br /> &nbsp; &nbsp; &lt;td&gt;Children (3yrs - 12yrs) ($8 ea)&lt;/td&gt;<br /> &nbsp; &nbsp; &lt;td&gt;&lt;input type="text" name="children" id="children" value="0" /&gt;&lt;/td&gt;<br /> &nbsp; &lt;/tr&gt;<br /> &nbsp; &lt;tr&gt;<br /> &nbsp; &nbsp; &lt;td&gt;Children (3yrs &amp;amp; Under) ($5 ea)&lt;/td&gt;<br /> &nbsp; &nbsp; &lt;td&gt;&lt;input type="text" name="kids" value="0" id="kids" /&gt;&lt;/td&gt;<br /> &nbsp; &lt;/tr&gt;<br /> &nbsp; &lt;tr&gt;<br /> &nbsp; &nbsp; &lt;td colspan="2"&gt;<br /> &nbsp; &nbsp; &nbsp; &nbsp;&lt;a id="ppBtn" class="mpc-button" target="_blank" href="#"&gt;Enter Amounts Above&lt;/a&gt;<br /> &nbsp; &nbsp; &lt;/td&gt;<br /> &nbsp; &lt;/tr&gt;<br /> &nbsp;&lt;/tbody&gt;<br /> &lt;/table&gt;<br /> <br /> </p> <p><em>Pretty simple, right? Just an HTML table for some layout, and a few &lt;input&gt; tags for the user to enter the quantity of each type of registration. &nbsp;Note that we set the initial value of the &lt;input&gt; to be zero to help us later with basic validation of the user's input.</em></p> <p><br /> </p> <p><strong>Next, the jQuery:<br /> <br /> </strong></p> <p>&lt;script&gt;<br /> $(document).ready(function () {<br /> &nbsp; &nbsp;$("#adults").change(function () { UpdatePrice(); });<br /> &nbsp; &nbsp;$("#children").change(function () { UpdatePrice(); });<br /> &nbsp; &nbsp;$("#kids").change(function () { UpdatePrice(); });<br /> });<br /> <br /> <br /> function UpdatePrice() {<br /> &nbsp;&nbsp;<br /> &nbsp; var src = "https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;business=user%40emaildomain%2ecom&amp;<br /> item_name=Product%20Item%20Name&amp;item_number=1&amp;no_shipping=0&amp;no_note=1&amp;tax=0&amp;<br /> currency_code=USD&amp;lc=US&amp;bn=PP%2dDonationsBF&amp;charset=UTF%2d8&amp;amount=[AMOUNT]";<br /> <br /> <br /> &nbsp; if(isNaN(parseInt($("#adults").val(),10)) )<br /> &nbsp; {<br /> alert("Number of adults is not a valid number, please try again");<br /> return false;<br /> &nbsp; }<br /> &nbsp; else { &nbsp;}<br /> &nbsp; if(isNaN(parseInt($("#children").val(),10)))<br /> &nbsp; {<br /> alert("Number of children 3-12yrs old is not a valid number, please try again");<br /> return false;<br /> &nbsp;&nbsp;<br /> &nbsp; }<br /> &nbsp; else { &nbsp;}<br /> &nbsp; if(isNaN(parseInt($("#kids").val(),10)))<br /> &nbsp; {&nbsp;<br /> alert("Number of child 3yrs and younger is not a valid number, please try again");<br /> return false;<br /> &nbsp; }<br /> &nbsp; else { &nbsp;}<br /> &nbsp;&nbsp;<br /> &nbsp; var a = parseInt($("#adults").val(),10) * 10.00;<br /> &nbsp; var b = parseInt($("#children").val(),10) * 8.00;<br /> &nbsp; var c = parseInt($("#kids").val(),10) * 5.00;<br /> &nbsp;&nbsp;<br /> &nbsp; var amt = a + b + c;<br /> &nbsp;&nbsp;<br /> &nbsp; src = src.replace("[AMOUNT]", amt.toFixed(2));<br /> &nbsp;&nbsp;<br /> &nbsp; $("#ppBtn").attr("href", src);<br /> &nbsp; $("#ppBtn").text("Pay Now - $" + amt.toFixed(2));<br /> &nbsp; &nbsp;<br /> }<br /> &lt;/script&gt;</p> <p><br /> </p> <em>First on Document Ready, we add events to the three &lt;input&gt;'s for when their value is changed, we call UpdatePrice(). &nbsp;The UpdatePrice function is where all the work is done. &nbsp;We setup "src" as a hyperlink placholder for what we are going to be. &nbsp;Note the properties for "business" needs to be set to your PayPal account's email address or Merchant ID#, the "item_name" needs to be set to the name of your product, &nbsp;"bn" is the type of button, and be sure to set the currency, shipping, and tax information appropriately for your use. &nbsp;You'll notice the value is first set to "[AMOUNT]" in the placeholder. &nbsp;We do a string replace on that later in the function.<br /> <br /> </em> <p><em><strong>Next we use isNaN and parseInt to determine if the values in the textboxes are integers for some simple user input validation. &nbsp;Be sure to include ",10" as a parameter in parseInt as to specify you want to use Base 10.</strong></em></p> <p><em><br /> Next we actually parse the INT values of the textboxes and set variables "a", "b", and "c" for them and&nbsp;multiply&nbsp;them each by their respective dollar value. &nbsp;We then add these values together.</em></p> <p><em><br /> Last we replace "[AMOUNT]" in placeholder "src" and swap the "#" href in the HTML's hyperlink to be the dollar value calculated in "amt". &nbsp;I've used amt.toFixed(2) to ensure we end up with dollars and cents to two decimal places for the link to PayPal. &nbsp;I then change the text value of the hyperlink to reflect what total the user will expect to see once they link from our site to PayPal.</em></p> <p >While this method could probably use a little more validation, error checking, and styling, you should have enough here to easily replicate my quick method for creating a dynamic PayPal button without using a &lt;form&gt; tag.</p> <p >Cheers!</p> <p >PS: obviously don't forget to reference the jQuery library. &nbsp;For testing and production, I simply used the Google API jQuery link.</p> <p><em><strong><br /> </strong></em></p> <p><br /> </p>

[return to articles list]