react-native-credit-card-input
v1.0.0
Published
React native credit card input component
Downloads
11,173
Readme
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
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!