How to Integrate PayUMoney Gate way in Ionic 3?

I'm not sure if you have found the solution already, but this might help others looking for the answer.

So lets assume you have all the required post parameters(You either have it locally somehow or get it from your server).

this.paymentString = `
<html>
  <body>
    <form action="${this.post_url}" method="post" id="payu_form">
      <input type="hidden" name="firstname" value="${this.firstname}"/>
      <input type="hidden" name="email" value="${this.email}"/>
      <input type="hidden" name="phone" value="${this.phone}"/>
      <input type="hidden" name="surl" value="${this.surl}"/>
      <input type="hidden" name="curl" value="${this.curl}"/>
      <input type="hidden" name="furl" value="${this.furl}"/>
      <input type="hidden" name="key" value="${this.key}"/>
      <input type="hidden" name="hash" value="${this.hash}"/>
      <input type="hidden" name="txnid" value="${this.txnid}"/>
      <input type="hidden" name="productinfo" value="${this.productinfo}"/>
      <input type="hidden" name="amount" value="${this.amount}"/>
      <input type="hidden" name="service_provider" value="${this.service_provider}"/>
      <button type="submit" value="submit" #submitBtn></button>
    </form>
    <script type="text/javascript">document.getElementById("payu_form").submit();</script>
  </body>
</html>`;

console.log(this.paymentString);
this.paymentString = 'data:text/html;base64,' + btoa(paymentString);

So basically now you have a base64 html string which you can pass to your InAppBrowser(from ionic native).

Please find how to include InAppBrowser in your project from ionic native docs (PS: Include InAppBrowser in app.modules.ts as well).

constructor(private iab: InAppBrowser) { }

Next step is to open the your base64String inAppBrowser and listen for completion of the transaction.

const browser = this.iab.create(payString, "_self", {
  location: 'no',
  clearcache: 'yes',
  hardwareback: 'no',
});
browser.on('loadstart').subscribe((event: InAppBrowserEvent) => {
  if (event.url === this.surl) {
    this.paymentSuccess();
  } else if (event.url === this.furl) {
    this.paymentFailure();
  }
});

What you do in functions paymentSuccess and paymentFailure is up to you.

That is it, should work as required.

Read further if you intend to send json data in 'productinfo'

You need to convert it to htmlsafe characters.

So replace this line

<input type="hidden" name="productinfo" value="${this.productinfo}"/>

with

<input type="hidden" name="productinfo" value="${this.htmlEntities(this.productinfo)}"/>

and have a function to convert json data to html safe characters,

private htmlEntities(str) {
    return String(str)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}