accept terms and conditions paypal

Add Terms and Conditions Checkbox to PayPal button (JavaScript, HTML)

I was recently tasked to setup PayPal buttons for a small company called Woolly Mammoth, they send monthly craft packs out to children; because the packs are sent to minors, parents first needed to read and accept the ‘Warnings’ (T&C’s) this is required by law. They already had a website so all I needed to do was setup this functionality. Check out the demo of this working here:

live-demo-orange-button

Setting up normal PayPal buttons are fairly simple, however it got a bit tricky when they wanted parents to be able to accept the terms before purchasing. Originally I thought I would just hide the div’s that contained the PayPal buttons until a checkbox was checked/T&C Accepted.

This worked however it didn’t look to great and the client wanted the buttons to be there; just un-clickable until the checkbox was checked, to save confusion I thought it best to show an error message when a visitor tried clicking the PayPal button rather than just not doing anything. For this I used JavaScript, if you need the same sort of code I have explained what I done below and at the bottom you can see a demo:

HTML

It’s easier to start with the HTML, first we need to make the check boxes, I needed two checkboxes but you can use as many or as few as you like, I’ll explain how to add more or remove one at the end:

As you can see each checkbox needs to have a unique ‘ID’ , to keep it simple I named them ‘one’ and ‘two’ but they can be called anything as long as they match up with the JavaScript below:

JavaScript

As you can see I have included my div id’s into the JavaScript, if you have not named yours ‘one’ and ‘two’ simply rename them to the id’s you have used. You can also see my error message content, this can be changed to whatever you like.

PayPal Buttons

Now all that is left to do is call our JavaScript function from within our paypal button, our function name is confSubmit, so this needs to be added to the PayPal button as an ‘onSubmit’ reference, the beginning of your PayPal button should look like this:

Original PayPal button

Simply add an onSubmit function like below:

And that’s it, all of this combined will require BOTH checkboxes to be checked, if only one is checked it will show the error message (written in the JavaScript code) the same as if neither were checked, but if both are checked it will allow you to continue making the payment.

Adding or removing checkboxes

If you want to add more checkboxes simply add another box with a unique id and copy the JavaScript code again including the unique ID, like below:

If however you want to remove a checkbox you guessed it, simply delete one of the JavaScript sections and the checkbox, like below:

This method can be used on anything, buttons, forms and anything else that submits.

You can see a demo of this working here: DEMO