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.

Requirements

Requires a hooks-compatible version of React(>= v16.8).

Installation

``text
npm install react-creditcard-validator --save

# or, if u prefer Yarn, you can run:

yarn add react-creditcard-validator

`

Usage

`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 (



);
}
`

> 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);
}

``

Limitations

Currently only offers formatting and images for MasterCard, Verve & Visa cards.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Silva Chijioke Michael 💻

JoshX 📖 💻

This project follows the all-contributors specification. Contributions of any kind welcome!