React Credit Card Number Formatter
Adapter component that helps in building a payment card Form
- Formats credit card numbers to readable format #### #### #### #### and back
- Validates card numbers with luhn check
- Blocks invalid input for MM, YY and CVV fields
- Agnostic about styling
Installation
npm install react-cc-number-formatter
Example
import React from "react"import { CreditCardNumberFormatter } from "react-cc-number-formatter" class Example extends React.Component { state = { creditCard: { number: "", mm: "", yy: "", cvv: "" } } render() { return ( <CreditCardNumberFormatter /* Credit card with valid fields and number without spaces, along with Credit Card Information */ onCreditCardChange={(creditCard, creditCardInfo) => { this.setState( { creditCard }, () => { if (creditCardInfo.complete && creditCardInfo.luhn) { alert("All fields filled and luhn check passed") } } ) }} creditCard={this.state.creditCard} > {(creditCard, emitChange) => ( <div> <input value={ creditCard.number /* This card number is formatted with spaces */ } onChange={e => { /* Blocks invalid input */ emitChange({ ...creditCard, number: e.target.value }) }} /> <input value={creditCard.cvv} onChange={e => { emitChange({ ...creditCard, cvv: e.target.value }) }} /> <input value={creditCard.mm} onChange={e => { emitChange({ ...creditCard, mm: e.target.value }) }} /> <input value={creditCard.yy} onChange={e => { emitChange({ ...creditCard, yy: e.target.value }) }} /> </div> )} </CreditCardNumberFormatter> ) }}
API
Props
onCreditCardChange: (creditCard: CreditCard, creditCardInfo: CreditCardInfo) => voidcreditCard: CreditCardchildren: ( creditCard: CreditCard, emitChange: (creditCard: CreditCard) => void, creditCardInfo: CreditCardInfo) => JSX.Element
CreditCard
interface CreditCard { number: string mm: string yy: string cvv: string}
CreditCardInfo
interface CreditCardInfo { brand?: BrandType complete: boolean yyComplete: boolean cvvComplete: boolean numberComplete: boolean mmComplete: boolean luhn: boolean}
BrandType
type BrandType = 'visa' | 'amex' | 'mastercard'