iranian debit cards React component
npm install iranian-debit-cards-react---
React component for detecting Iranian debit cards
- About
- Getting Started
- Usage
React component to get debit card data from users or show them their saved cards from database with full TypeScript support.
``
npm i iranian-debit-cards-react
A debit-card component to get card data
`
import { DebitCard } from "iranian-debit-cards-react";
import "iranian-debit-cards-react/dist/styles.css"; // import styles if you don't have tailwindcss installed
const [cardNumber, setCardNumber] = useState()
userName={"your user's name"} //optional
/>
`
To show a saved card as a review-only component that has disabled input:
`
userName={"your user's name"} //optional
/>
Or show a saved card that is editable:
`
const [cardNumber, setCardNumber] = useState()
changeHandler={(value) => setCardNumber(value)}
userName={"your user's name"} //optional
/>
`
DebitCardSlider example:
`
import { DebitCardSlider } from "iranian-debit-cards-react";
import "iranian-debit-cards-react/dist/styles.css"; // import styles if you don't have tailwindcss installed
const [cardNumber, setCardNumber] = useState() // check the validity of this card number and then save it as a card
const [activeCard, setActiveCard] = useState() // makes sure the selected card is one of the valid user's cards
useEffect(() => {
const cardExists = userCards.filter((card) => card == cardNumber)[0]
if (cardExists) {
setActiveCard(cardNumber)
} else {
setActiveCard(undefined)
}
}, [cardNumber])
CardHandler={(value) => setCardNumber(value)}
userName={"your user's name"} //optional
/>
``