IHAKCCInput

A React-Native component to take and validate credit card details 💳 💳.

Description

This component acts as a drop-in replacement for credit card form. It takes all the details required for credit card to make payments, validates them and provide you with all the details via a callback function.

Features

• Credit card number validation.
• Detects six different credit-card providers and displays the image.
• Validates the expiry date and security code.
• Provide optional card holder's name field.
• Updates via callback upon entry of valid details.
• Completely configurable design via style props and other style dictionaries.

Build and tested on iOS. Should also work on Android as well.

Supported versions

• Requires React-Native v.0.58.6 or greater.
• Tested on v.0.58.6.
• Should work on lower versions as well.

Installation

Installation can be done via npm or yarn.

npm i ihakccinput --save

yarn add ihakccinput

Dependency

Uses credit-card module for credit card validation.

Usage

import { IHAKCCInput } from 'ihakccinput';

<IHAKCCInput 
    showName 
    style={{ fontSize: 20, color: "black", margin: 5, padding: 2 }} 
	validStyle={{borderColor: "green"}} 
	invalidStyle={{borderColor: "red"}}
	defaultStyle={{borderColor: "gray"}}
	placeholderColor="gray"
	onValid={
		(card, expiry, code, name) => {
			console.log(card, expiry, code, name);
			console.log("Valid number entered");
		}
	}
/>

Props

| Property | Type | Description --- | --- | --- showName | Bool | Show and hide the card holder name field style | style prop | Style prop validStyle | style prop | Configures the look of input fields when input is valid invalidStyle | style prop | Configures the look of input fields when input is invalid defaultStyle | style prop | Configures the look of input field when empty placeholderColor | String | Placehlder color onValid | callback function | Called when information is provided is valid. Passes card, expiry, code and name as arguments.

'onValid' Callback

onValid is called when any one of card, expiry or code field has a valid value. onValid callback provides four arguments namely card, expiry, code and name.

card

• ccCard: Credit card object provided by credit-card module.
• isValid: Bool showing if the number is valid. (Always true).
• length: Max length of number.
• number: Credit card number entered.

expiry

• isValid: Bool showing if the expiry date entered is valid or not.
• month: Month entered.
• year: Year entered.

code

• isValid: Bool showing if the security number is valid. Checks the length of code to validate.
• ccCode: Security code object provided by credit-card module.
• number: Security number entered.

name

• Name entered in the text field.

Example

License

MIT.

Author

Hassan Ahmed Khan [email protected]