In this tutorial, you will learn, how to integrate the Instamojo payment gateway on the Ionic 2 iOS mobile application using the Safari view controller.

Payment gateway providers not offering the Angular2 SDK, to integrate the payment gateway on the Ionic 2 mobile applications. Only a few offering the Angular2 SDK. They are

1. Alipay
2. Paypal

So the Payment Gateway web pages are the best way to integrate the payment gateway with your Ionic 2 mobile application.

To open the web page in the iOS application, you can use the Safari View Controller, which is very fast InAppBrowser to open web pages inside the Ionic2 applications and recommended by apple developers. 

For Android, you can use the InAppBrowser plugin to integrate the Payment Gateway. However, it doesn't have the Done button to track the browser close event.

Preview of the Instamojo Payment Gateway in iOS(iPhone SE emulator).

  

   

Before proceed further, you must have the account with the Instamojo and the URL to open the payment gateway of the Instamojo. This tutorial is not covering, how to setup the account and URL with the Instamojo.

In this tutorial, I used the Ampersand Academy's Instamojo payment URL. The URL of Instamojo payment gateway looks like below.

https://www.instamojo.com/@ampersandacademy

Like this, you can create your own web payment gateway platform and you can open it by using the Safari View Controller
native plugin.

Create a new Ionic 2 project using.

ionic start pay blank --v2

Then add the Safari View Controller plugin using.

cd pay
ionic plugin add cordova-plugin-safariviewcontroller --save
npm install --save @ionic-native/safari-view-controller

Now create an input field to enter the amount. And create a button with the click event on the home.html file to open the Instamojo Payment Web page.

<ion-content padding>
<ion-item>
<ion-label fixed>Pay Amount</ion-label>
<ion-input type="number" value=""></ion-input>
</ion-item>
<button ion-button (click)="openweb()" >Pay With Instamojo</button>
</ion-content>

Now import the Safari View Controller and HttpModule class to the app.module.ts file.

import { SafariViewController } from '@ionic-native/safari-view-controller';
import { HttpModule } from '@angular/http';

Include the Safari View Controller on the provider of app.module.ts file.

providers: [SafariViewController,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

And add the HttpModule to the imports of the app.module.ts file.

imports: [
BrowserModule,
IonicModule.forRoot(MyApp),HttpModule
]

Now import the Safari View Controller and Http class to the home.ts file.

import { SafariViewController } from '@ionic-native/safari-view-controller';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

Create a reference using the constructor.

constructor(private safariViewController: SafariViewController,private http: Http) {

}

Whenever the user clicking the pay button, it must call the Instamojo API to create a new payment request. Use the below PHP code to create payment request.

try {
$response = $api->paymentRequestCreate(array(
"purpose" => "FIFA 16",
"amount" => "3499",
"send_email" => true,
"email" => "foo@example.com",
"redirect_url" => "http://www.example.com/handle_redirect.php"
));
print_r($response);
}
catch (Exception $e) {
print('Error: ' . $e->getMessage());
}

Save the above code in your server as payRequest.php with proper API key.

For more information about the PHP code and setup API key, use the below link.

https://github.com/Instamojo/instamojo-php


Call the payRequest.php URL  in the home.ts file using the Http POST method. The payRequest.php returns the pay URL and payment request id. 

openweb()
{
let headers = new Headers({ 'Content-Type': 'application/json'});
this.http.post('http://192.168.0.100/payRequest.php',{},headers)
.map(res => res.json())
.subscribe(
data => {
//your data here

},
err => {
console.log("Oops!");
}
);

}


Now open the newly created payment URL with the Safari View Controller. It will open the corresponding payment page.

Create a function to track the payment details, when the user clicks the Done button. Now you can show the status of the payment on your Ionic 2 application.

To Get the status or details of a Payment Request using the Http POST method.

try {
$response = $api->paymentRequestStatus(['PAYMENT REQUEST ID']);
print_r($response);
}
catch (Exception $e) {
print('Error: ' . $e->getMessage());
}

Full source code of home.ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SafariViewController } from '@ionic-native/safari-view-controller';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private safariViewController: SafariViewController,private http: Http) {

}

payURL='';

openweb()
{

let headers = new Headers({ 'Content-Type': 'application/json'});
this.http.post('http://example.com/payRequest.php',{},headers)
.map(res => res.json())
.subscribe(
data => {

//get Pay URL

//call the Safari View Controller

this.safariViewController.isAvailable()
.then((available: boolean) => {
if (available) {

this.safariViewController.show({
url: this.payURL,
hidden: false,
animated: false,
transition: 'curl',
enterReaderModeIfAvailable: true,
tintColor: '#ff0000'
})
.then((result: any) => {
if(result.event === 'opened') console.log('Opened');
else if(result.event === 'loaded') console.log('Loaded');
else if(result.event === 'closed') {console.log('Closed');


//write your code to track the payment status

};
},
(error: any) => console.error(error)
);

} else {
// use fallback browser, example InAppBrowser
}
}
);

// end of safari view controller
},
err => {
console.log("Oops!");
}
);

}

}


To run this application on iOS emulator

ionic platform add ios
ionic run ios

Below is the Ionic information while writing this post.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1