How to create a coupon discount for PayPal buttons

Here are the codes I use to create a coupon discount for PayPal buttons.

First, create your PayPal button:

  1. Log in to your PayPal account.
  2. Click on the Merchant Services Tab and select “Buy Now Button”
  3. Click create a “Buy Now” button.
  4. Enter your information to customize the button to your needs.
  5. Click Step 2 and uncheck the “Save button at PayPal”
  6. Click “Create Button.”
  7. Click “Remove code protection”
  8. Click “Select Code” to select the button code.

Next, paste the code for your PayPal button into your webpage.

To add the check discount code box, paste this line of code before the “input type=”image” part of the button code:

Enter Coupon code
<input type="text" size="10" name="coupcode"; />
<input type="button" value="Check code" onclick="coupval =this.form.coupcode.value;  ChkCoup();" />

You can also use this block of code for your button and edit as needed rather than generating your own button from PayPal:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target = 'paypal'; return ReadForm (this);">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="" />
<input type="hidden" name="item_name" value="1 Item" />
<input type="hidden" name="amount" value="50.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="baseamt" value="50.00" />
<input type="hidden" name="basedes" value="1 Item" />
Enter Coupon code
<input type="text" size="10" name="coupcode"; />
<input type="button" value="Check code" onclick="coupval =this.form.coupcode.value;  ChkCoup();" />
<input type="image" id="xx" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" onclick="CalculateOrder(this.form)" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Make sure you add the correct value (either your PayPal email address or your Merchant account ID number) to this line:

<input type="hidden" name="business" value="" />

If you want to force people to use a discount code before adding an item to their cart, make sure you add this line of code to the

disabled="disabled"

This disables the button until the correct coupon code is entered. This is only necessary if you are using the button ONLY for people who have discount codes. If you want people to be able to make purchases whether they have a discount code or not, you don't need to add that line.

Next, you will want to create the Javascript file which contains the passwords and discounts for your button. Copy and paste this code into a new text file:

<!--
var discnt = 0;   // no default percent discount

var coupons = new Array (  // place to put coupon codes
  "coup1",                 // 1st coupon value - comma seperated
  "coup2",                 // 2nd coupon value - add all you want
  "coup3"                  // 3rd coupon value
);
var coupdc  = new Array (  // place to put discounts for coupon vals
  5,
  10,
  15
);
var coupval = "(blanket)"; // what user entered as coupon code

function ChkCoup () {      // check user coupon entry
var i;
  discnt = 0;              // assume the worst
  for (i=0; i<coupons.length; i++) {
    if (coupval == coupons[i]) {
      discnt = coupdc[i];  // remember the discount amt
      alert ("This is a valid promo code! \n\n" + discnt + "%" + 
             " discount now in effect.");
      return;
    }
  }
  alert ("'" + coupval + "'  is not a valid promo code!");
}

function Dollar (val) {      // force to valid dollar amount
var str,pos,rnd=0;
  if (val < .995) rnd = 1;  // for old Netscape browsers
  str = escape (val*1.0 + 0.005001 + rnd);  // float, round, escape
  pos = str.indexOf (".");
  if (pos > 0) str = str.substring (rnd, pos + 3);
  return str;
}

function ReadForm (obj1) {  // apply the discount
var amt,des;
  amt = obj1.baseamt.value*1.0;       // base amount
  des = obj1.basedes.value;           // base description

  if (discnt > 0) {                   // only if discount is active
    amt = Dollar (amt - (amt * discnt/100.0));
    des = des + ", " + discnt + "%" + "dis, COUP = " + coupval;
  }

  obj1.amount.value = Dollar (amt);
  obj1.item_name.value = des;
}
//-->

Here is a link to the Javascript file that you will need - http://thelibzter.com/discount.js. Feel free to right-click and save the file to your desktop so that you can edit it and upload it to your own site.

To add the coupon codes you want to use, change the names coup1, coup2, and coup3 to the passwords that you want to use.

To add the discount amounts, change the 5, 10, and 15 to the percentage that you want the discounts to be for.

You will want to make sure that the button amount is higher than any of the discounted prices. For instance, if you want to offer three different discounts - one which reduces the price to $750, one which reduces is to $725, and one which reduces it to $700 - you will want to make sure that the amount of the original button is at least $750, and then add the discounts for the correct percentages to bring the price down to the amount you want.

The final step, which I use to make the discount button more secure, is to pack part of the Javascript code. I copy the line of the code that contains my discount passwords:

var coupons = <strong>new</strong> Array (  // place to put coupon codes   "coup1",                 // 1st coupon value - comma seperated   "coup2",                 // 2nd coupon value - add all you want   "coup3"                  // 3rd coupon value );

And paste it into Dean Edward's packer - http://dean.edwards.name/packer/. Click "pack" and then copy the packed code and paste it into your Javascript file in place of the line above, which declared our passwords. This makes it more difficult for people to see your coupon codes.

Save the Javascript file as discount.js or whatever you want it to be called. Upload it to your server. Add this line of code to your website's section:

<script type="text/javascript" src="http://yourwebsite.com/discount.js"></script>

Make sure you change the name of the Javascript file in the code above to the name of your own file.

Let me know if you run into any issues or have any questions.

Meet the author

My name is Libby Fisher and I am an experienced freelance web developer based in Seattle WA. I am passionate about developing websites that are both beautiful AND easily usable because I believe that the most effective websites are a perfect balance of aesthetic appeal and usability/intuitiveness.

157 Comments

Leave a response

*

  1. Ryan B says:

    Thanks for the great code. I have it working but have one question. The values for the discounts in “var coupdc” is in percentage but the notification box that pops up states the percentage as a dollar amount. So if I discount 5%, it says a $5 discount is applied. If I do 10% discount, it says $10 is discounted. Am I missing something?

  2. Dave says:

    Libby,

    Thanks for the great information! Can you (or anyone else reading this) tell me what in the code tells the button to submit once the correct discount code is entered? I do not want users to be able to order without using the discount code, so I have disabled=”disabled” in my image tag as you explain in your instructions. However, this makes the button completely non-functional. If I remove it, everything works fine, except users w/o codes can order at the regular price which is not what this page is for. Thanks in advance for anyone who can help, and thanks again Libby for taking the time to help us on your site!

  3. Ryan Smith says:

    Hi Libby,

    How would I convert the Javasript to GB Pounds.

    Also at the moment this is not taking any discount off at the Paypal cart page.

    Thanks

    Ryan

  4. Steven says:

    Hi Libby,

    A few months ago you helped me work through adding this to my site. I got it to work eventually. But then I had to remove the function for various reasons. Now I need to implement it again, and unfortunately I deleted the old file. I am trying to recreate the magic, but haven’t been able to. Can you please take a look: http://www.rescuepegs.com/order_discount.html.

    Thanks!

    • Libby Fisher says:

      Hi Steven,

      Ok, the first thing I notice is the call to your Javascript in the section of your site has a typo in it:

      This line: script source=”http://www.rescuepegs.com/discount.js” type=”text/javascript”…

      Should be: script src=”http://www.rescuepegs.com/discount.js” type=”text/javascript”…

      Once you correct that, lets see if the discount works properly.

      Thanks!

  5. Shari M. says:

    Hi Libby this is a great tutorial. My site is also in weebly, and I followed all of the instructions above, hosting the .js file at my public dropbox, etc. Everything works fine, when I check the coupon code it is fine, except for the fact that the 10% discount I set is not reflected in the price when I click on the Buy Now button, it still shows the same price, $10, that I set for my test item in Paypal, with a 10% discount it should be $9. This is so great, btw, thanks for the post! Page where button is located:
    http://www.michaeldevinehome.com/dottie-coral-eyeglass-tray-discount.html

    • Libby Fisher says:

      Hi Shari,

      Hmm I think the problem is that your button code does not have this line:

      <input type=”hidden” name=”baseamt” value=”VALUE” />

      Please try adding that line to the button code and make sure the value of “baseamt” is the same as the value of “amount” in the code – this line is necessary because that is what the Javascript file uses to calculate the discount off of.

      Thanks!

  6. Paulo says:

    Why it doesn’t show it automatically adjusted the original button price to discounted one when it got into Paypal page to confirm payment? Please help!

    Thanks,
    Paul G.

  7. Paul says:

    Hi,

    Thanks for a great tutorial. I followed every step above and just have some issue setting the value for the

    I have a dropdown option with a different prices on my Paypal form. How do I go about resolving this?

    Thanks so much for the tutorial!

    Thanks,
    Paul G.

  8. Tim says:

    Does this code work with one paypal button that has three options? (I haven’t been able to make it work) Can you write a code that will? Let me know how much we’re looking at, as I appreciate you making your code available, but talent such as yours should be compensated. :lol:

  9. Lee Ness says:

    Hi Libby.
    I’ve uploaded the code and I can see the button but can’t seem to get the button to work. I assume this is because of the discount.js file and I’ve tried a few different ways to edit the index.html file (iWeb doesn’t make it easy). I’ve reverted to a doing a text edit on the ftp server and tried a few addresses to call it up but can’t seem to get it to work. Any ideas?

    • Lee Ness says:

      ps great tutorial by the way and my website name is newpersonalbest.co.uk

      • Libby Fisher says:

        Hi again,

        I just saw the link to your site, thanks for providing that! I dont see in the source code for your product pages a link to the discount Javascript file – are you sure that you put a link to the javascript file in the “head” section of your site? If not, that is most likely the root of the problem.

        Thanks for commenting!

        ~Libby

    • Libby Fisher says:

      Hi Lee,

      I’d be happy to take a look at it for you if you want to send me a link to the page you’re working on either here in the comments or to my email address libby@thelibzter.com.

      Thanks!

  10. Lindsey says:

    Thanks for the wonderful post! Unfortunately, like a few other folks, I am having problems getting it to work and can’t figure out why. I think I have followed the instructions carefully. I did not add the “disable” part of the code because I don’t want to force customers to use a code, just give those that have one the option to use it.

    The button all show up, but the check code button doesn’t do anything, and when I try to check out with a code PayPal still shows the full price. The page I’m work on is here: http://www.waterloowools.com/club.htm

    If you can see what I’ve missed, please let me know! I will go back through everything step by step again later after I’ve had more coffee just in case I missed something obvious. :-) Thanks!

    • Libby Fisher says:

      Hi Lindsey,

      I dont see a place for people to enter a coupon code on your site – am I missing it or did you remove it? Once I can see the discount code box, I can try and diagnose the issue for you :)

      Thanks!

  11. ben says:

    Hi Libby, thanks for sharing this code – very useful!

    I understand all of it (pretty much anyway), but the js function “CalculateOrder” seems to be missing from any of the provided code. Is it actually missing or is that something the paypal machine deals with?

    Thanks again,
    Ben

  12. Pisto says:

    Thank you very much for this amazing tutorial. It works absolutely PERFECT! ;)

  13. Lee Ness says:

    Hi Libby I sent you an email with a problem, did you get it?

  14. Jane says:

    Can I use this code to offer a certain dollar amount of, in addition to percent off codes? Such, one code is for 10% off, but another code is for $10 off?

    Also, how can I have the coupon applied to the total cart, rather than a single item? Thanks so much.

'