1.0.3 • Published 2 years ago
@big-toni/react-native-credit-card-input v1.0.3
@big-toni/react-native-credit-card-input
Features
DEPENDENCIES
- "card-validator": "8.1.1",
- "prop-types": "^15.8.1"
Setup
This library is available on npm, install it with: npm i @big-toni/react-native-credit-card-input or yarn add @big-toni/react-native-credit-card-input.
Demo
Usage
import { CreditCardInput } from '@big-toni/react-native-credit-card-input';
...<CreditCardInput
onChange={handleOnChange}
onError={handleOnError}
inputStyle={styles.cardField}
requiresZip
autoFocus
/>Available props
| Prop | Type | Default | Description |
|---|---|---|---|
autoFocus | PropTypes.bool | false | Automatically focus 'number' field on render |
inputStyle | Text.propTypes.style | null | Style for credit card's TextInput |
invalidColor | PropTypes.string | red | Color that will be applied for text input while in 'invalid' state |
onChange | PropTypes.func | () => null | Receives a formData object every time the values change |
onError | PropTypes.func | () => null | Receives an errors object every time the values change |
onFocus | PropTypes.func | () => null | Receives the name of currently focused field |
placeholderColor | PropTypes.string | gray | Color that will be applied for text input placeholder |
placeholders | PropTypes.string | { number: '1234 5678 1234 5678', expiry: 'MM/YY', cvv: 'CVV', zip: 'ZIP'} | Placeholders object |
requiresZip | PropTypes.bool | false | Shows zip input field |
validateZip | PropTypes.func | (zip = '') => { return zip.match(/^\d{6}$/) ? 'valid' : zip.length > 6 ? 'invalid' : 'incomplete'; } | Function to validate ZIP, expects 'incomplete', 'valid', or 'invalid' as return value |