A fully typed React custom hook for formatting and validating payment card input fields
npm install react-creditcard-validator
A React Custom Hook to provide validation and formatting for payment card input fields. Motivated by React Payment Inputs. This package offers a fully typed alternative, written completely in TypeScript.
Requires a hooks-compatible version of React(>= v16.8).
``text
npm install react-creditcard-validator --save
# or, if u prefer Yarn, you can run:
yarn add react-creditcard-validator
`
`js
import React from 'react';
import { useCreditCardValidator, images } from 'react-creditcard-validator';
export default function PaymentInputs() {
const {
getCardNumberProps,
getExpiryDateProps,
getCVCProps,
getCardImageProps,
meta: { erroredInputs }
} = useCreditCardValidator();
return (
{erroredInputs.expiryDate && erroredInputs.expiryDate}
{erroredInputs.cvc && erroredInputs.cvc}
> By Spreading the prop getter functions on the inputs, You get automatic formatting, focus, and validation.
>
> Note: Pass all custom event handlers (e.g onChange) inside the prop getter function e.g (getCardNumberProps({onChange: (e) => console.log(e.target.value)})), so that the default event handlers are not overwritten
$3
const data = useCreditCardValidator(options);#### options
>
Object({cardNumberValidator, cvcValidator, expiryDateValidator})##### options.cardNumberValidator
>
Function(cardNumber: string) => string | undefined##### options.cvcValidator
>
Function(cvc: string) => string | undefined##### options.expiryDateValidator
>
Function(month: string, year: string) => string | undefined##### Example
`js
function expDateValidate(month: string, year: string) {
if (Number.parseInt(year) > 2035) {
return "Expiry Date Year cannot be greater than 2035";
}
return;
} export default function MyComponent() {
const { ... } = useCreditCardValidator({expiryDateValidator: expDateValidate);
}
``Currently only offers formatting and images for MasterCard, Verve & Visa cards.
Thanks goes to these wonderful people (emoji key):
Silva Chijioke Michael 💻 | JoshX 📖 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!