React Interactive PayCard

A beautiful, interactive payment card component for React applications.

Features

• 🎨 Beautiful, realistic card design
• 🔄 Interactive animations and transitions
• 💳 Support for major card types (Visa, Mastercard, Amex, etc.)
• 🌍 Multi-language support (English, Portuguese, Turkish)
• 📱 Responsive design
• 🔒 Card number masking/unmasking
• ✅ Built-in validation
• 🎭 Customizable backgrounds
• 📦 TypeScript support
• 🚀 Zero dependencies (except React)

Installation

pnpm add @muhammedaksam/interactive-card
# or
npm install @muhammedaksam/interactive-card
# or
yarn add @muhammedaksam/interactive-card

Important: Don't forget to import the CSS styles for the component to work properly!

Usage

Basic Usage

import React from 'react';
import { InteractivePayCard } from '@muhammedaksam/interactive-card';
import '@muhammedaksam/interactive-card/dist/style.css';

function App() {
  const handleSubmit = (cardData) => {
    console.log('Card data:', cardData);
  };

  return (
    <InteractivePayCard
      onSubmit={handleSubmit}
      locale="en"
    />
  );
}

Advanced Usage

import React from 'react';
import { InteractivePayCard } from '@muhammedaksam/interactive-card';
import '@muhammedaksam/interactive-card/dist/style.css';

function App() {
  const handleSubmit = (cardData) => {
    // Handle form submission
    console.log('Card data:', cardData);
  };

  return (
    <InteractivePayCard
      onSubmit={handleSubmit}
      locale="en"
      randomBackgrounds={false}
      backgroundImage="https://your-custom-background.jpg"
      initialData={{
        cardName: 'John Doe',
        cardNumber: '4111 1111 1111 1111'
      }}
      className="my-custom-class"
    />
  );
}

Using Individual Components

import React, { useState } from 'react';
import { PayCard } from '@muhammedaksam/interactive-card';
import '@muhammedaksam/interactive-card/dist/style.css';

function CustomForm() {
  const [cardData, setCardData] = useState({
    cardName: '',
    cardNumber: '',
    cardMonth: '',
    cardYear: '',
    cardCvv: ''
  });

  const fields = {
    cardNumber: 'card-number',
    cardName: 'card-name',
    cardMonth: 'card-month',
    cardYear: 'card-year',
    cardCvv: 'card-cvv'
  };

  return (
    <PayCard
      labels={cardData}
      fields={fields}
      isCardNumberMasked={false}
      locale="en"
    />
  );
}

Props

InteractivePayCard Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSubmit | (data: CardFormData) => void | - | Callback function when form is submitted | | initialData | Partial<CardFormData> | {} | Initial form data | | locale | 'en' \| 'pt' \| 'tr' | 'en' | Language for labels and messages | | randomBackgrounds | boolean | true | Enable random background images | | backgroundImage | string | - | Custom background image URL | | className | string | '' | Additional CSS class |

PayCard Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | labels | CardFormData | - | Card data to display | | fields | object | - | Field ID mapping | | isCardNumberMasked | boolean | - | Whether to mask card number | | randomBackgrounds | boolean | true | Enable random backgrounds | | backgroundImage | string | - | Custom background image | | focusedField | string \| null | - | Currently focused field | | isCardFlipped | boolean | false | Whether card is flipped to show CVV | | locale | 'en' \| 'pt' \| 'tr' | 'en' | Display language |

Types

interface CardFormData {
  cardName: string;
  cardNumber: string;
  cardMonth: string;
  cardYear: string;
  cardCvv: string;
}

Supported Card Types

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

Development

Setup

# Clone the repository
git clone https://github.com/muhammedaksam/interactive-card.git
cd interactive-card

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Start Storybook for component development
pnpm run storybook

# Build for production
pnpm run build

# Build library
pnpm run build:lib

Building

The library can be built in two modes:

• Development: pnpm run build - Creates a demo application
• Library: pnpm run build:lib - Creates the npm package
• Storybook: pnpm run storybook - Starts Storybook for component development and testing

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Muhammed Mustafa AKŞAM

Credits

Inspired by the original Vue.js component by muhammed.