react-native-card-data-input v0.5.0

react-native-card-data-input

just another credit card input package

Installation

npm install react-native-card-data-input

Features

• card brand logo
• flip (and shake) animation
• validations
• security code input blocked while a card brand isn't recognized.

Card Data

• number for the card number.
• holder for the name written on card.
• expiry for validity date (MM/YY format).
• cvv for security code.

Usage

import { CardFlip, CardRef } from 'react-native-card-data-input';

// ...
const ref = React.useRef(null);
<CardFlip ref={ref} {...another props} />;

ref.current?.someMethod(); // change 'someMethod' with any of the methods described on section *Props => Ref Props* below

Props

All of them are optional.

• data: an object like Card Data section above (all values are strings).
• background: a color string (e.g. #9a9a9a) or JSX (e.g. <LinearGradient />)
• labels: an object containing securityCode and its string value.
• placeholders: an object containing each property in Card Data section and its string values, except for cvv.
  • value for cvv should be a function that receives a number as parameter, representing the security code length (it can have either 3 or 4 characters), and returns a string.
• onValidStateChanged: a function that receives a isValid boolean parameter and must return nothing.
• readOnly: a boolean or an object containing each property in Card Data section and its boolean values.
  • if its value is a boolean, all fields will use this value.

Ref Props

• flip() to flip the card anytime.
• shake() to ask for attention.
• getCardData() to get data inserted by user.
  • returns an object with:
    • data: an object containing each of the properties described on Card Data section above, with its string values. Or null if there are errors.
    • errors: an array of error codes, described on Error Codes section below. If no errors, an empty array will be returned.
• clear() to clear inputs values:
  • it can receive an object as parameter, containing any of the properties described on Card Data section above, telling which inputs should be cleared (using a true value for the ones you wish to clear, properties with false value should not be cleared).
  • if no parameter is provided, all inputs will be cleared.
  • if a field is marked as read-only, it will not be cleared (no matter what).

Error Codes

When asking for card data using getCardData() and validation doesn't pass, will be returned an array named errors telling you which errors ocurred on validation.

The errors can be these:

• NOT_VALID_CARD_NUMBER
• NOT_VALID_EXPIRATION_DATE
• NOT_VALID_OWNER_NAME
• NOT_VALID_SECURITY_CODE

An object containing these errors can be imported using ErrorsEnum name.

Typescript

• CardRef contains types to use when creating a Ref.
• CardData is an object with each property name described in Card Data section.
• CardError contains all the possible errors as literal strings.
• CardDataResponse is an object containing the types from getUserData() return.