Displaying Card Errors with React Stripe Elements

CreditCardElement.js

import React, { Component } from 'react';
import { CardElement } from 'react-stripe-elements';
import isEmpty from 'lodash/isEmpty';

class CreditCardInput extends Component {
  constructor() {
    super()
    this.state = { error: undefined }
  }

  onCardChange = (e) => {
    this.setState({ error: e.error })
  }

  render() {
    return (
      <label>
        Card info
        <CardElement onChange={this.onCardChange} />
        {!isEmpty(this.state.error) &&
          <span id="card-errors" role="alert">{this.state.error.message}</span>}
      </label>
    )
  }
}

export default CreditCardInput