如何在 iframe 内为支付网关生成发布操作答案

【问题标题】：How to generate a post action inside of an iframe for a payment gateway如何在 iframe 内为支付网关生成发布操作
【发布时间】：2016-09-05 09:01:52
【问题描述】：

我正在尝试为 WooCommerce 在线商店设置基于 iframe 的支付网关。我从银行得到的指示说我需要“在页面上包含的 IFRAME 内生成一个发布操作。”

结果应该是，当结帐页面加载时，在 iframe 内，我应该会看到供客户输入信用卡信息的字段。

但我不明白如何采用下面的表格（来自文档）并自动将其发布到 iframe。

支付网关文档：

要启动交易，您的系统必须在页面上包含的 IFRAME 内生成一个 POST 操作。请使用以下格式访问为您的系统指定的 URL。配置您的商家帐户后，处理器将为您提供一个用于测试和实时交易处理的 URL。

例子：

<form ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
  <input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
  <input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
  <input type=”hidden” NAME=”AMT” VALUE=”10.00” />
  <input type=”hidden” NAME=”CURR” VALUE=”CAD” />
  <input NAME=”invoice” VALUE=”DemoSale1” />
  <input NAME=”tranid” VALUE=”123456789” />
  <input NAME=”amt” VALUE=1.00 />
  <input NAME=”curr” VALUE=”USD” />
  <input NAME=”URLAPPROVED” VALUE=”http://www.webstore.com/cgishl/goodpayment.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
  <input NAME=”URLOTHER” VALUE=”http://www.webstore.com/cgishl/paymentincomplete.exe?res=#RC#&fres=#FC#&ac=#APP#&ref=#REF#&tran=#TRANID#&invoice=#INVOICE#&err=#EM#” />
  <INPUT name=SUBMIT type=submit value="Pay Now">
</form>

【问题讨论】：

标签： html wordpress iframe woocommerce payment-gateway

【解决方案1】：

有一个工作示例（您需要添加一个简单的 js 行来提交您的表单）：

var iframe = document.createElement('iframe');
var html = `<body>
    <form id="form" action="http://example.com" method="post">
    <input type="text" name="email" value="mail@example.com"/>
    <input type="submit" />
    </form>

    <script>document.getElementById("form").submit();</script>

    </body>`;

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);

【讨论】：

【解决方案2】：

让表单的目标属性与 iframe 的名称属性匹配。

<form target="my-iframe" ACTION="https://tranpage/demogwtxnif/txnif.aspx" METHOD="post">
  <input type="hidden" NAME="MERCHKEY" VALUE="MYDEMOMERCHANTKEY" />
  <input type=”hidden” NAME=”TRANTYPE” VALUE=”AUTH”/>
  ...
</form>

<iframe name="my-iframe" src="https://tranpage/demogwtxnif/txnif.aspx"></iframe>

来源：https://css-tricks.com/snippets/html/post-data-to-an-iframe/

【讨论】：

这会加载表单，然后我必须点击表单中的提交按钮才能加载 iframe。如何让表单自动提交，以便 iframe 自动加载信用卡字段？