IppoPay Payment Gateway for your Online Business.
with npm
NPM Package Link : https://www.npmjs.com/package/angular-ippopay
npm install --save angular-ippopay
IppoPay Payment Gateway uses sensible defaults, so only minimal configuration via props is necessary.
How to do configuration in your Angular Project?
Add the below script in angular-cli.json or angular.json.
"scripts": ["./node_modules/angular-ippopay/index.js"]
In your Typescript file. follow the instructions.
To initialize the IppoPay Payment.
//To Declare the Ippopay Paymentdeclare 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 Paymentconstructor(){Ippopay.init();}
To Open the Ippopay Payment Popup. Get the Order ID (ORDER_ID) from Step 3.
Ippopay.open('ORDER_ID','PUBLIC_KEY');
To Close the Ippopay Payment Popup
Ippopay.close();
Create order from Server side using below API and get the Order id. Click here to know how to create a order.
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 1111Expiry 05/20CVV 123Card Number 4242 4242 4242 4242Expiry 05/23CVV 123
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.
const ippopayHandler = ( function (e) {if(e.data.status == 'success'){console.log(e.data)}if(e.data.status == 'failure'){console.log(e.data)}});
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');}}
This component is written by IppoPay.
IppoPay 2020 © All Rights Reserved. IppoPay