ATM CARD - React component

| Card usage samples | Card usage samples |
| - | - | | | | | |

Demo

Install

# Install package from NPM
% npm install atm-card-react

# or

# Install package from NPM
% yarn add atm-card-react

Usage

// Functional component example
import React, { useState } from 'react';
import { ATMCard } from 'atm-card-react';

function App() {
    const [number, setNumber] = useState<string>('');
    const [month, setMonth] = useState<number>(2);
    const [year, setYear] = useState<number>(22);
    const [holder, setHolder] = useState<string>('');
    const [cvv, setCvv] = useState<string>('');

    return (
        <>
            <ATMCard
              year={year}
              month={month}
              cvv={cvv}
              number={number}
              holderName={holder}
              bankLogo={
                <h1 style={{ 
                  fontFamily: 'Arial', 
                  fontSize: 30 * scale, 
                  color: 'white' 
                }}>Cool Bank Logo</h1>
              }
              lifted
              system={system}
              scale={scale}
              onChange={(data) => {
                setNumber(data.number);
                setCvv(data.cvv);
                setMonth(data.month);
                setYear(data.year);
                setHolder(data.holder);
              }}/>
        </>
    );
}
export default App;

Props

| Prop | Type | Value | Description | | --- | --- | --- | --- | | number | string | 1234123412341234 | ATM Card number (PAN) (16 digits) | | month | number | 1 |ATM Card expired month (2 digits)| | year | number | 22 | ATM Card expired year (2 digits)| | holderName | string | John Doe |ATM Card holder name | | cvv | string | 000 | ATM Card cvv/cvv2 code (3 digits)| | bankLogo | ReactNode | | ATM Card bank issuer data | | system | string | ENUM | mastercard, visa, maestro, americanexpress, jcb, dinnersclub, mir | ATM Card payment system | | hideDigits | boolean | true/false | Hide ATM Card number | | onChange | function | | return { cvv, holder, month, number, year } | | fontFamily | string | | Set custom Font (as default used CREDITCARD font, see below about usage license) | | numberFontSize | number | | Set ATM Card number (PAN) custom font size | | scale | number | 0 - 1 | Set ATM Card scale | | dark | boolean | true/false | Dark mode (applied only for back side magnet) | | dataColor | string | hex, rgb(-a) | Data text color | | bgColor | string | hex, rgb(-a) | Background color | | bgImage | string | base64/url | Background image | | lifted | boolean | true/false | Elevate ATM Card |

License

• CREDITCARD Font: free for personal usage
• CREDITCARD Font: Commercial License

Component usage: MIT Licensed Copyright (c) 2020 Asset Sultanov