A payment card display component and card validator for react native applications.

Installation

npm install --save react-native-payment-card

Usage

<CreditCardInput
autoFocus
requiresName
requiresCVC
labelStyle={}
inputStyle={}
validColor={"black"}
invalidColor={"red"}
placeholderColor={"darkgray"}
onChange={this._onChange}
/>

//Note: The data entered in the card component is availaible in the onChange Method.

Props

Props	Type	Description
autoFocus	PropTypes.bool	Automatically sets focus on input field
onChange	PropTypes.func	Returns a object with keys name,email,cvv,card number and its value that can be used.
placeholderColor	PropTypes.string	Can be used to set color of input fields
validColor	PropTypes.string	Can be used to indicate colour of valid fields
invalidColor	PropTypes.string	Can be used to indicate colour of invalid fields
labelStyle	PropTypes.string	Can be used to style input labels
inputStyle	PropTypes.string	Can be used to style input fields
requiresName	PropTypes.bool	Boolean to display name field
requiresCVC	PropTypes.bool	Boolean to display CVC field
requiresEmail	PropTypes.bool	Boolean to display emailfield
requiresPostalCode	PropTypes.bool	Boolean to display postal code field