React-native-credit-card-form NPM

React Native Credit Card Form

Easy (and good looking) credit-card form for your React Native Project 💳 💳

Features

Skeuomorphic credit-card 💳 (credits to: react-native-credit-card)
Credit-card input validations while you're typing
Credit-card input formatting
Works on both Android and iOS

Usage

npm i -s react-native-credit-card-form

then add these lines in your react-native codebase

import CreditCardForm from 'react-native-credit-card-form';

<CreditCardForm onChange={this._onChange} />

API

Property	Type	Description
autoFocus	PropTypes.bool	Automatically focus Card Number field on render
onChange	PropTypes.func	Will receive a `formData` object every time the form changes
labels	PropTypes.object	Defaults to `{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" }`
placeholders	PropTypes.object	Defaults to `{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" }`
cardViewSize	PropTypes.object	Size of the credit-card view.Defaults to `{ width: 300, height: 180 }` (managed by react-native-credit-card)
imageFront	PropTypes.number	Image for the credit-card view `e.g. require("./card.png")`
imageBack	PropTypes.number	Image for the credit-card view `e.g. require("./card.png")`
labelStyle	Text.propTypes.style	Style for credit-card form's labels
inputStyle	Text.propTypes.style	Style for credit-card form's textInput
inputContainerStyle	View.propTypes.style	Style for textInput's container Defaults to: `{ borderBottomWidth: 1, borderBottomColor: "black" }`
validColor	PropTypes.string	Color that will be applied for valid text input
invalidColor	PropTypes.string	Color that will be applied for invalid text input
placeholderColor	PropTypes.string	Color that will be applied for text input placeholder

onChange

will receives a formData object every keypress. e.g.

{
  valid: true, // will be true once all field's statuses are "valid"
  focused: "number", // will be one of "number", "expiry", and "cvc"
  values: { // will be in the sanitized and formatted form
  	number: "4242 4242",
  	expiry: "06/19",
  	cvc: "300",
  	type: "visa", // will be one of null, "visa", "master-card", "american-express", "diners-club", "discover", "jcb", "unionpay", "maestro"
  },
  status: {  // will be one of "incomplete", "invalid", and "valid"
	number: "incomplete",
	expiry: "incomplete"
	cvc: "incomplete"
  },
};

Example

In the example directory, do:

npm install
react-native run-ios
# or
react-native run-android

Missing something?

Submit a pull request :D

TODO

Add eslint
Add some unit tests for the formatter/validator logic
Add props to resize credit-card view
Accept initialValues
Support Name and postal code field
Handles orientation changes

License

MIT

react-native credit-card credit-card form skeuomorphic credit-card form flip card component react-component react-native-component

card-validator react-native-credit-card

@infinitebrahmanuniverse/nolb-react-native-cr @everything-registry/sub-chunk-2575 @zalastax/nolb-react-native-cr

0.1.1

8 years ago

0.1.0

8 years ago