# react-ippopay

> IppoPay Payments - Credit, Debit, UPI, Netbanking Payments

Latest version **1.0.4** (published 2021-05-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-ippopay
pnpm add react-ippopay
yarn add react-ippopay
bun add react-ippopay
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-05-03 |
| First published | 2020-11-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | IppoPay |
| Maintainers | ippopay |
| Keywords | IppoPay, Payments, -, Credit, Debit, UPI, Netbanking, Payments |

## Links

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

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

- 1.0.4 (latest) — 2021-05-03
- 1.0.3 — 2021-02-03
- 1.0.2 — 2020-12-23
- 1.0.1 — 2020-11-04

## README

# react-ippopay

IppoPay Payment Gateway for your Online Business.

## Install

with npm

```bash
npm install --save react-ippopay
```

## Usage

IppoPay Payment Gateway uses sensible defaults, so only minimal configuration via props is necessary.

### Basic configuration

How to do configuration in your React Project?

### Step 1

Initialize the ippopay Payment like below.

```jsx
import {Ippopay} from 'react-ippopay';

class App extends Component {
  state = {
    ippopayOpen: false,
    order_id:'YOUR_ORDER_ID',
    public_key:'YOUR_PUBLIC_KEY'
  };
  ippopayHandler(e){
    if(e.data.status == 'success'){
        console.log(e.data);
    }
    if(e.data.status == 'failure'){
        console.log(e.data);
    }
    if(e.data.status == 'closed'){
        console.log(e.data); // For Payment Popup Closed Event
    }
  }
  componentDidUpdate(){
    window.addEventListener('message', this.ippopayHandler);
  }
  ippopayOpen(){
    this.setState({ippopayOpen: true});
  }
  render() {
    return (
      <div>
        <span onClick={e => this.ippopayOpen(e)}>IppoPay</span>
        <Ippopay ippopayOpen={this.state.ippopayOpen} ippopayClose={true} order_id={this.state.order_id} public_key={this.state.public_key}
          />
      </div> 
    );
  }
}
```

### Step 2

Create order from Server side using below API and get the Order id.

```jsx
  POST API LINK :
  https://public_key:secret_key@api.ippopay.com/v1/order/create

  BODY:
  amount : YOUR_TRANSACTION_AMOUNT
  currency : YOUR_CURRENCY_CODE
  payment_modes : OPTIONAL /*  Available modes are cc,dc,nb,upi */
  customer : OPTIONAL /*note : auto render in payment popup*/
```

Example Request

```jsx
  {
    "amount": YOUR_TRANSACTION_AMOUNT,
        "currency": YOUR_CURRENCY_CODE,
        "payment_modes": "cc,dc,nb,upi" ,
        "customer": {
          "name": Customer_Name,
          "email": Customer_Email,
          "phone": {
                "country_code": Phone_Country_Code ,
                "national_number": Phone_Number
            }
          }
  }
  ```

In response for the above request, you will get Order ID (order_id - params). After that you need to assign this order_id variable globally as mentioned in Step 1.

### Step 3

When you click place order button our popup will be loaded so you can use below test card credentials to complete the order.

```jsx
  Card Number 4111 1111 1111 1111
  Expiry 05/20
  CVV 123

  Card Number 4242 4242 4242 4242
  Expiry 05/23
  CVV 123
```

### Props

React IppoPay default props to provide a dynamic experience to open a payment widget and allow user to make a payment via Credit/Debit Card.

* `ippopayOpen` - Boolean - toggles the popup open state (see above example)
* `ippopayClose` - Boolean - Enables the popup close option state (see above example)
* `order_id` - String - sets the Order ID as order_id state 
* `public_key` - String - sets your Public Key as public_key state (Check your API Settings in IppoPay Merchant Panel to know the Public Key)

### Success and Error Handlers

React IppoPay gives you the handlers for Payment status and details.

After Payment done, the below line sends the Payment details and status to ippopayHandler function.

```jsx
window.addEventListener('message', this.ippopayHandler);
```

You can get the Payment status in the below function, it may be success or error. 

```jsx
  ippopayHandler(e){
    if(e.data.status == 'success'){
        console.log(e.data)
    }
    if(e.data.status == 'failure'){
        console.log(e.data)
    }
  }

```

## Author

This component is written by [IppoPay](https://github.com/ippopay).

## License

IppoPay 2020 &copy; All Rights Reserved. [IppoPay](https://www.ippopay.com/)

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