0.1.2 • Published 2 years ago
react-native-compact-cc v0.1.2
React Native Compact Credit Card
React Native Compact Credit Card provides a form and utilities for credit card data inputs. It's designed as a React Native component ready to use in a iOS or Android project. Its features include:
- Credit-Card identification, formatting and validation while typing
- Setup for accepted credit cards
- Credit-Card date validation
- Credit-Card holder name validation
- Credit-Card CVC validation
- Fully keyboard-navigable form
- Configured to accept customizable styles to suit your App
Installation
npm install react-native-compact-ccor
yarn add react-native-compact-ccUsage
import { CompactCcView } from 'react-native-compact-cc';
// ...
<CompactCcView
onChange={handleCardChange}
acceptedCards={['visa', 'mastercard', 'discover', 'american-express']} />const handleCardChange = (form) => {
console.log(form);
};
/* Console output:
{
name: "Jon Snow",
number: "4242 4242 4242 4242",
type: "visa",
expiry: "05/29",
cvc: "123",
isValidForm: true,
}
*/Props
| Property | Type | Description |
|---|---|---|
| onChange | PropTypes.func | Receives a CardForm object every time the form changes |
| form | PropTypes.objectOf(CardForm) | You can set the default values of the Credit-Card form, such as the cardholder's name or any other field |
| acceptedCards | PropTypes.arrayOf(CardType) | Credit card list that will be accepted only. Available values: ['american-express', 'diners-club', 'mastercard', 'cirrus', 'maestro', 'discover', 'jcb', 'visa', 'unionpay'] |
| invalidAcceptedCardText | PropTypes.string | Text to be displayed when typing a credit card that is not accepted. Defaults to: "You can only enter one of the accepted card types." |
| placeholders | PropTypes.objectOf(CardFields) | Defaults to: { name: 'Name on card', number: '•••• •••• •••• ••••', expiry: 'MM/YY', cvc: 'CVC' } |
| placeholderColor | PropTypes.string | Color that will be applied for text input placeholder |
| validColor | PropTypes.string | Color that will be applied for valid text input |
| invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: "red" |
| inputStyle | Text.propTypes.style | Style for Credit-Card form's textInput |
| showTitles | PropTypes.boolean | Indicates whether or not to display the titles over the input text fields |
| titles | PropTypes.objectOf(CardTitles) | Titles for the input text fields. Defaults to: { name: "Cardholder's Name", number: 'Card Number' } |
Example
You can see this component in action from this Test App available on App Store or Google Play. You can do a fake test checkout from there.
Or, in the example directory, run:
npm install
react-native run-ios
# or
react-native run-androidContributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT