stripe/react-stripe-js

[BUG]: CardNumberElement onChange did not trigger when copy and paste

andypho opened this issue · 1 comments

andypho commented

What happened?

When using <CardNumberElement />, onChange did not trigger on the second copy and paste if the two cards brand are the same.

Steps to reproduce

  1. Copy and paste test card 1 (Amex) 378282246310005 into <CardNumberElement />, onChange triggered
  2. Then Copy and paste another test card 2 (Amex) 371449635398431 into <CardNumberElement />, onChange did not triggered

What is expected?

onChange should Trigger even the card brand has not been changed, It should behave the same if I copy and paste another test card (Visa) 4242424242424242 in the second step.

Version

Tested on
"@stripe/react-stripe-js": "^2.5.1"
"@stripe/react-stripe-js": "^2.1.1"

Environment

Chrome 122.0.6261.57, Debian 12

Reproduction

No response

awalker-stripe commented

Hi @andypho, apologies for the very delayed response.

I did some digging into this issue, and this is actually the intended behavior! Our Elements events in general only fire when outward-facing state in the event payload changes (in this case, values like complete or empty).

For example, suppose you type 378282246310005, delete the input, and then paste 371449635398431. You'd get a total of 3 change events: the first with complete: true, then a second with complete: false, and a third with complete: true again. This approach ensures that we fire the minimal number of events necessary such that the latest change event always contains the most up-to-date external-facing state of the CardNumber Element.

Please let me know if this resolves it – feel free to reopen and/or reply if I missed any details!