> For the complete documentation index, see [llms.txt](https://docs.ippopay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ippopay.com/react-js.md).

# React JS

## react-ippopay

IppoPay Payment Gateway for your Online Business.

### Install

with npm

NPM Package Link : <https://www.npmjs.com/package/react-ippopay>

```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)
    }
  }
  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. [Click here](https://docs.ippopay.com/server-side-integrations/rest-api#create-order) to know how to create a order.

#### 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&#x20;
* `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 © All Rights Reserved. [IppoPay](https://www.ippopay.com/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ippopay.com/react-js.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.