Ionic 3 Payment gateway integration(HDFC)

Ionic payment gateway provides a payment transaction by the transfer of information between mobile application and the acquiring bank.

Below are the steps followed to integrate bank payment gateway with ionic3 application:-

Step1:- Install the Cordova and Ionic Native plugins

$ ionic cordova plugin add cordova-plugin-inappbrowser

$ npm install –save @ionic-native/in-app-browser

Step2:- Get the hash key (provides added security to the payment) from server

Step3:-Create html page in WWW folder(redirect.html). This html page should contain an empty form with an id. We use this html page to submit to the payment gateway.

Step4:-From form, load string to html tags, it should be in the format of how we submit to the payment gateway.

 Step5:-Import inappbrowser  to app.module.ts

import { InAppBrowser } from '@ionic-native/in-app-browser';

and include it in @NgModule’s providers array.

Step6:-Import inappbrowser in checkout page and add this in constructor.

constructor(public navCtrl: NavController,private iab: InAppBrowser)

Step7:-Create and show inappbrowser using create method

create(url, target,options);

this.browser = this.iab.create( "redirect.html", "_blank", "EnableViewPortScale=yes,closebuttoncaption=Done"  );

here we are using HTML page created in step3(redirect.html) as the url, which opens the URL in a new inappbrowser instance.

Step8:-Call executeScript with the string created as in Step4.This executeScript injects Javascript code into the inappbrowser window(this is available only when the target is set to ‘_blank’). executeScript() method injects JavaScript in childview.

Step9:- When the executeScript() is called then the events will be fired and inappbrowser gives response to its parent. The events which are fired are,

loadstart- this is fired when the inappbrowser starts to load a URL.

loadstop- this event gets fired when the inappbrowser finished loading a URL.

loaderror- fired when the inappbrowser encounters an error loading a URL.

exit-this event is fired when the inappbrowser window is closed.

Then check for the URL success or failure of loadstop event in the browser parent.

this.browser.on("loadstop").subscribe(

    (event) => {

        //this.close_event = true;

      

        console.log(event);

        if(event.url.includes(“Successful")){

 //write the code here

            this.browser.close();        

        }

        else if(event.url.includes("failure")){

            //your code here

            this.browser.close();

        }

    },

    (err) => {

        console.log("InAppBrowser Loadstop Event Error: " + err);

    }

);

 If the payment succeeds or fails close the browser with command close().

this.browser.close();

Step10:-Reading response from gateway should be handled at server, status can be stored in the localstorage of the application.

Step11:-Redirect the application as required.