angular-ippopay

IppoPay Payment Gateway for your Online Business.

Install

with npm

``bash
npm install --save angular-ippopay
`

Usage

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

$3

How to do configuration in your Angular Project?

$3

Add the below script in angular-cli.json or angular.json.

`jsx
"scripts": [
"./node_modules/angular-ippopay/index.js"
]
`

$3

In your Typescript file. follow the instructions.

To initialize the IppoPay Payment.

`jsx
//To Declare the Ippopay Payment

declare var Ippopay: any;

// For Success and Error Handlers. You can get the Payment status in the below function, it may be success or error.

const ippopayHandler = ( function (e) {
if(e.data.status == 'success'){
console.log(e.data)
}
if(e.data.status == 'failure'){
console.log(e.data)
}
});
window.addEventListener('message', ippopayHandler);

//To Initialize the Ippopay Payment

constructor(){
Ippopay.init();
}

`

To Open the Ippopay Payment Popup. Get the Order ID (ORDER_ID) from Step 3.

`jsx

Ippopay.open('ORDER_ID','PUBLIC_KEY');

`

To Close the Ippopay Payment Popup

`jsx

Ippopay.close();

`

$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).

$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 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
const ippopayHandler = ( function (e) {
if(e.data.status == 'success'){
console.log(e.data)
}
if(e.data.status == 'failure'){
console.log(e.data)
}
});
`

$3


`jsx
import { Component, OnInit } from '@angular/core';
import "@angular/compiler";
declare var Ippopay: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() {
console.log('Called Constructor');
Ippopay.init();
}
ngOnInit() {
console.log('Called ngOnInit method');
const ippopayHandler = ( function (e) {
if(e.data.status == 'success'){
console.log(e.data)
}
if(e.data.status == 'failure'){
console.log(e.data)
}
});
window.addEventListener('message', ippopayHandler);
Ippopay.open('ORDER_ID','PUBLIC_KEY');
}
}
``

Author

This component is written by IppoPay.

License

IppoPay 2020 © All Rights Reserved. IppoPay