1.4.1 • Published 3 years ago
atm-card-react v1.4.1
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
Component usage: MIT Licensed Copyright (c) 2020 Asset Sultanov