react-card-input

React component wrapper to add credit card validation to onChange events.

Quick Start

npm install react-card-input --save

const RedInput = props => <input {...props} style={{color: 'red'}} />

const SimpleCardInput = CardInput('input');
const RedCardInput = CardInput(RedInput);

const Form = React.createClass({
  render() {
    return (
      <div>
        <SimpleCardInput onChange={event => console.log(event.card)} />
        <RedCardInput onChange={event => console.log(event.card)} />
      </div>
    )
  }
}

The validation is done using card-validator. The following is merged into the event object:

{
  card: {
    niceType: 'American Express',
    type: 'american-express',
    pattern: '^3([47]\\d*)?$',
    isAmex: true,
    gaps: [4, 10],
    lengths: [15],
    code: {name: 'CID', size: 4}
  },
  isPotentiallyValid: true, // if false, indicates there is no way the card could be valid
  isValid: true // if true, number is valid for submission
}