react-ippopay

IppoPay Payment Gateway for your Online Business.

Install

with npm

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.

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.

  POST API LINK :
  https://public_key:[email protected]/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

  {
    "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.

  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.

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

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

  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.

License

IppoPay 2020 © All Rights Reserved. IppoPay