brianc-elements-cvc | Stripe Developers | Page 1

pine lagoon Sep 24, 2021, 11:49 PM

#

do you have a simple jsfiddle or equivalent to reproduce the issue?

tepid stag Sep 24, 2021, 11:56 PM

#

Typically stripe.confirmCardPayment or stripe.createPaymentMethod would throw an error when pointed to a Stripe Card Element with a missing CVC, and you would catch and handle the error at that point.

#

Let me test and see if I can conditionally style prior to that based on the CVC...

#

Okay, so you can listen for change events on the Card Element. The event you get there has a complete property that will only be true once a CVC is provided. You can key off that in your code.

#

Example:

cardElement.on('change', event => {
    console.log('cardElement change event:', event);
    
    if (!event.complete) {
        cardElementContainer.classList.add('incomplete');
    }
    else {
        cardElementContainer.classList.remove('incomplete');
    }
});

pine lagoon Sep 25, 2021, 12:20 AM

#

@mortal marten are you seeing otherwise?

mortal marten Sep 25, 2021, 12:23 AM

#

Working on Rubeus implementation now and testing. This approach is preferable to the cofirmCardPayment approach as we want to catch it prior to making any api calls. I'll test in a few minutes and let you know. thanks!

tepid stag Sep 25, 2021, 12:23 AM

#

Oh, there's also the StripeElement--complete class that gets added to the Card Element's container. You can also write CSS for that if you want.

#

You could technically check for that class with JavaScript, but I would recommend listening for the change events instead.

mortal marten Sep 25, 2021, 12:24 AM

#

Good one. Yes, I'll use that instead (complete)

#

👍 complete class working. Elegant solution. Thanks!

#

Just curious, are there also events for validation of card number, exp dates, etc.? I agree it would be better to listen for change events even though checking for classes is working. Docs on that? Thanks again,

#brianc-elements-cvc