CODEWITHSUNDEEP
httpxmlhttprequesthttp-postionic2inappbrowser
Mahmoud Ismail
Mahmoud Ismail

Reputation: 1617

ionic 2 inappbrowser POST form with data params

I want to submit a POST form to an external url, that should open a new window with post data params using the in app browser, so how i can do this in ionic2 ?

Upvotes: 2

Views: 4680

Answers (1)

tanveer ahmad dar
tanveer ahmad dar

Reputation: 3372

you can do it like this using InAppBrowser in ionic 2;

  1. Install the Inappbrowser cordova plugin

    cordova plugin add cordova-plugin-inappbrowser

  2. import the Inappbrowser component

    import {InAppBrowser} from 'ionic-native';

  3. create a javascript script string that we will be executing in the inappbrowser using that we will create a dynamic form on the fly and post data to the url. for the we need to create an html page like redirect.html and place it in the www folder and we will open this file in the in app browser and post a form to the external url from this html file

create an html file and place it in www folder of the app redirect.html

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting to the payment page</title>
</head>
<body>
    <b>
    please wait we are redirecting to the payment page....
</b>
    <form id="ts-app-payment-form-redirect"></form>
</body>
</html>

in the compnent do like this

   let options = {
        name: 'tanveer ahmad dar',
        email: '[email protected]',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };

let formHtml:string = '';
for(let key in Options){
   if (result.hasOwnProperty(key)) {
       let value = result[key];
      formHtml+='<input type="hidden" value="'+value+'" id="'+key+'" name="'+key+'"/>';
   }
}

let url = "some payment gateway url"
let payScript = "var form = document.getElementById('ts-app-payment-form-redirect'); ";
payScript += "form.innerHTML = '" + formHtml + "';";
payScript += "form.action = '" + url + "';";
payScript += "form.method = 'POST';" ;
payScript += "form.submit();" ;

  1. open the inappbrowser and execute the script by using executeScript method of inappbrowser on loadstop event

    if (this.platform.is('cordova')) {
  let browser = new InAppBrowser('redirect.html', '_blank', 'location=no');
   browser.show();
   browser.on("loadstart")
   .subscribe(
      event => {
         console.log("loadstop -->",event);
         if(event.url.indexOf("some error url") > -1){
         browser.close();
         this.navCtrl.setRoot(BookingDetailPage,{
             success:false
          });
        }
      },
      err => {
        console.log("InAppBrowser loadstart Event Error: " + err);
   });
   //on url load stop
    browser.on("loadstop")
   .subscribe(
       event => {
          //here we call executeScript method of inappbrowser and pass object 
          //with attribute code and value script string which will be executed in the inappbrowser
          browser.executeScript({
              code:payScript
           });
       console.log("loadstart -->",event);
       },
   err => {
      console.log("InAppBrowser loadstop Event Error: " + err);
   });
  //on closing the browser
   browser.on("exit")
  .subscribe(
    console.log("exit -->",event);
  },
  err => {
   console.log("InAppBrowser loadstart Event Error: " + err);
  });
}

i have done it like this i posted the hidden form with payment details to the payment url using this method. its working smooth. i can also check the inappbrowser url changes in loadstart and loadstop events i can clse the inappbrowser on success or failure urls

hope this helps you.. :)

Upvotes: 8

Related Questions