Fancy payment card formatter written in TypeScript. Includes a React hook.
While a number of credit card formatters already exist, many force their own styling and other design choices. In contrast, this package is a simple formatter for your HTML inputs, free for you to style and extend as you please.
import FancyCardFormatter from 'fancy-card-formatter';
const formatter = new FancyCardFormatter();
formatter.setValue('1234567890123456');
formatter.getValue(); // 1234 5678 9012 3456
const formatter = new FancyCardFormatter('1234567890123456');
You can use this package with any UI framework of your choice or even with plain old input
s.
import { FC, ChangeEvent } from 'react';
import { Form, Input } from 'antd';
import useFancyCardFormatter from 'fancy-card-formatter/react';
const CardInput: FC = () => {
const [formattedCardNumber, formatCardNumber] = useFancyCardFormatter();
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
formatCardNumber(event.target.value);
};
return (
<Form>
<Input value={formattedCardNumber} onChange={onChange} />
</Form>
);
};
export default CardInput;