Double-click in SqPaymentForm created a duplicate charge

[dougvan]

We have experienced some duplicate charges being processed through the Square API.  I discovered the two charges were recorded at virtually the same time.  I narrowed it down to a glitchy mouse on one of our work computers that sometimes sends a double-click even though the button was only hit once.

The "Pay with card" button in SqPaymentForm is handling a double-click as two seperate single clicks.  And it initiated two seperate events to retrieve a nonce which made two submissions to my target webpage that actually invokes the Transaction/Charge Endpoint.  Thus two charges were made from the single SqPaymentForm.

My first fix was replacing the dang mouse.  My second "hack" was to disable the "Pay with card" button after the first click.  Although I needed to re-enable the button if the RetrieveNonce routine returned an error.  Not the prettiest patch, but it does prevent a duplicate charge on a double-click!

This is something the clever Square API guys ought to address...  (I mean that in a good way!)

[tristansokol · Accepted solution]

There actually is functionality to address this, the idempotency key.

How are you creating your idempotency key? 

[dougvan]

That's an even better solution!

I currently create the idempotency key in my target webpage that calls the Transaction/Charge Endpoint.  But if I create the idempotency key in the page where I embed SqPaymentForm and pass it as a POST parameter, then the possible duplicate charge should not take place since they both will have the same idempotency key.

Now, what happens when two charges are submitted with the same idempotency key, but a different nonce?  Is one of them (I assume the latter) discarded?

It is a good solution, and probably worthy of being mentioned in the documentation for SqPaymentForm.

[tristansokol]

You'll get an error about submitting a request that is different with the same idempotency key.