How To Avoid Multiple Clicks of Your Order Submit Button

If your web site includes an online store, there’s a good chance that on more than one occasion, you’ve found that a customer has accidentally submitted one order more than once, causing multiple charges to their credit card, and possibly affecting the contents of the order as represented in your system.  This harms you in many ways:

• If you can’t catch the extra charge(s) in time to void it before the batch actually processes, you will have to issue a refund and incur additional fees on both the original duplicate transaction, and the refund.
• Your customer’s trust in you will drop – especially if they see multiple charges before you can void or refund them.
• Your reporting may lose accuracy if the customer’s order looks doubled (or tripled) in your system as a result of the order being processed twice.  Or you may incur labor to go in and clean up the data.

We can tackle in a different article the potential causes for this occurring, but today, I’m going to talk about some simple things to implement to minimize these situations.

Simple Solutions
The simplest, most common, and probably least effective is the message on the screen instructing the customer not to hit the Submit Order button twice.  Sometimes this is in the form of a pop-up message, sometimes it is just text right next to the button itself.  It’s the most common because it is so simple and inexpensive to implement.  Just add the html text next to the button, or create a short JavaScript function to show an alert() box when the form is submitted.

However, our experience with Usability Studies has shown us some things in observing consumers attempting to purchase items online.  One is that very few people read or notice these instructions.  Another is that in the case of pop-ups, some people think the pop-up is actually an error with their order.  Third, a large percentage of people have no worries that clicking the Submit Order button will charge their card a second time.

A Better Solution
Much better is to completely disable the Submit Order button after it is clicked.  If your button is an html button (with <input type=’submit’> you can simply add code to disable it when clicked:

<input id="btnSubmit" type="submit" onclick="this.disabled = true">

Or of course you could also disable the button in your form validation function.

Graphical Submit Buttons
Hopefully though, you’re not using an html button and instead are using an image for your button that is helping your conversion.  In this case, it can get a little tricky.  Here is how we generally do it.

1. First, create two versions of the button.  Your normal version is the “enabled” version of the button.  Modify that in a way that implies that it is disabled (we typically just lighten it significantly) and save that with a different file name as the “disabled” version.  Let’s say your enabled version is called “submit-order.gif” and your disabled version is called “submit-order-off.gif”.
2.  Be sure to give your button an id:<pre><input type=”image” src=”images/submit-order.gif” id=”subbutton” /></pre>
3. You should be calling a validation script when the form is submitted via “onSubmit” in your <form> tag.  In that script, we do the following:

var submittedAlready=false;
function checkCreditCard(order) {
   if (submittedAlready)  {
      return false;
   }
   else  {
[regular form verification checks]
       submittedAlready=true;
       document.getElementById("subbutton").src='images/submit-order-off.gif';
   return true;
      }
}

This won’t prevent all instances of someone trying to submit their order more than once.  But if this is a problem, this method will surely reduce the occurrences significantly.