How to disable stripe form field when payment process is running?

Question

I am implementing stripe payment feature in my angular project. I am succeed with stripe form customization.

My Actual problem is start here. When User enter Card Detail and press PAY button. loader is spin inside pay button. But Still user can change card number and other details.

I want to disable all form field when stripe payment process is executing. I did try a lot for search solution but failed to get single solution.

Is there Any way To disable form field when payment process is executing ?

Answer 1

In your form submit handler, or the click handler of the submit button, it's common to disable both the submit button and the card element so that users don't change the card details.

You can disable the Stripe Element using the update method on the element [1] and passing disabled: true.

card.update({ disabled: true });

Here is a JS Fiddle to demonstrate: https://jsfiddle.net/utdz6pkr/1/

[1] https://stripe.com/docs/js/element/other_methods/update?type=card#element_update-options-disabled