Disable SqPaymentForm input fields after checkout has started

Questions
#1

Hi Everyone,

I was wondering, in SqPaymentForm, is there a way to disable the input fields for cardNumber, cvv, expirationDate and postalCode after the checkout process / payment has started and is currently in progress? In my integration, I have the problem that the fields above can still be edited by the user while the payment is in progress.

I believe, all of these are iframes once mounted, correct? Simply disabling the original

I provide in the html as no effect.

Am I missing something?

Thanks,
Frank

#2

Hi @fbormann, welcome to the forums!

No, I don’t believe there’s a way to directly access those iframes to disable them. What are you trying to actually prevent, though?

#3

Hi @sjosey,

Thanks for your reply.

I just feel that the information displayed on the page should at all times reflect a transaction while it is still in progress in the background. I am therefore disabling all of my own input elements in the form until receiving the final result of the transaction. Not being able to do this with the SqPaymentForm elements makes the user experience inconsistent. They can’t edit my own elements but they can still edit the Square elements. Plus whatever is on the screen once the final transaction result comes back may no longer reflect the data used for the transaction.

I’ve also had the transaction status field on my page auto-clear the last transaction result (if failed) as soon as the user starts to make modifications to any data entered on the page. This currently actually even clears the “In progress” message while the transaction is still going on as soon as the user starts editing any of the SqPaymentForm fields. I would now have to refine that implementation to defer any effect of SqPaymentForm input field data changes on the status message until after the ongoing transaction result comes back. Plus, facing a decision on how long I want to display the result of the previous (failed) transaction, given that the previous design paradigm was to display it until the user starts to edit the data in form, however, now the data may already been edited by the time the result comes back.

Overall, I feel that the user experience is just much more confusing this way.

May I kindly ask to make this a feature request? I’ve made integrations with two other (competing) credit card payment services before and they both offer this functionality.

Thanks,
Frank