https://github.com/abayomi1196/react-creditcard-validator

An NPM Package that provides formatting and validation for credit card information input fields
https://github.com/abayomi1196/react-creditcard-validator

typescript

Last synced: 7 days ago
JSON representation

An NPM Package that provides formatting and validation for credit card information input fields

• Host: GitHub
• URL: https://github.com/abayomi1196/react-creditcard-validator
• Owner: abayomi1196
• Created: 2022-03-10T05:26:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-27T09:37:21.000Z (about 1 month ago)
• Last Synced: 2024-10-14T02:16:31.568Z (26 days ago)
• Topics: typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-creditcard-validator
• Size: 3.77 MB
• Stars: 13
• Watchers: 3
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# React CreditCard Validator

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

A React Custom Hook to provide validation and formatting for payment card input fields. Motivated by [React Payment Inputs](https://github.com/medipass/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 (

    


      

      {erroredInputs.cardNumber && erroredInputs.cardNumber}


      

      {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

### Custom Validation

`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](https://allcontributors.org/docs/en/emoji-key)):

  

    
Silva Chijioke Michael
💻

    
JoshX
📖 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!