A React component for verifying the potential validity of a credit card number

by React

Credit Card Validation

A React component for verifying the potential validity of a credit card number using the Luhn algorithm.

Features

  • Calculates potential validity of credit card number
  • Indicates card issuer corresponding to issuer identification number (IIN)
  • Provides colored message indicating validity

Supported card issuers

  • Visa
  • Mastercard
  • Discover
  • American Express

Setup

$ git clone https://github.com/riosdcs/react-cc-validation.git
$ cd react-cc-validation
$ npm install
$ npm start

View the app at http://localhost:3000.

Known issues

State update lag

The state's maxLength property changes based on the issuer: 15 for American Express, 16 otherwise. However, if the user replaces text by selecting text and pasting, it may not trigger updates in time due to state updating asynchronously. See here.

Credit card number formatting

Credit card numbers should follow their respective spacing as seen on their actual cards.

Form validation

Currently, <input type="text"> and so allows non-integer input. Additionally, there should be visual indication that the user has not entered a complete credit card number (only after first focus event) and if the user attempts to exceed maxLength.

GitHub