React Native Card Input

A beautiful, customizable credit card input component for React Native with real-time validation, formatting, and card type detection.

✨ Features

• 🚀 Real-time Validation - Instant feedback with Luhn algorithm validation
• 🎨 Beautiful UI - Animated card preview with realistic design
• 📱 Cross-platform - Works seamlessly on iOS and Android
• 🔧 Highly Customizable - Extensive theming and styling options
• ♿ Accessibility - Full accessibility support with screen readers
• 🎯 TypeScript - Complete TypeScript support with type definitions
• 🧪 Well Tested - Comprehensive test coverage with Jest
• 📦 Lightweight - Small bundle size with no external dependencies
• 🔒 Secure - No data storage, all validation happens client-side

🏦 Supported Card Types

• ✅ Visa
• ✅ Mastercard
• ✅ American Express
• ✅ Discover
• ✅ JCB
• ✅ Diners Club
• ✅ UnionPay

📦 Installation

npm install react-native-card-input
# or
yarn add react-native-card-input

🚀 Quick Start

import React, { useState } from 'react';
import { View } from 'react-native';
import { CreditCardInput, CreditCardData } from 'react-native-card-input';

const App = () => {
  const [cardData, setCardData] = useState<CreditCardData>({
    number: '',
    expiry: '',
    cvc: '',
    name: '',
    zipCode: '',
  });

  const handleCardChange = (data: CreditCardData) => {
    setCardData(data);
  };

  const handleValidation = (isValid: boolean) => {
    console.log('Card is valid:', isValid);
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <CreditCardInput
        value={cardData}
        onChange={handleCardChange}
        onValid={handleValidation}
      />
    </View>
  );
};

export default App;

🎨 Basic Usage

Simple Implementation

import { CreditCardInput } from 'react-native-card-input';

<CreditCardInput
  value={cardData}
  onChange={setCardData}
  onValid={isValid => console.log('Valid:', isValid)}
/>;

Advanced Configuration

<CreditCardInput
  value={cardData}
  onChange={setCardData}
  onValid={handleValidation}
  showCardPreview={true}
  showCardType={true}
  showZipCode={true}
  showCardholderName={true}
  labels={{
    number: 'Card Number',
    expiry: 'Expiry Date',
    cvc: 'CVC',
    name: 'Cardholder Name',
    zipCode: 'ZIP Code',
  }}
  placeholders={{
    number: '1234 5678 9012 3456',
    expiry: 'MM/YY',
    cvc: '123',
    name: 'John Doe',
    zipCode: '12345',
  }}
  validateOnChange={true}
  validateOnBlur={true}
  theme='light'
  colors={{
    primary: '#007AFF',
    error: '#FF3B30',
    border: '#E0E0E0',
  }}
/>

🧩 Individual Components

You can also use individual components for more control:

import {
  CardNumberInput,
  ExpiryInput,
  CVVInput,
  CardholderInput,
  ZipCodeInput,
  CardPreview,
} from 'react-native-card-input';

// Use individual components
<CardNumberInput
  value={cardNumber}
  onChangeText={setCardNumber}
  onCardTypeChange={setCardType}
  showCardType={true}
/>

<ExpiryInput
  value={expiry}
  onChangeText={setExpiry}
/>

<CVVInput
  value={cvc}
  onChangeText={setCVC}
  cardType={cardType}
/>

<CardPreview
  cardData={cardData}
  cardType={cardType}
  flipped={showBack}
  onFlip={() => setShowBack(!showBack)}
/>

🎣 Hooks

useCardValidation

import { useCardValidation } from 'react-native-card-input';

const { isValid, errors, validate, validateField } =
  useCardValidation(cardData);

useCardFormatting

import { useCardFormatting } from 'react-native-card-input';

const { formatCardNumber, formatExpiry, formatCVC } = useCardFormatting();

useCardType

import { useCardType } from 'react-native-card-input';

const { cardType, cardTypeConfig, detectCardType } = useCardType(cardNumber);

🛠️ Utility Functions

import {
  detectCardType,
  validateCardNumber,
  validateExpiry,
  validateCVC,
  formatCardNumber,
  formatExpiry,
  formatCVC,
} from 'react-native-card-input';

// Card type detection
const cardType = detectCardType('4111111111111111'); // 'visa'

// Validation
const isValidNumber = validateCardNumber('4111111111111111'); // true
const isValidExpiry = validateExpiry('12/25'); // true
const isValidCVC = validateCVC('123', 'visa'); // true

// Formatting
const formattedNumber = formatCardNumber('4111111111111111', 'visa'); // '4111 1111 1111 1111'
const formattedExpiry = formatExpiry('1225'); // '12/25'
const formattedCVC = formatCVC('123'); // '123'

🎨 Customization

Themes

// Light theme (default)
<CreditCardInput theme="light" />

// Dark theme
<CreditCardInput theme="dark" />

// Custom colors
<CreditCardInput
  colors={{
    primary: '#007AFF',
    secondary: '#5856D6',
    background: '#FFFFFF',
    surface: '#F2F2F7',
    text: '#000000',
    textSecondary: '#8E8E93',
    border: '#E0E0E0',
    error: '#FF3B30',
    success: '#34C759',
    warning: '#FF9500',
    info: '#007AFF',
  }}
/>

Custom Validation

<CreditCardInput
  customValidation={{
    number: value => {
      // Custom card number validation
      if (value.startsWith('4')) {
        return 'Visa cards not accepted';
      }
      return undefined; // No error
    },
    expiry: value => {
      // Custom expiry validation
      const [month, year] = value.split('/');
      if (parseInt(month) < 1 || parseInt(month) > 12) {
        return 'Invalid month';
      }
      return undefined;
    },
  }}
/>

Custom Styling

<CreditCardInput
  style={{ backgroundColor: '#F5F5F5' }}
  containerStyle={{ padding: 20 }}
  inputContainerStyle={{ marginBottom: 16 }}
  inputStyle={{ fontSize: 16, color: '#333' }}
  labelStyle={{ fontSize: 14, fontWeight: '600' }}
  errorStyle={{ fontSize: 12, color: '#FF3B30' }}
/>

♿ Accessibility

The component is fully accessible with proper labels, hints, and screen reader support:

<CreditCardInput
  accessibilityLabel='Credit Card Information'
  accessibilityHint='Enter your credit card details for payment'
  testID='CreditCardInput'
/>

🧪 Testing

import { render, fireEvent } from '@testing-library/react-native';
import { CreditCardInput } from 'react-native-card-input';

test('should validate credit card input', () => {
  const mockOnChange = jest.fn();
  const mockOnValid = jest.fn();

  const { getByTestId } = render(
    <CreditCardInput
      value={{ number: '', expiry: '', cvc: '', name: '', zipCode: '' }}
      onChange={mockOnChange}
      onValid={mockOnValid}
      testID='CreditCardInput'
    />
  );

  const cardInput = getByTestId('CreditCardInput-number');
  fireEvent.changeText(cardInput, '4111111111111111');

  expect(mockOnChange).toHaveBeenCalled();
});

📚 API Reference

CreditCardInput Props

| Prop | Type | Default | Description | | -------------------- | ---------------------------------------------------------- | ------------ | -------------------------------------- | | value | CreditCardData | - | Current card data | | onChange | (data: CreditCardData) => void | Required | Callback when card data changes | | onValid | (isValid: boolean, validation: ValidationResult) => void | - | Callback when validation state changes | | showCardPreview | boolean | true | Whether to show the card preview | | showCardType | boolean | true | Whether to show card type indicator | | showZipCode | boolean | true | Whether to show ZIP code field | | showCardholderName | boolean | true | Whether to show cardholder name field | | validateOnChange | boolean | true | Whether to validate on data change | | validateOnBlur | boolean | true | Whether to validate on field blur | | theme | 'light' \| 'dark' \| 'auto' | 'light' | Theme | | colors | Partial<ThemeColors> | - | Custom colors |

CreditCardData

interface CreditCardData {
  number: string; // Card number (formatted)
  expiry: string; // Expiry date (MM/YY format)
  cvc: string; // CVC/CVV code
  name?: string; // Cardholder name (optional)
  zipCode?: string; // ZIP/postal code (optional)
}

ValidationResult

interface ValidationResult {
  isValid: boolean;
  errors: {
    number?: string;
    expiry?: string;
    cvc?: string;
    name?: string;
    zipCode?: string;
  };
}

🛠️ Development Setup

# Clone the repository
git clone https://github.com/vishalvadodariya/react-native-card-input.git
cd react-native-card-input

# Install dependencies
npm install

# Run tests
npm test

# Run linting
npm run lint

# Build the project
npm run build

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📞 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

🙏 Acknowledgments

• Inspired by react-credit-cards
• Built with ❤️ for the React Native community

Made with ❤️ by Vishal Vadodariya