React Credit Card Input

A credit/debit card input field for React app.

Installation:

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

Usage:

import React from 'react'
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 }}
  fieldClassName="input"
/>

Default props.

{
  cardExpiryInputProps: {},
  cardNumberInputProps: {},
  cardCVCInputProps: {},
  cardImageClassName: '',
  cardImageStyle: {},
  containerClassName: '',
  containerStyle: {},
  dangerTextClassName: '',
  dangerTextStyle: {},
  fieldClassName: '',
  fieldStyle: {},
  inputComponent: 'input',
  inputClassName: '',
  inputStyle: {},
  invalidClassName: 'is-invalid',
  invalidStyle: {}
};

Preview:

Download Details:

Author: medipass

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/medipass/react-credit-card-input

License: MIT