How to generate a post action inside of an iframe for a payment gateway

4 Views

I’m trying to set up an iframe-based payment gateway for a WooCommerce online store. The instructions I got from the bank say that I need to “generate a post action inside of the contained IFRAME on the page.”

The result should be that when the checkout page loads, inside the iframe I should be seeing fields for the customer to enter their credit card information.

Read More

But I don’t understand how to take the form below (from the documentation) and automatically post it to the iframe.

Payment Gateway Documentation:

To initiate a transaction, your system must generate a POST action inside of the contained IFRAME on the page.using the format below to the URL designated for your system. You will be provided with a URL for testing and live transaction processing by the processor when your merchant accounts have been configured.

Example: 

<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>
Post Views: 4

Related posts

2 comments

  1. Have the form’s target attribute match the iframe’s name attribute.

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

    Source: https://css-tricks.com/snippets/html/post-data-to-an-iframe/

  2. There is working example (you need to add a simple js line to submit your form):

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

Comments are closed.