Add Terms and Conditions Checkbox to PayPal button

There are times when you will want your clients to read and accept terms and conditions before making a payment in PayPal. The great thing about the following approach is that it will work for just about any website, whether the site is simply written in HTML or uses a CMS like WordPress, Joomla or Drupal.

Here is how to add a checkbox to your PayPal button.

STEP 1 -- Add the following Javascript code on your page:

<script type="text/javascript">// <![CDATA[
function confSubmit() {
  if(!document.getElementById("accept").checked) {
    alert("Please read and accept the Terms and Conditions in order to continue.");
    return false;
  }
} // ]]></script>

STEP 2 -- Replace the following piece of code in the PayPal form created by the PayPal button generator:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">

…with…

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="return confSubmit();">

STEP 3 -- Insert the following code just before the line that starts with <input type="image" name="submit" …:

Option 3A -- Terms and Conditions on the Same page:

<p><input id="accept" type="checkbox"> I have read and agree to the Terms &amp; Conditions</p>

Option 3B -- Terms and Conditions on a Different page:

If the Terms and Conditions are on a separate page, turn the text into a link. For example:

<p><input id="accept" type="checkbox"><a href="terms-and-conditions/" target="_blank">I have read and agree to the Terms &amp; Conditions</a></p>

That's it. As a result of these changes, a new check box will appear right above the PayPal button. If the customer clicks the button without checking the box, the button will not work and a message will be displayed.

Note: Should the JavaScript be disabled, the checkbox will have no effect and the client will be able to proceed with the transaction regardless of whether the checkbox is checked or not.


Comments

Add Terms and Conditions Checkbox to PayPal button — 26 Comments

  1. Hello,

    I am trying to add the “terms and conditions” function to my site in which they have to accept before they make a paypal payment.

    I have no idea in regards to coding, i just know how to enter the HTML onto my website and so far have the check box for terms nad conditions and the paypal button but i want to know if there is anyway in entering my actual terms and conditions into the html coding or there has to be a link to a seperate page.

    Please advise, thank you.

    Anastasia

      • Hi Yaseen, though a little late, I just posted a reply to Anastasia’s question. Hope you find it useful.

    • You have several options:

      Solution 1: The easiest is to create a separate page with the terms and conditions and then have the link take you there in a new tab or window.
      Advantage: This centralizes the terms and conditions on your site. If you need to up date them, you need just make changes in one place.
      Disadvantage: Some people might not realize that they are in a new window and not know how to get back.

      Solution 2: You could simply include the terms and conditions text right in the page and remove the link from the text next to the checkbox. This is pretty easy to do as well. Another related solution is to use something called a “lightbox”. This would display the terms and conditions content in a popup box instead of taking up space on your page. This solution requires some coding in order to implement. You sometimes see these on websites where you click on an image and a larger version opens up but there is no reason it needs to be an image. Text can work well in these boxes too.
      Advantage: This solution is especially useful if you only need to do this on one or two pages on your site and have a very short blurb describing the terms and conditions. Visitors to your site will be able to see the text without leaving the page.
      Disadvantage: When you decide you need to update the terms and conditions in the future, you will need to find every page on your website where they exist and update them all. Having the terms and conditions right in your web page can also make your web page look cluttered.

      One way around this last problem is to use a tag substitution system, also known as global content blocks. It goes by different names depending on the software that runs your website. For example, in WordPress they are called ShortCodes. On a WordPress site, you would start by installing a plugin like https://wordpress.org/plugins/reusable-text-blocks/ . Then you would create a new tag and enter your Terms and Conditions statement. Upon saving it, the plugin will give you a shortcode tag that will will look something like this: [text-blocks id=”1″]”. Then you need just copy and paste this into any page on your website where you would like the Terms and Conditions to appear. When people view the page, they will see the text associated with the shortcode instead of the tag itself. That way, if you ever need to update your terms and conditions, you will just need to go back to the reusable text block and edit the text. The content will be automatically updated throughout your website.

      Hope you find something in all of this useful.

      Best regards,

      Michael

  2. Genius, thanks.

    I’m having a problem with this solution when using two separate payment buttons on the same page.

    Both correctly display the checkbox and “Please agree to the T&Cs”.

    The button on the left works fine.

    The button on the RIGHT requires the checkbox fof the LEFT button to be checked, before proceeding to Paypal.

    Any idea how I might fix this?

    Thanks a lot,
    Jesse

    • I am having this same issue, did you ever a solution? I have 4 buttons and the left most check box works but the 3 to the right do not. Thanks for any advice you may have.

  3. Thank you, it has worked well. However, I noticed on an ipad that customers are not forced to check the box before purchasing. They have to check the checkbox on a desktop to be able to pruchase.

  4. This worked great with one button, but when I try to use it for three paypal buttons on the same page, none of the buttons work. Do you have a workaround for this? Much appreciate the help!!

    • Hi Jason,

      Thanks for the great question. Unfortunately the code was written to only work with one checkbox per page. It would have to be re-written to support multiple “Accept” checkboxes.

      That said, I think it would still work if you put one checkbox in its own <form> for the whole page. The code only checks the checkbox and couldn’t care less where it is located. Something like (Step 3a version):

      <form>
      <p><input id="accept" type="checkbox"> I have read and agree to the Terms & Conditions</p>
      </form>
      

      Just remember to remove the line from each of your PayPal buttons and, of course, only include the JavaScript from Step 1 once for the whole page.

      Hope that helps!

      Best regards,

      Michael

  5. Hi Michael,

    Thanks for the reply. That didn’t seem to resolve the issue. Any other thoughts? Again, much appreciate the help!

    Jason

  6. Hi Michael,

    that’s exactly the code I was looking for, thank you so much! One problem, though, it seems to work only with Chrome. With IE and Firefox it doesn’t work. Do you have any idea why that is? I wonder if I’m the only one, who’s experiencing that kind of problem.

    Thank you for your efforts!

    Best wishes,

    Stephanie

    • Hi Michael,
      it works! I don’t know why, but I’m happy it does! 🙂 Maybe it was the cache.
      Thanks again,

      Stephanie

  7. I’ve tried to add the Terms and Condition checkbox and the paypal button for the this website. The customers will need to check the box before proceeding to checkout, but it’s allowing me to proceed without checking the box. I can’t figure out where my code is wrong. Can you help, please?

    • Hi Rachel,

      There are many potential reasons why this might be happening and I could guess for a very long time at what the solution might be. Contact me if you would like to hire me to fix this up for you.

      Best regards,

      Michael

  8. What an elegant solution! Thank you so much.

    I’m having one issue. It works great except when I use it with pricing options. When options are embedded in a table form, it can’t tell that I’ve checked the box. example: http://www.alignedfitness.today/packages.html, the build your own month packages towards the bottom. Can you help with this? I’m not well versed in javascript and don’t know how to fix this.

    • Hi Georgia,

      That would require some customization. Contact me through the Let me through the “Contact me” link above if you would like to hire me to fix it up for you.

      Best regards,

      Michael

  9. Hi, i’m certain I have included your code correctly on one page and the checkbox is there but i’m having the same problem as Rachel- rachel on July 8, 2015 at 5:12 pm.

    What will you charge to help me fix this problem please?

Leave a Reply

Your email address will not be published. Required fields are marked *