@anvilco/react-credit-card-input
Version:
A credit/debit card input field for React
180 lines (147 loc) • 8.75 kB
Markdown
# React Credit Card Input
> A credit/debit card input field for React
> **NOTE:** While React Credit Card Input is still supported, it's highly recommended to check out the [React Payment Inputs](https://github.com/medipass/react-payment-inputs) (the rewritten version of this library).
## Example
[Click here for an interactive demo](https://medipass.github.io/react-credit-card-input)
## Install
```
$ npm install --save react-credit-card-input styled-components
```
## Usage
```js
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
| Prop | Type | Default value | Description |
| ----------------------- | ------------------------------------------ | -- | ------------------------------------------ |
| cardNumberInputProps | object (optional) | {} | Card number input element props |
| | | | (e.g. `{ value: cardNumber, onChange: this.handleCardNumberChange, onBlur: this.handleCardNumberBlur, onError: this.handleCardNumberError }` ) |
| cardExpiryInputProps | object (optional) | {} | Card expiry date input element props |
| | | | (e.g. `{ value: expiry, onChange: this.handleCardExpiryChange, onBlur: this.handleCardExpiryBlur, onError: this.handleCardExpiryError }`) |
| cardCVCInputProps | object (optional) | {} | Card CVC input element props |
| | | | (e.g. `{ value: cvc, onChange: this.handleCardCVCChange, onBlur: this.handleCardCVCBlur, onError: this.handleCardCVCError }`) |
| cardNumberInputRenderer | Function (view input renderer props below) | | Card number input renderer |
| cardExpiryInputRenderer | Function (view input renderer props below) | | Card expiry date input renderer |
| cardCVCInputRenderer | Function (view input renderer props below) | | Card CVC input renderer |
| onError | Function (optional) | | Invokes on field errors. Recieves errorMessage argument. |
| | | | |
| cardImageClassName | string (optional) | '' | Class name for the card type image |
| cardImageStyle | object (optional) | {} | Style for the card type image |
| containerClassName | string (optional) | '' | Class name for the field container |
| containerStyle | object (optional) | {} | Style for the field container |
| dangerTextClassName | string (optional) | '' | Class name for the danger text |
| dangerTextStyle | object (optional) | {} | Style for the danger text container |
| fieldClassName | string (optional) | '' | Class name for the field |
| fieldStyle | object (optional) | {} | Style for the field |
| inputClassName | string (optional) | '' | Class name for the inputs |
| inputStyle | object (optional) | {} | Style for the inputs |
| invalidClassName | string (optional) | 'is-invalid' | Class name for the invalid field |
| invalidStyle | object (optional) | {} | Style for the invalid field |
| | | | |
| inputComponent | string, function, class (optional) | 'input' | Input component for the card number, expiry and CVC input |
| | | | |
| customTextLabels | object (optional) | {} | Object that defines custom label values. |
### Input renderer props
| Prop | Type | Description |
| ---------------------- | -------- | -------------------------- |
| handleCardNumberChange | Function | Handle card number change. |
| handleCardNumberBlur | Function | Handle card number blur. |
| handleCardExpiryChange | Function | Handle card expiry change. |
| handleCardExpiryBlur | Function | Handle card expiry blur. |
| handleCardCVCChange | Function | Handle card CVC change. |
| handleCardCVCBlur | Function | Handle card CVC blur. |
| props | Object | Input component props |
#### Error handling
```jsx
<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
```jsx
<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
```jsx
<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
1. Fork the repository
1. `git clone <your-repo-url>` to clone your GitHub repo to your local one
1. `git pull origin master` to pull the latest code
1. `npm install` to install the project's dependencies
1. `git checkout -b the-name-of-my-branch` to create a branch (use something short and comprehensible, such as: `fix-card-number-issue`).
1. `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
1. Run `npm run fix` from the project root (This will run Prettier and ESLint and automatically fix any issues).
### Push the change!
1. `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
1. `git push my-fork-name the-name-of-my-branch`
## License
MIT © [Medipass Solutions](https://medipass.com.au)