React Credit Card Input

A credit/debit card input field for React

Example

Click here for an interactive demo

Install

$ npm install --save react-credit-card-input

Usage

import CreditCardInput from 'react-credit-card-input';

<CreditCardInput 
  cardNumberInputProps={{ value: cardNumber, onChange: this.handleCardNumberChange }}
  cardExpiryInputProps={{ value: expiry, onChange: this.handleCardExpiryChange }}
  cardCVCInputProps={{ value: cvc, onChange: this.handleCardCVCChange }}
/>

Available props

 

Prop	Type	Default value	Description
cardNumberInputProps	object (optional)	{}	Card number input element props (e.g. { value: cardNumber, onChange: this.handleCardNumberChange, onBlur: this.handleCardNumberBlur })
cardExpiryInputProps	object (optional)	{}	Card expiry date input element props (e.g. { value: expiry, onChange: this.handleCardExpiryChange, onBlur: this.handleCardExpiryBlur })
cardCVCInputProps	object (optional)	{}	Card CVC input element props (e.g. { value: cvc, onChange: this.handleCardCVCChange, onBlur: this.handleCardCVCBlur })

License

MIT © jxom