@fanatics-ui/react-credit-card-input NPM

React Credit Card Component

A React component draft for credit/debit card input before making it open source

Example

npm.io

Install

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

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 }}
  fieldClassName="input"
/>

Available props

Input renderer props

Error handling

<CreditCardInput
  onError={({ inputName, err }) => console.log(`credit card input error: ${err}`)}
  cardCVCInputProps={{
    onBlur: e => console.log('cvc blur', e),
    onChange: e => console.log('cvc change', e),
    onError: err => console.log(`cvc error: ${err}`)
  }}
  cardExpiryInputProps={{
    onBlur: e => console.log('expiry blur', e),
    onChange: e => console.log('expiry change', e),
    onError: err => console.log(`expiry error: ${err}`)
  }}
  cardNumberInputProps={{
    onBlur: e => console.log('number blur', e),
    onChange: e => console.log('number change', e),
    onError: err => console.log(`number error: ${err}`)
  }}
/>
/>

Custom input renderer usage

<CreditCardInput
  cardCVCInputRenderer={({ handleCardCVCChange, props }) => (
    <input
      {...props}
      onChange={handleCardCVCChange(e => console.log('cvc change', e))}
    />
  )}
  cardExpiryInputRenderer={({ handleCardExpiryChange, props }) => (
    <input
      {...props}
      onChange={handleCardExpiryChange(e =>
        console.log('expiry change', e)
      )}
    />
  )}
  cardNumberInputRenderer={({ handleCardNumberChange, props }) => (
    <input
      {...props}
      onChange={handleCardNumberChange(e =>
        console.log('number change', e)
      )}
    />
  )}
/>

Custom text labels usage

<CreditCardInput
  customTextLabels={{
    invalidCardNumber: 'El número de la tarjeta es inválido',
    expiryError: {
      invalidExpiryDate: 'La fecha de expiración es inválida',
      monthOutOfRange: 'El mes de expiración debe estar entre 01 y 12',
      yearOutOfRange: 'El año de expiración no puede estar en el pasado',
      dateOutOfRange: 'La fecha de expiración no puede estar en el pasado'
    },
    invalidCvc: 'El código de seguridad es inválido',
    invalidZipCode: 'El código postal es inválido',
    cardNumberPlaceholder: 'Número de tarjeta',
    expiryPlaceholder: 'MM/AA',
    cvcPlaceholder: 'COD',
    zipPlaceholder: 'C.P.'
  }}
/>

Contributing

Contributing to react-credit-card-input is easy! With four simple steps:

Create a branch

Fork the repository
git clone <your-repo-url> to clone your GitHub repo to your local one
git pull origin master to pull the latest code
npm install to install the project's dependencies
git checkout -b the-name-of-my-branch to create a branch (use something short and comprehensible, such as: fix-card-number-issue).
git remote add upstream https://github.com/medipass/react-credit-card-input.git and git pull upstream master to update your fork from this source.

Make the change

Note: You can run npm run storybook, and then navigate to http://localhost:9001/ to interactively develop your changes. If you are developing a new feature, make sure to add a story for it!

Test the change

Run npm run fix from the project root (This will run Prettier and ESLint and automatically fix any issues).

Push the change!

git add -A && git commit -m "My message (#issue-number/pr-number)" (replacing My message (#issue-number/pr-number) with a commit message, such as Fixed card number issue (#43)) to stage and commit your changes
git push my-fork-name the-name-of-my-branch