We help IT Professionals succeed at work.

Double Click processes credit card 2X on webpage (ASP, JavaScript)

GenesisTech
GenesisTech asked
on
57 Views
Last Modified: 2016-02-09
Has anybody ever seen this and do you have any ideas for a fix.

When you click "Pay for Order" on my website, I have JavaScript that pops an Alert saying to not click twice and to wait for processing to complete. I have situations in which people are getting charged twice within 1 second of each transaction.

#1) This only happens about 1 time out of 3,500 orders (maybe twice)
#2) I am thinking it could have something to do with the user double clicking and the JavaScript not functioning correctly.

Any ideas?
Comment
Watch Question

Zac HarrisSystems Administrator

Commented:
You should add a onclick disable action to the button. That way it can't be clicked again until the page is reloaded.

onClick="this.disabled=true; this.value='Sending…';"

Open in new window

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
This is common.  

There are a few things you can do to prevent this.

On the client side, use javascript or jquery to disable the button once it is clicked.  <button type="submit" disabled>Submit</button>

http://jsbin.com/nuvirohene/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>$(function(){
  $('#pay_button').on('click',function() {
      $(this).prop("disabled",true);
  });  
});
</script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>question 28924940</title>
 
</head>
<body>
  <button id="pay_button" type="submit" >Submit</button>
</body>
</html>

Open in new window


I would also suggest using ajax to submit the form as well and show some type of animated icon and just remove the button while processing.  Then based on the outcome of the credit card authorization show your message.

Lastly, on the server side, you can detect for things like card number, amount, session (or sales order number if you have that) and time.  Then prior to each call to your gateway, store the card number (remember you can't store the entire card number, just the last 3 or 4 numbers), session id, amount and timestamp.  If there are identical amounts for the same card number (last 4 digits) and session id within a given time frame (perhaps 30 seconds), then do not proceed to calling the api for the gateway.

I would start with simply disabling the button and perhaps ajax as that will be the easiest route.

Author

Commented:
Zac,

My onClick even calls a JavaScript Function, so I am not sure your example would work. Can you provide sample code that would be written into the function?

Author

Commented:
Scott,

Thank you for the thorough answer.

Your example is not using JavaScript. Do you have sample code for that?
Zac HarrisSystems Administrator
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Zac,

Awesome. Thanks for the example. Makes perfect sense.

I do have a question however. How is a double click getting processed twice?

I mean, wouldn't they see 2 Alerts? I was thinking that this is being caused by having some sort of hardware or OS or browser that is not actually processing the JavaScript. If that were the case, wouldn't the "disabled" setting get ignored as well?
Zac HarrisSystems Administrator

Commented:
That is entirely possible. Some browsers will ignore some coding like Chrome and IE8. I would suggest that you change the button text to something along the lines of "Processing..." when the button is clicked. If the browser is blocking javascripts, then yes, the script would be ignored.

The hard part is getting users of the site to understand that if they refresh the page, click the back button etc... the transaction could be processed again and they would be charged twice. Sometimes you can only put a warning above the button not to click twice or refresh etc.

Author

Commented:
Zac,

I think that changing the button is a good idea. But, wouldn't this be done with JavaScript as well. Aren't we essentially going round and round and not solving anything if the problem is JavaScript not running?

Author

Commented:
Also,

Since the button is an Image (that says "Pay Now") what syntax would I use in my JavaScript function to change the button to a different image?
Zac HarrisSystems Administrator

Commented:
No, you don't have to use the script to change the button. In the first example I gave you (my first answer) the onclick changes the button value as well.

Author

Commented:
Yes, but that will only work if the image is a background button with text in it. My button is a full image, text included in the image.
Zac HarrisSystems Administrator

Commented:
Well, you could use this function to change the button image..

var newsrc = "processing.jpg";

function changeImage() {
  if ( newsrc == "processing.jpg" ) {
    document.images["pic"].src = "/images/program/js/forms/processing.jpg";
    document.images["pic"].alt = "Transaction is Processing please DO NOT click again.";
    newsrc  = "submit.jpg";
  }
  else {
    document.images["pic"].src = "/images/program/js/forms/submit.jpg";
    document.images["pic"].alt = "Submit your transaction";
    newsrc  = "processing.jpg";
  }
}
Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks to both of you. These are great answers with great information. I appreciate all of your help!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.