Checkout Submission Errors security Q & Passsword

[Manchester Web Hosting]

Hello everyone,

Hoping someone can point me in the right direction. Bascially  after reviewing our video heatmaps we have found loads of drop offs on our checkout page due to potential new customers getting frustrted with having to keep inputting the password and security question IF the checkout form has any errors OR hasnt been filled out with all the required details.

IF thats the case then the form refreshes and points out the errors. Now what we noiced is that the customer would the fill out OR correct the errors being pointed too and then submit BUT they dont fill out the password OR security question again as (I ASSUME) they think its already present when in fact its been cleared.

Have seen potential customers going through the checkout form up to 10 times (I know right!) filling out the form and adding in missing OR fields that contain errors. Would be ideal IF they looked at everything and ensured that they filled out everything the first time round. A perfect customer alas thats not the case.

SO trying to figure out how to keep anything inserted in the password and security answer fields at the very least saved AS they are for the personal fields (name + address) in case there is an error and the page spits out which errors those are. At the very least they wont have to add in those details again (as thats whats making them go round and round in circles!!!)

Further, it would be great if that can also be applied to the card number and expiry field NOT the cvv tho for abovious reasons...

I have checked the following files and cannot see where that removal takes place:

js/jquery.payment.js
js/scripts.min.js

Also checked the HTML to see if there is any indicators there but cannot find anything. Pretty sure I am misssing something here i.e where the validation uccors maybe thats where those fileds are getting stripped?

Any pointers to what I am missing OR how to implement that? I was thinking that dding in a class OR additional bootstrap class direct into the HTML field output would help?

[Manchester Web Hosting]

Any takers on this? Could it be encrypted files that cannot be changed? checked whmcs.js and didnt find anything in there either.. possible that @brian! or @bear would be kind enough to shed some light and knowledge on this??

[bear]

Being honest, I'm not that great at coding, especially javascript. I stumble through fixing things for myself. 😉

[Manchester Web Hosting]

2 minutes ago, bear said:

Being honest, I'm not that great at coding, especially javascript. I stumble through fixing things for myself. 😉

no worries, thanks for the input. Havent managed to stumble upon the offending code as yet... searched high and low 😞

[brian!]

15 hours ago, Manchester Web Hosting said:

A perfect customer alas thats not the case.

they're certainly difficult to find.... and if/when you ever find them (or close enough), cherish them! 😍

16 hours ago, Manchester Web Hosting said:

Also checked the HTML to see if there is any indicators there but cannot find anything. Pretty sure I am missing something here i.e where the validation occurs maybe that's where those fields are getting stripped?

yep - i'll work through this for standard_cart, but I think your custom orderform template is so close to it as to make no significant difference...

let's get the easy one out of the way first - looking at the checkout.tpl code, then the security question choice should be remembered on a failed submission - and is for me testing locally.

the security answer is being stripped because the template doesn't include a value for the input field...

<input type="password" name="securityqans" id="inputSecurityQAns" class="field form-control" placeholder="{$LANG.clientareasecurityanswer}">

needs to become...

<input type="password" name="securityqans" id="inputSecurityQAns" class="field form-control" placeholder="{$LANG.clientareasecurityanswer}" value="{$securityqans}">

moving on to passwords, they're being stripped because a conditional statement is preventing this...

<input type="password" name="password" id="inputNewPassword1" data-error-threshold="{$pwStrengthErrorThreshold}" data-warning-threshold="{$pwStrengthWarningThreshold}" class="field" placeholder="{$LANG.clientareapassword}"{if $remote_auth_prelinked} value="{$password}"{/if}>

so you could remove the condition and the checkout will remember the password(s) on a failed submission...

<input type="password" name="password" id="inputNewPassword1" data-error-threshold="{$pwStrengthErrorThreshold}" data-warning-threshold="{$pwStrengthWarningThreshold}" class="field" placeholder="{$LANG.clientareapassword}" value="{$password}">

- remember to update password2 in a similar way.

16 hours ago, Manchester Web Hosting said:

Further, it would be great if that can also be applied to the card number and expiry field NOT the cvv tho for abovious reasons...

similar to above, the input fields have no value fields - I assume for security/privacy reasons...

the cc number...

<input type="tel" name="ccnumber" id="inputCardNumber" class="field form-control cc-number-field" placeholder="{$LANG.orderForm.cardNumber}" autocomplete="cc-number" data-message-unsupported="{lang key='paymentMethodsManage.unsupportedCardType'}" data-message-invalid="{lang key='paymentMethodsManage.cardNumberNotValid'}" data-supported-cards="{$supportedCardTypes}" />

changes to...

<input type="tel" name="ccnumber" id="inputCardNumber" class="field form-control cc-number-field" placeholder="{$LANG.orderForm.cardNumber}" value="{$ccnumber}" autocomplete="cc-number" data-message-unsupported="{lang key='paymentMethodsManage.unsupportedCardType'}" data-message-invalid="{lang key='paymentMethodsManage.cardNumberNotValid'}" data-supported-cards="{$supportedCardTypes}" />

the expiry field...

<input type="tel" name="ccexpirydate" id="inputCardExpiry" class="field form-control" placeholder="MM / YY{if $showccissuestart} ({$LANG.creditcardcardexpires}){/if}" autocomplete="cc-exp">

becomes...

<input type="tel" name="ccexpirydate" id="inputCardExpiry" class="field form-control" placeholder="MM / YY{if $showccissuestart} ({$LANG.creditcardcardexpires}){/if}" value="{$ccexpirymonth} / {$ccexpiryyear}" autocomplete="cc-exp">

if you had to, you should be able to do the same for the start date.

i've quickly tested this in the cart with seemingly no issues - but haven't completed checkout fully... but I see no reason why it wouldn't work... test it on your orderform and let me know if it doesn't.

[Manchester Web Hosting]

2 hours ago, brian! said:

they're certainly difficult to find.... and if/when you ever find them (or close enough), cherish them! 😍

Agreed, yup we have some very loyal customers and providing good timly friendly support goes a long long way hence why they stick with us (once we get them that is!)

2 hours ago, brian! said:

yep - i'll work through this for standard_cart, but I think your custom orderform template is so close to it as to make no significant difference...

let's get the easy one out of the way first - looking at the checkout.tpl code, then the security question choice should be remembered on a failed submission - and is for me testing locally.

Yet again OUTSTANDING! I owe you more than a few cups of your faviorate drink 😉

Those 'tweaks' have worked a treat. Tested and all working as expected and yes although we use a standard cart and template behind the scenes its a bit customised which is why when a new template comes out (are they new 🤔) we hesitate and quite often frown upon the work that needs to be done just to move up a few versions.

2 hours ago, brian! said:

i've quickly tested this in the cart with seemingly no issues - but haven't completed checkout fully... but I see no reason why it wouldn't work... test it on your orderform and let me know if it doesn't.

All working good, now just monitoring and dare I say it spying 🙊 on pages to ensure no issues like what we have been getting. that will hopefully fix the issue with 'dissapearing fields data' for the non tech savvy/non net users who are looking to setup online first time. Dont want to frustrate them during checkout. Gets loads of abandoned carts.

Guess thats a stoy in itself, abandon carts, no way whmcs can track them. We run magento, woocommerce and a few other enterise carts and they can all track abandon carts at some stage but with whmcs... dare i say they would probarbly say: 'whats an abandoned cart?' thankfully we have got some good tools to monitor the checkout pages etc that can at the least give us good indications on whats working and whats not.

Again a big bow down to the master of whmcs edits and support. Hats off to you sir. Hope you have a great/super/fab evening wherever and whatever you may be doing 🙂