Angular JS

angular-ippopay
IppoPay Payment Gateway for your Online Business.
Install
with npm
NPM Package Link : https://www.npmjs.com/package/angular-ippopay​
1
​
Copied!
1
npm install --save angular-ippopay
Copied!
Usage
IppoPay Payment Gateway uses sensible defaults, so only minimal configuration via props is necessary.
Basic configuration
How to do configuration in your Angular Project?
Step 1
Add the below script in angular-cli.json or angular.json.
1
  "scripts": [
2
    "./node_modules/angular-ippopay/index.js"
3
  ]
Copied!
Step 2
In your Typescript file. follow the instructions.
To initialize the IppoPay Payment.
1
//To Declare the Ippopay Payment
2
​
3
declare var Ippopay: any;
4
​
5
// For Success and Error Handlers. You can get the Payment status in the below function, it may be success or error. 
6
​
7
const ippopayHandler = ( function (e) {
8
  if(e.data.status == 'success'){
9
        console.log(e.data)
10
    }
11
    if(e.data.status == 'failure'){
12
        console.log(e.data)
13
    }
14
});
15
window.addEventListener('message', ippopayHandler);
16
​
17
//To Initialize the Ippopay Payment
18
​
19
constructor(){
20
    Ippopay.init();
21
}
Copied!
To Open the Ippopay Payment Popup. Get the Order ID (ORDER_ID) from Step 3.
1
Ippopay.open('ORDER_ID','PUBLIC_KEY');
Copied!
To Close the Ippopay Payment Popup
1
Ippopay.close();
Copied!
Step 3
Create order from Server side using below API and get the Order id. Click here to know how to create a order.
Step 4
When you click place order button our popup will be loaded so you can use below test card credentials to complete the order.
1
  Card Number 4111 1111 1111 1111
2
  Expiry 05/20
3
  CVV 123
4
​
5
  Card Number 4242 4242 4242 4242
6
  Expiry 05/23
7
  CVV 123
Copied!
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.
1
window.addEventListener('message', this.ippopayHandler);
Copied!
You can get the Payment status in the below function, it may be success or error.
1
  const ippopayHandler = ( function (e) {
2
  if(e.data.status == 'success'){
3
        console.log(e.data)
4
    }
5
    if(e.data.status == 'failure'){
6
        console.log(e.data)
7
    }
8
});
Copied!
Sample Integration - App.component.ts
1
import { Component, OnInit } from '@angular/core';
2
import "@angular/compiler";
3
declare var Ippopay: any;
4
@Component({
5
  selector: 'app-root',
6
  templateUrl: './app.component.html',
7
  styleUrls: ['./app.component.css']
8
})
9
export class AppComponent implements OnInit {
10
  constructor() {
11
    console.log('Called Constructor');
12
    Ippopay.init();
13
  }
14
  ngOnInit() {
15
    console.log('Called ngOnInit method');
16
    const ippopayHandler = ( function (e) {
17
      if(e.data.status == 'success'){
18
            console.log(e.data)
19
        }
20
        if(e.data.status == 'failure'){
21
            console.log(e.data)
22
        }
23
    });
24
    window.addEventListener('message', ippopayHandler);
25
    Ippopay.open('ORDER_ID','PUBLIC_KEY');
26
  }  
27
}
Copied!
Author
This component is written by IppoPay.
License
IppoPay 2020 © All Rights Reserved. IppoPay​

React JS

PHP Integration

Last modified 7mo ago

Copy link

Contents