React-stripe-elements: Allow disabling fields.

[rstone770]

There should be a way to disable a stripe field so that it no longer receives input, focus, or triggers submission events. I understand that currently the way that's recommended to avoid multiple submissions is to disable the submit button but this doesn't solve any of the other issues or even the submission issue as you can submit a form by hitting the return key.

The solution i currently have is to wrap the Element and capture focus events and immediately blur if disabled which keeps it from submitting and focusing. I then have to add ARIA attributes to fix ax issues all this nonsense causes. It would be much nicer to have a disabled attribute on Elements that takes care of all this for us and behaves more like a native control. I know that this is elements is more or less a wrapper for stripe.js, so work would also be required on that end, but from my understanding, they wouldn't be breaking.

[atty-stripe]

Hi @rstone770! You bring up a fair point, and we're going to investigate supporting this a bit more in Stripe.js. The suggested workaround for now is indeed to wrap or overlay the inputs with a layer that disables interaction.

Since this repo is for bugs in react-stripe-elements, I'll close this issue for now. I'll definitely post here with any updates from our end.

[oodavid]

The suggested workaround for now is indeed to wrap or overlay the inputs with a layer that disables interaction.

Not great since you can always tab into the iframe, regardless of some overlay

[jacobmeltzer-stripe]

Hi @oodavid!

Thanks for following up on this! We've just released a disabled attribute to the Card, CardNumber, IBAN, and iDEAL Elements - check out the documentation here!

You can enable the disabled state by passing disabled: true as an option, and remove the disabled state by passing disabled: false. You can pass options on create with elements.create() or update it later using element.update(). We also have a :disabled pseudo-class within each style variant.

[chrispaynter]

If like me you live in the world of Typescript and have found yourself here, the @types/stripe-v3 package hasn't been updated.

I got around this by patching the react elements with the below.

// @types/stripe-v3 is missing the new disabled attribute
type PatchedElementProps = ReactStripeElements.ElementProps & { disabled?: boolean };
const PatchedCardExpiryElement = (props: PatchedElementProps) => <CardExpiryElement {...props} />;
const PatchedCardNumberElement = (props: PatchedElementProps) => <CardNumberElement {...props} />;
const PatchedCardCVCElement = (props: PatchedElementProps) => <CardCVCElement {...props} />;

[VitamintK]

You can enable the disabled state by passing disabled: true as an option, and remove the disabled state by passing disabled: false

Important to note that you have to pass disabled: false as the prop to undo a disabled state. I was accidentally passing disabled: undefined as a prop after the previous value of disabled was true, and was wondering why it was still disabled.