react-native-payment-card-icons

v1.0.3

Published

a month ago

A collection of high-quality, customizable payment card brand icons (Visa, Mastercard, Maestro, Amex, and more) as React Native SVG components — fully compatible with React Native, Expo, and React Native Web for seamless cross-platform use.

Features

🎨 Multiple styles: flat, flatRounded, logo, logoBorder, mono, monoOutline
💳 Comprehensive coverage: Supports 17+ payment providers
📱 Cross-platform: Works with React Native, Expo, and React Native Web
🔧 Fully customizable: Size, color, and styling options
🎯 TypeScript support: Complete type definitions included
📦 Zero dependencies: Only requires react-native-svg

Installation

npm install react-native-payment-card-icons
# or
yarn add react-native-payment-card-icons

Prerequisites

This library requires react-native-svg to be installed and configured in your project:

npm install react-native-svg
# or
yarn add react-native-svg

For React Native 0.60+, run npx pod-install (iOS only) after installation.

Usage

Basic Usage with PaymentIcon Component

The easiest way to use the library is with the PaymentIcon component:

import React from 'react';
import { View } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

export default function App() {
  return (
    <View>
      {/* Basic usage */}
      <PaymentIcon type="visa" />

      {/* With custom styling */}
      <PaymentIcon
        type="mastercard"
        variant="flatRounded"
        width={60}
        height={40}
      />

      {/* Monochrome style with custom color */}
      <PaymentIcon
        type="amex"
        variant="mono"
        width={50}
        height={32}
        fill="#007bff"
      />
    </View>
  );
}

Using Individual Icon Components

You can also import and use individual icon components directly:

import React from 'react';
import { View } from 'react-native';
import {
  VisaFlat,
  MastercardLogo,
  AmexMono
} from 'react-native-payment-card-icons';

export default function App() {
  return (
    <View>
      <VisaFlat width={60} height={40} />
      <MastercardLogo width={60} height={40} />
      <AmexMono width={60} height={40} fill="#333" />
    </View>
  );
}

API Reference

PaymentIcon Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | PaymentIconType | required | The payment card brand | | variant | PaymentIconStyle | 'flat' | The icon style variant | | width | number \| string | 24 | Icon width | | height | number \| string | 24 | Icon height | | fill | string | undefined | Fill color (mainly for mono variants) |

Supported Payment Types

| Type | Description | |------|-------------| | 'visa' | Visa | | 'mastercard' | Mastercard | | 'amex' | American Express | | 'maestro' | Maestro | | 'discover' | Discover | | 'jcb' | JCB | | 'diners' | Diners Club | | 'unionpay' | UnionPay | | 'elo' | Elo | | 'hiper' | Hiper | | 'hipercard' | Hipercard | | 'mir' | Mir | | 'alipay' | Alipay | | 'paypal' | PayPal | | 'generic-card' | Generic Card | | 'security-code' | Security Code (CVV) | | 'security-code-front' | Security Code Front |

Supported Variants

| Variant | Description | Best Use Case | |---------|-------------|---------------| | 'flat' | Flat design with brand colors | Modern UI, cards display | | 'flatRounded' | Flat design with rounded corners | Card forms, modern UI | | 'logo' | Official brand logo | Marketing, branding | | 'logoBorder' | Logo with border | Professional docs, forms | | 'mono' | Monochrome filled | Custom branded UI | | 'monoOutline' | Monochrome outline | Minimalist UI, wireframes |

Examples

Visual Showcase

The library supports multiple variants for each payment method. Above shows Visa cards in all 6 available styles: flat, flatRounded, logo, logoBorder, mono, and monoOutline.

Live Example App

Expo snack example: https://snack.expo.dev/@lekgwaraj/react-native-payment-card-icons

Dynamic Payment Form

This example shows how to create a dynamic payment form that automatically detects the card type as the user types:

import React, { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

// Simple card type detection (you might want a more robust solution)
const detectCardType = (number: string) => {
  if (number.startsWith('4')) return 'visa';
  if (number.startsWith('5') || number.startsWith('2')) return 'mastercard';
  if (number.startsWith('3')) return 'amex';
  return 'generic-card';
};

export default function PaymentForm() {
  const [cardNumber, setCardNumber] = useState('');
  const cardType = detectCardType(cardNumber);

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Card Number"
          value={cardNumber}
          onChangeText={setCardNumber}
          keyboardType="numeric"
        />
        <PaymentIcon
          type={cardType}
          variant="flat"
          width={40}
          height={25}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
  },
  input: {
    flex: 1,
    height: 50,
    fontSize: 16,
  },
});

Card Grid Display

Display all supported payment methods in a clean grid layout:

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

const supportedCards = [
  { type: 'visa', name: 'Visa' },
  { type: 'mastercard', name: 'Mastercard' },
  { type: 'amex', name: 'American Express' },
  { type: 'discover', name: 'Discover' },
  { type: 'paypal', name: 'PayPal' },
];

export default function SupportedPayments() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>We Accept</Text>
      <FlatList
        data={supportedCards}
        numColumns={3}
        renderItem={({ item }) => (
          <View style={styles.cardItem}>
            <PaymentIcon
              type={item.type}
              variant="flatRounded"
              width={60}
              height={38}
            />
            <Text style={styles.cardName}>{item.name}</Text>
          </View>
        )}
        keyExtractor={(item) => item.type}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 15,
  },
  cardItem: {
    flex: 1,
    alignItems: 'center',
    margin: 10,
  },
  cardName: {
    marginTop: 8,
    fontSize: 12,
    textAlign: 'center',
  },
});

Custom Themed Icons

Create custom themes for your payment icons to match your app's design:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { PaymentIcon } from 'react-native-payment-card-icons';

export default function ThemedIcons() {
  return (
    <View style={styles.container}>
      {/* Dark theme */}
      <View style={[styles.section, styles.darkTheme]}>
        <PaymentIcon type="visa" variant="mono" fill="#ffffff" width={50} height={32} />
        <PaymentIcon type="mastercard" variant="mono" fill="#ffffff" width={50} height={32} />
        <PaymentIcon type="amex" variant="mono" fill="#ffffff" width={50} height={32} />
      </View>

      {/* Brand theme */}
      <View style={[styles.section, styles.brandTheme]}>
        <PaymentIcon type="visa" variant="monoOutline" fill="#007bff" width={50} height={32} />
        <PaymentIcon type="mastercard" variant="monoOutline" fill="#007bff" width={50} height={32} />
        <PaymentIcon type="amex" variant="monoOutline" fill="#007bff" width={50} height={32} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  section: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 20,
    marginVertical: 10,
    borderRadius: 8,
  },
  darkTheme: {
    backgroundColor: '#333',
  },
  brandTheme: {
    backgroundColor: '#f8f9fa',
    borderWidth: 1,
    borderColor: '#dee2e6',
  },
});

Platform Support

Expo Support

This library works seamlessly with Expo. Make sure you have react-native-svg installed:

expo install react-native-svg

React Native Web Support

The library is fully compatible with React Native Web. No additional configuration required.

TypeScript Support

The library includes complete TypeScript definitions. All component props and types are exported:

import {
  PaymentIcon,
  PaymentIconType,
  PaymentIconStyle,
  PaymentIconProps
} from 'react-native-payment-card-icons';

// Type-safe usage
const cardType: PaymentIconType = 'visa';
const variant: PaymentIconStyle = 'flatRounded';

Performance

Optimized SVGs: All icons are optimized for minimal bundle size
Tree-shakable: Import only the icons you need
No bitmap images: Crisp at any resolution
Lightweight: Minimal impact on bundle size

Troubleshooting

Common Issues

Icons not showing:

Ensure react-native-svg is properly installed and linked
For React Native 0.60+, run npx pod-install on iOS

TypeScript errors:

Make sure you're using the correct prop types
Update to the latest version of the library

Performance on large lists:

Consider using getItemLayout for FlatList performance
Use appropriate icon sizes to avoid unnecessary rendering

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Development

# Clone the repository
git clone https://github.com/julekgwa/react-native-payment-card-icons.git

# Install dependencies
yarn install

# Run tests
yarn test

# Run the example app
yarn example ios
# or
yarn example android

License

Acknowledgments

Icons based on CC Icons by Aaron Fagan
Built with create-react-native-library