IONIC 2 InAppBrowser is not working in IOS

Question

This below code is working fine in Android. but, it doesn't works in IOS.

We think the browser.executeScript is not working here. here we are getting the redirection url from the API as a html content (this.paymentGatewayDetails) and we need to open that. It works fine in android.

trying this in IOS 11.0 phone.

IONIC 2.2 version

Plugin @ionic-native/in-app-browser": "^4.3.2"

This is the function we are trying to execute.

callGateway() {  
 return new Promise(
   (resolve, reject) => {

    let injected = false;

    if (!this.paymentGatewayDetails) {
      reject("PG_DET_INVALID")
    }

 const browser = this.iab.create("about:blank", "_blank", "location=no");
    browser.show()

    //inject html code to blank page. one time
    browser.on("loadstop")
      .subscribe(
      (sucess) => {
        if (!injected) {
          browser.executeScript({ code: "document.write('" + this.paymentGatewayDetails + "');" }).then(
            (sucess) => {
              console.log("sucess");
              browser.executeScript({ code: "document.mypg.submit();" }).then(
                (sucess) => {
                  console.log("sucess redirection");
                }, (err) => {
                  console.log("error redirection");
                }
              );
            }, (err) => {
              console.log("err")
            }
          );
          injected = true;             
        }
        console.log("success url is", sucess.url);
        if (sucess.url.includes("mobile.mypg.com")) {
          //payment gateway call sucess.
          browser.close()
          resolve("PG_CALL_SUCC")
        }
      }
      )}

We had given in PLIST file

<key>NSAppTransportSecurity</key>
   <dict>
       <key>NSAllowsArbitraryLoads</key>
       <true/>
   </dict>

And in INDEX.html>

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline';”>

We had installed the Whitelist plugin also

cordova-plugin-whitelist

In config.xml added these lines also

<content src="index.html" />
<access origin="*" subdomains="true" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

cordova plugin ls

com.darktalker.cordova.screenshot 0.1.5 "Screenshot"

cordova-plugin-actionsheet 2.3.3 "ActionSheet"

cordova-plugin-compat 1.1.0 "Compat"

cordova-plugin-console 1.0.5 "Console"

cordova-plugin-device 1.1.4 "Device"

cordova-plugin-dialogs 1.3.3 "Notification"

cordova-plugin-fcm 2.1.2 "FCMPlugin"

cordova-plugin-geolocation 2.4.3 "Geolocation"

cordova-plugin-globalization 1.0.7 "Globalization"

cordova-plugin-hotline 1.2.1 "Hotline plugin for Phonegap"

cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"

cordova-plugin-mfp 8.0.2017072706 "IBM MobileFirst Platform Foundation"

cordova-plugin-mfp-jsonstore 8.0.2017081712 "IBM MobileFirst Platform Foundation JSONStore"

cordova-plugin-nativestorage 2.2.2 "NativeStorage"

cordova-plugin-okhttp 2.0.0 "OkHttp"

cordova-plugin-screen-orientation 2.0.1 "Screen Orientation"

cordova-plugin-sms 1.0.5 "SMS"

cordova-plugin-splashscreen 4.0.3 "Splashscreen"

cordova-plugin-statusbar 2.2.2 "StatusBar"

cordova-plugin-whitelist 1.3.1 "Whitelist"

cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"

cordova.plugins.diagnostic 3.6.6 "Diagnostic"

es6-promise-plugin 4.1.0 "Promise"

ionic-plugin-keyboard 2.2.1 "Keyboard"

uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.4 "Launch Navigator"

Please help us to fix this issue...

Thanks

Can you edit your post to include your cordova plugins. ionic cordova plugins ls — Philip Brack

Roney Francis Roney Francis · Accepted Answer · 2017-10-21T07:39:36

I solved the issue.

browser.executeScript({ code: "document.write('" + this.paymentGatewayDetails + "');" }); is works for IOS and Android

Here I had removed the .then( (sucess) => {

Now the new code which is working in both IOS and Android

    callGateway() {  
 return new Promise(
   (resolve, reject) => {

    let injected = false;

    if (!this.paymentGatewayDetails) {
      reject("PG_DET_INVALID")
    }

 const browser = this.iab.create("about:blank", "_blank", "location=no");
    browser.show()

    //inject html code to blank page. one time
    browser.on("loadstop")
      .subscribe(
      (sucess) => {
        if (!injected) {
          browser.executeScript({ code: "document.write('" + this.paymentGatewayDetails + "');" });
              console.log("sucess");
              browser.executeScript({ code: "document.mypg.submit();" }).then(
                (sucess) => {
                  console.log("sucess redirection");
                }, (err) => {
                  console.log("error redirection");
                }
              );           
          injected = true;             
        }
        console.log("success url is", sucess.url);
        if (sucess.url.includes("mobile.mypg.com")) {
          //payment gateway call sucess.
          browser.close()
          resolve("PG_CALL_SUCC")
        }
      }
      )}

I don't know why it is not works there. If someone knows it please answer.

Thanks

IONIC 2 InAppBrowser is not working in IOS

1 Answers