如何在 Ionic 3 中集成 PayUMoney 网关？答案

【问题标题】：How to Integrate PayUMoney Gate way in Ionic 3?如何在 Ionic 3 中集成 PayUMoney 网关？
【发布时间】：2017-11-24 13:15:18
【问题描述】：

实际上，我需要使用 Ionic 3 实现 PayUMoney。我知道，我没有合适的插件。但我需要将 PayUMoney 处理与我的服务器集成并将确认发送到 ionic 3。请指导我解决此问题。

【问题讨论】：

你有什么解决办法吗？
没什么。？由于我正在搜索，因此没有将 payUmoney 集成到 ionic 3 框架的解决方案。

标签： ionic-framework ionic3

【解决方案1】：

我不确定您是否已经找到解决方案，但这可能会帮助其他人寻找答案。

假设您拥有所有必需的发布参数（您要么以某种方式在本地获取它，要么从您的服务器获取它）。

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);

所以基本上现在你有一个 base64 html 字符串，你可以将它传递给你的 InAppBrowser（来自 ionic native）。

请从ionic native docs 找到如何在您的项目中包含 InAppBrowser（PS：在 app.modules.ts 中也包含 InAppBrowser）。

constructor(private iab: InAppBrowser) { }

下一步是在AppBrowser 中打开你的base64String 并监听事务的完成。

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();
  }
});

您在功能 paymentSuccess 和 paymentFailure 中做什么取决于您。

就是这样，应该可以按要求工作。

如果您打算在“productinfo”中发送 json 数据，请进一步阅读

您需要将其转换为 htmlsafe 字符。

所以替换这一行

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

与

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

并具有将json数据转换为html安全字符的功能，

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

【讨论】：