We're having some issues with IE 11 and Safari users on our checkout page. We're selling ticket packs of 3 different types. The checkout form (besides credit card info, contact info) has ticket packs quantity fields like:
qtyA1 qtyA2 qtyA3 qtyA4 qtyB1 qtyB2 qtyB3 qtyC1 qtyC2 where user can specify one or more ticket pack he/she wants to order. User can enter a number of ticket packs with a keyboard or by clicking + and - buttons. Each of these fields are defined in HTML like
<div class="input-group"> <div class="input-group-addon input-group-addon-button" data-controls="qtyA1" data-add="-1">-</div> <input type="text" min="0" max="9" maxlength="1" class="qty form-control input-group-button-input" autocomplete="false" name="qtyA1" id="qtyA1" data-ticket-type="A" data-price="10.00" data-ticket-qty="2" value=""> <div class="input-group-addon input-group-addon-button" data-controls="qtyA1" data-add="1">+</div> (there are 9 fields like that, so I won't be pasting them all here).
The checkout is working fine for the last 2 years. But sometimes, in average once per 5k orders, user submits a form with all ticket packs options and then claims it's not what he/she intended to order. Our server receives a POST request with such a data:
qtyA1=1 qtyA2=1 qtyA3=1 qtyA4=1 qtyB1=1 qtyB2=1 qtyB3=1 qtyC1=1 qtyC2=1 Each ticket pack has a different ticket quantity and price. Ticket pack with higher price has more tickets in it. So it's more preferable to order 1 x qtyA2 than 2 x qtyA1. By ordering higher ticket pack, you can get more tickets for the same price or same amount of tickets for less amount. So it's pointless to order all options at once.
We have an autofill detection script, that is based on a field background change, but it seams like it's working only in Chrome, Firefox and probably in most but not all Safari browsers.
I'm not aware of any autofill features in IE (besides autocomplete).
Some of our findings on that issue:
- only customers using IE 11 or Safari browser have that issue
- 80% are 55+ years old and 60% are 65+
- 60% are returning customers and 2/3 of them had placed orders with same QTY issue
- 80% are paying with VISA
- almost every customer placed order with single submission, that is there were no errors with their credit cards in most cases.
- 11.8% of customers are using IE 9-11
- 31.7% are using Safari
- chances it happen to IE user are 0.038%
- chances it happen to Safari user are 0.014%
My thoughts on what might be causing the problem:
- autofill is not detected on IE and (probably) Safari.
- people might have some plugins installed with their browsers (some spying search toolbars that interact with a form when there is a credit card to be entered) - not likely, but you never know.
- elderly people are having difficulties with understanding ticket packages idea as only 20% of customers claim about their orders.
- as for elderly people they managed to place order pretty fast (3-5 minutes). Maybe they are using some Form data management tool/browser plugins? But I guess elderly people do not install things like that intentionally.
- JavaScript is disabled in customers' browser and it's preventing autofill detection.
The test checkout is available here
The question is: What is causing the form fields to be filled with ones on certain browsers and how to prevent it?
1 Answers
Answers 1
This looks like a pretty nice bug to catch. If you find it, I'm pretty confident you can find some workarounds.
What I do in these situations is:
1) grab a month of BrowserStack subscription and start testing the hell out of it to reproduce the issue
I'm pretty sure you may have already checked but here are some other things I do:
a) Look once again for some flaw in the calculation algorightm, like unexpected output for unexpected input.
b) Make sure my calculations are not triggered by an unexpected event in js
c) I'm not reading field values too early:
For example when the user does the selection, try not to run you calculation directly and update the suggestions on the fly, but add a window timeout to do the calculation only after all field inputs are set:
window.setTimeout(function() { handlevalues(); updateSuggestions();}, 500);
I've seen this last case so often, as some browsers are providing invalid values on the spot due to their caching mechanisms and what not.
0 comments:
Post a Comment