# react-easy-credit-card

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

Latest version **2.0.0** (published 2021-11-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-easy-credit-card
pnpm add react-easy-credit-card
yarn add react-easy-credit-card
bun add react-easy-credit-card
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-11-15 |
| First published | 2021-11-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ashane Ediri |
| Maintainers | ashane2e |
| Keywords | react, credit, reactEasyCreditCard, reactCreditCard, easyCreditCardForm, creditCardSubmit |

## Links

- npm: https://www.npmjs.com/package/react-easy-credit-card
- Repository: https://github.com/AshaneEdiri/react-easy-credit-card
- Homepage: https://github.com/AshaneEdiri/react-easy-credit-card#readme
- Issues: https://github.com/AshaneEdiri/react-easy-credit-card/issues
- npm.io page: https://npm.io/package/react-easy-credit-card

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.0.2
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.0.1
- [react-png-tooltip](https://npm.io/package/react-png-tooltip.md) 1.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.3
- [react-credit-cards](https://npm.io/package/react-credit-cards.md) 0.8.3
- [react-credit-card-input](https://npm.io/package/react-credit-card-input.md) 1.1.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2021-11-15
- 1.0.4 — 2021-11-12
- 1.0.3 — 2021-11-11
- 1.0.2 — 2021-11-11
- 1.0.1 — 2021-11-11
- 1.0.0 — 2021-11-11

## README

# 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.

```bash
 npm install react-easy-credit-card
```

To import the library.

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

The library could be used as follows inside a react component

```bash
## 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>
  );
}
```

## Want to play with code ?

1. Clone the repository
2. 'npm install' to install all the dependencies
3. 'npm start' to start on local environment
4. Open your browser and navigate to 'http://localhost:3000/creditcard'

## Sample Outputs

### 1. The output of v1.0.x before data is entered

![v1.0.x output](./public/output_beforedata.PNG)

### 2. The output of v1.0.x after data is entered

![v1.0.x output](./public/output_dataentered.PNG)

### 3. The output of v1.0.x when entering cvc

![v1.0.x cvc output](./public/cvv_output.PNG)

### 4. The improved output of v2.0.x 

![v2.0.x output](./public/output_v2.PNG)

#### Make sure to download the latest release version to experience the advanced features

---
_Source: https://npm.io/package/react-easy-credit-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._