Avatar of GenesisTech
GenesisTech asked on

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

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?
ASP

Avatar of undefined
Last Comment
GenesisTech

8/22/2022 - Mon
Zac Harris

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 Fell

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.
ASKER
GenesisTech

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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
GenesisTech

Scott,

Thank you for the thorough answer.

Your example is not using JavaScript. Do you have sample code for that?
SOLUTION
Zac Harris

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
GenesisTech

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 Harris

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
GenesisTech

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?
ASKER
GenesisTech

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 Harris

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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
GenesisTech

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 Harris

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";
  }
}
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
GenesisTech

Thanks to both of you. These are great answers with great information. I appreciate all of your help!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.