Techemistry Blog

Dynamic PayPal Buttons without using tags

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

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 tags into the web page, because the website runs DotNetNuke and already contains tags that would interfere with the PayPal tags.

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

First the HTML:

Adults ($10 ea)
Children (3yrs - 12yrs) ($8 ea)
Children (3yrs & Under) ($5 ea)

       Enter Amounts Above

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

Next, the jQuery:

First on Document Ready, we add events to the three 's for when their value is changed, we call UpdatePrice().  The UpdatePrice function is where all the work is done.  We setup "src" as a hyperlink placholder for what we are going to be.  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,  "bn" is the type of button, and be sure to set the currency, shipping, and tax information appropriately for your use.  You'll notice the value is first set to "[AMOUNT]" in the placeholder.  We do a string replace on that later in the function.

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


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

[return to articles list]