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?

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.

GenesisTech

ASKER

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?

GenesisTech

ASKER

Scott,

Thank you for the thorough answer.

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

SOLUTION

Zac Harris

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GenesisTech

ASKER

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.

GenesisTech

ASKER

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?

GenesisTech

ASKER

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.

GenesisTech

ASKER

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

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GenesisTech

ASKER

Thanks to both of you. These are great answers with great information. I appreciate all of your help!