React-stripe-elements: Accessing Error state of <CardElement>

[sonarforte]

The <CardElement> component obviously has some internal method of determining error state, as it will highlight red certain values that are invalid.

How can I access this state, (maybe through the StripeProvider) so that I can disable the form submission if the values are invalid?

[fred-stripe]

Hi @sonarforte, you'll want to pass an onChange={changeFunction} property to the CardElement. Stripe Elements will send an event for each update to the elements' fields contents, and each event contains an error field that specifies the current error state. More on this in the Stripe.js reference:

https://stripe.com/docs/stripe.js#element-on

You will want to assume that any elements are initially invalid, because they will not have any information entered in them, and then use your onChange callback to update your parent component's state accordingly.

[sonarforte]

Thanks, I'll probably dispatch an action with the onChange function that will include the error payload (I'm using redux).

[jenan-stripe]

👍

[morenoh149]

@fred-stripe can you expand on this with a snippet?
I am trying to do

import { func } from 'prop-types'                                                  
import { Button, Form, FormGroup, Label } from 'reactstrap'                        
import { connect } from 'react-redux'                                              
import { Field, reduxForm } from 'redux-form'                                      
import {                                                                                        
  CardExpiryElement,                                                                
} from 'react-stripe-elements'                                 
const handleChange = change => {                                                   
  console.log('[change]', change);                                   
};                                                                                 
const ConfirmationPaymentForm = ({ handleSubmit }) => (   
  <form                                                                            
    onSubmit={handleSubmit}                                                        
    className="confirmation__payment-form"                                         
  >                                                                                                                                  
    <FormGroup>                                                                    
      <Label>Expiration</Label>                                                    
      <CardExpiryElement                                                           
        onChange={handleChange}                                        
        className="form-control"                                                   
      />                                                                                                                         
    <Button type="submit">Submit</Button>                                          
  </form>                                                                          
)

but the input stops accepting new input and the entire form is no longer usable. I see from the docs that the default value for onChange is a function that is void (has no return value) I believe I'm following that signature.