CardCvcElement onComplete fires after three digits for AMEX card

[appility]

I'm using React Stripe.js on a payment page as below

import {
  useStripe,
  useElements,
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
  ElementsConsumer,
} from "@stripe/react-stripe-js"

and include a card CVC element as below

<CardCvcElement
  id="cvc"
  onChange={this.handleStripeFieldChange}
  onReady={this.handleStripeFieldReady}
  options={STRIPE_ELEMENT_OPTIONS}
/>

works fine and I use the onComplete event to trigger a focus on the next field, however:

My understanding is that many AMEX cards can have a four-digit CVC but when I use AMEX test card numbers from this page: https://stripe.com/docs/testing the onComplete is always firing after three digits

I was hoping that this library could detect an AMEX and not trigger the onComplete in that case or only trigger it after four digits.

I don't have a reference to the actual CC number (Stripe creates creates input elements in iframes for obv security reasons) so I can't add a check in my code...

Do I have any alternative , other than just not having an autofocus onto the next field here, which is confusing for user as the onComplete events for previous fields CCard and CCExpiry work fine?

[asolove-stripe]

Hi @appility: thanks for this report and sorry that this is causing trouble for your desired integration.

As you've discovered, the world of telling if a card is complete or not is a bit complicated. In many cases, we can't tell if a card is really "done" without actually trying to charge it. There are some AmEx cards with 3 digit CVCs and many other odd cases where we just can't know in advance.

As a result, we document the "complete" event by saying it is really more like "well-formed and potentially complete" and that you shouldn't take UI actions other than styling in response to it. We should probably rename it to make that clearer.

[appility]

@asolove-stripe Thanks for the guidance and quick response