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.

$3

How to do configuration in your React Project?

$3

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 (



);
}
}
`

$3

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.

$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
`

$3

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)

$3

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.

License

IppoPay 2020 © All Rights Reserved. IppoPay