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, 
                  color: 'white' 
                }}>Cool Bank Logo</h1>
              }
              lifted
              system="mastercard"
              onChange={(data: any) => {
                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
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