React-easy-credit-card NPM

React Easy Credit Card

This is a npm package to ease out the complexities in credit card submission forms inside reactjs applications.

The package can be easily installed, and used directly by passing the custom props.

Installation

Run the following command to install this package.

 npm install react-easy-credit-card

To import the library.

 import CreditCard from "react-easy-credit-card";

The library could be used as follows inside a react component

## Write your own function like this when you want to do some processing with the submitted data
const myHandlerFunction = (submittedCardObject) => {

  console.log(submittedCardObject)
  # prints {cardnumber: 'xxxx xxxx xxxx xxx', expiry: 'mm/yy', cvc: 'xxx', cardname: 'XXXXXX XXXXXXXXXXXXXX'}
  console.log(submittedCardObject.cardnumber)
  # prints xxxx xxxx xxxx xxx
};

## The function which uses the imported npm library
function CreditCardTest() {
  return (
    <div className="credit-card-test-page-main">
      <CreditCard
        submitbuttontext="Submit card"
        onsubmitfunc={myHandlerFunction}
        expiryMinMonth="2021-10"                 # not mandatory, the minimum month which can be entered
        cardNumberLabel="Card Number"            # not mandatory
        expLabel="Month Of Expiry"               # not mandatory
        cvcLabel="CVC"                           # not mandatory
        cardNameLabel="Card Holder Name"         # not mandatory
      />
    </div>
  );
}