React-native-credit-card-input NPM

React Native Credit Card Input - Finally updated in 2024!

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

Code:

<CreditCardInput />
// or
<LiteCreditCardInput />

Features

Skeuomorphic credit-card 💳
Lite version for smaller screens (or if skeuomorphic is not really your thing)
Credit-card input validations & formatting while you're typing
Form is fully navigatable using keypad
Works on both Android, iOS and Web!

Usage

yarn add react-native-credit-card-input

then add these lines in your react-native codebase

import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";

<CreditCardInput />
// or
<LiteCreditCardInput />

// Note: You'll need to enable LayoutAnimation on android to see LiteCreditCardInput's animations
// UIManager.setLayoutAnimationEnabledExperimental(true);

And then on your onChange handler:

_onChange => form => console.log(form);

// will print:
{
  valid: true, // will be true once all fields are "valid" (time to enable the submit button)
  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",
  },
};

Components

LiteCreditCardInput

Prop	Type	Description
`autoFocus`	`boolean`	Optional. Specifies if the input should auto-focus.
`style`	`ViewStyle`	Optional. Custom style for the component's container.
`inputStyle`	`TextStyle`	Optional. Custom style for the input fields.
`placeholderColor`	`string`	Optional. Color for the placeholder text.
`placeholders`	`{ number: string; expiry: string; cvc: string; }`	Optional. Custom placeholders for the input fields.
`onChange`	`(formData: CreditCardFormData) => void`	Required. Callback function called when form data changes.
`onFocusField`	`(field: CreditCardFormField) => void`	Optional. Callback function called when a field gains focus.

CreditCardInput

Prop	Type	Description
`autoFocus`	`boolean`	Optional. Specifies if the input should auto-focus.
`style`	`ViewStyle`	Optional. Custom style for the component's container.
`labelStyle`	`TextStyle`	Optional. Custom style for the labels.
`inputStyle`	`TextStyle`	Optional. Custom style for the input fields.
`placeholderColor`	`string`	Optional. Color for the placeholder text.
`labels`	`{ number: string; expiry: string; cvc: string; }`	Optional. Custom labels for the input fields.
`placeholders`	`{ number: string; expiry: string; cvc: string; }`	Optional. Custom placeholders for the input fields.
`onChange`	`(formData: CreditCardFormData) => void`	Required. Callback function called when form data changes.
`onFocusField`	`(field: CreditCardFormField) => void`	Optional. Callback function called when a field gains focus.

CardView

Prop	Type	Description
`focusedField`	`'name' \\| 'number' \\| 'expiry' \\| 'cvc'`	Optional. Specifies which field is currently focused.
`type`	`CreditCardIssuer`	Optional. Specifies the type of the credit card issuer.
`name`	`string`	Optional. The name on the credit card.
`number`	`string`	Optional. The credit card number.
`expiry`	`string`	Optional. The expiry date of the credit card.
`cvc`	`string`	Optional. The CVC code of the credit card.
`placeholders`	`{ number: string; expiry: string; cvc: string; name: string; }`	Optional. Custom placeholders for the input fields.
`style`	`ViewStyle`	Optional. Custom style for the component's container.
`fontFamily`	`string`	Optional. Custom font family for the text.
`imageFront`	`ImageSourcePropType`	Optional. Image source for the front of the credit card.
`imageBack`	`ImageSourcePropType`	Optional. Image source for the back of the credit card.

Example

Expo Snack

Or run it locally

yarn install

yarn example ios
# or
yarn example android
# or
yarn example web

Should I used this in my project?

Yes, if you need a quick credit card input component for your project or proof of concept.
Yes, if the current UI/component fit your use case
Otherwise, you're probably better off using your favorite form library and implementing the validation with the card-validator package!