Ted Krapf Consulting

Dynamic PayPal Buttons without using tags

Date: 10/16/2013 3:21:00 PM

A client of mine recently wanted to collect payments on her website for event registration with her PayPal account.  The catch was, Adults were $10 ea, Children (3-12) were $8 ea, and Children (3 & younger) were $5 ea. So I set out on an adventure to figure out how to do this.  Obviously we didn't want to make a PayPal button for every possible combination of registration possible, that would be of been maddening.  Instead, ideally I wanted to build a form on her site using some basic HTML and jQuery to pull it off.  And after a little playing around, figured out just how to do it.  It was also especially important that we accomplish our goal without introducing additional <form> tags into the web page, because the website runs DotNetNuke and already contains <form> tags that would interfere with the PayPal <form> tags.

The following code is how we accomplished a dynamic PayPal button without using a form tag.

First the HTML:

<table>
 <tbody>
  <tr>
    <td>Adults ($10 ea)</td>
    <td><input type="text" name="adults" id="adults" value="0" /></td>
  </tr>
  <tr>
    <td>Children (3yrs - 12yrs) ($8 ea)</td>
    <td><input type="text" name="children" id="children" value="0" /></td>
  </tr>
  <tr>
    <td>Children (3yrs &amp; Under) ($5 ea)</td>
    <td><input type="text" name="kids" value="0" id="kids" /></td>
  </tr>
  <tr>
    <td colspan="2">
       <a id="ppBtn" class="mpc-button" target="_blank" href="#">Enter Amounts Above</a>
    </td>
  </tr>
 </tbody>
</table>

Pretty simple, right? Just an HTML table for some layout, and a few <input> tags for the user to enter the quantity of each type of registration.  Note that we set the initial value of the <input> to be zero to help us later with basic validation of the user's input.

Next, the jQuery:

<script>
$(document).ready(function () {
   $("#adults").change(function () { UpdatePrice(); });
   $("#children").change(function () { UpdatePrice(); });
   $("#kids").change(function () { UpdatePrice(); });
});


function UpdatePrice() {
  
  var src = "https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=user%40emaildomain%2ecom&
item_name=Product%20Item%20Name&item_number=1&no_shipping=0&no_note=1&tax=0&
currency_code=USD&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8&amount=[AMOUNT]";


  if(isNaN(parseInt($("#adults").val(),10)) )
  {
alert("Number of adults is not a valid number, please try again");
return false;
  }
  else {  }
  if(isNaN(parseInt($("#children").val(),10)))
  {
alert("Number of children 3-12yrs old is not a valid number, please try again");
return false;
  
  }
  else {  }
  if(isNaN(parseInt($("#kids").val(),10)))
  { 
alert("Number of child 3yrs and younger is not a valid number, please try again");
return false;
  }
  else {  }
  
  var a = parseInt($("#adults").val(),10) * 10.00;
  var b = parseInt($("#children").val(),10) * 8.00;
  var c = parseInt($("#kids").val(),10) * 5.00;
  
  var amt = a + b + c;
  
  src = src.replace("[AMOUNT]", amt.toFixed(2));
  
  $("#ppBtn").attr("href", src);
  $("#ppBtn").text("Pay Now - $" + amt.toFixed(2));
   
}
</script>

Next we use isNaN and parseInt to determine if the values in the textboxes are integers for some simple user input validation.  Be sure to include ",10" as a parameter in parseInt as to specify you want to use Base 10.

Next we actually parse the INT values of the textboxes and set variables "a", "b", and "c" for them and multiply them each by their respective dollar value.  We then add these values together.

Last we replace "[AMOUNT]" in placeholder "src" and swap the "#" href in the HTML's hyperlink to be the dollar value calculated in "amt".  I've used amt.toFixed(2) to ensure we end up with dollars and cents to two decimal places for the link to PayPal.  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.

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 <form> tag.

Cheers!

PS: obviously don't forget to reference the jQuery library.  For testing and production, I simply used the Google API jQuery link.