Reply
Highlighted
Member
Posts: 2
Registered: ‎03-04-2020

how to use Hosted Form in angular 5

I have added 

for html file

<form method="post" action="https://test.authorize.net/payment/payment" id="formAuthorizeNetPopup" name="formAuthorizeNetPopup" target="iframeAuthorizeNet" style="display:none;">
  <input type="text" id="popupToken" name="token" value="Replace with form token from getHostedPaymentPageResponse" />
</form>
<input type="text" id="inputtoken" value="" />
<br />
<div>
  Trigger Accept Transaction
  <button id="btnOpenAuthorizeNetPopup" (click)="openPopup()">Open AuthorizeNetPopup</button>
</div>
<div id="divAuthorizeNetPopup" style="display:none;" class="AuthorizeNetPopupGrayFrameTheme">
  <div class="AuthorizeNetPopupOuter">
    <div class="AuthorizeNetPopupTop">
      <div class="AuthorizeNetPopupClose">
        <a (click)="closePopup();" title="Close"> </a>
      </div>
    </div>
    <div class="AuthorizeNetPopupInner">
      <iframe name="iframeAuthorizeNet" id="iframeAuthorizeNet" src="empty.html" frameborder="0" scrolling="yes"></iframe>
    </div>
    <div class="AuthorizeNetPopupBottom">
      <!-- <div class="AuthorizeNetPopupLogo" title="Powered by Authorize.Net"></div> -->
    </div>
    <div id="divAuthorizeNetPopupScreen" style="display:none;"></div>
  </div>
</div>
 
for typescript file
closePopup() {
    document.getElementById("divAuthorizeNetPopupScreen").style.display = "none";
    document.getElementById("divAuthorizeNetPopup").style.display = "none";
    document.getElementById("iframeAuthorizeNet").setAttribute("src","empty.html")
    document.getElementById("btnOpenAuthorizeNetPopup").setAttribute("disabled","false")
    //if (AuthorizeNetPopup.options.onPopupClosed) AuthorizeNetPopup.options.onPopupClosed();
  };
  openPopup() {
    var popup = document.getElementById("divAuthorizeNetPopup");
    var popupScreen = document.getElementById("divAuthorizeNetPopupScreen");
    var ifrm = document.getElementById("iframeAuthorizeNet");
    var form = document.forms["formAuthorizeNetPopup"];
    form.noValidate = false;
    $("#popupToken").val($("#inputtoken").val());
    ifrm.style.width = "442px";
    ifrm.style.height = "578px";

    form.submit();

    popup.style.display = "";
    // popupScreen.style.display = "";
    this.centerPopup();
  };
  centerPopup() {
    var d = document.getElementById("divAuthorizeNetPopup");
    d.style.left = "50%";
    d.style.top = "50%";
    var left = -Math.floor(d.clientWidth / 2);
    var top = -Math.floor(d.clientHeight / 2);
    d.style.marginLeft = left.toString() + "px";
    d.style.marginTop = top.toString() + "px";
    d.style.zIndex = "2";
    if (d.offsetLeft < 16) {
      d.style.left = "16px";
      d.style.marginLeft = "0px";
    }
    if (d.offsetTop < 16) {
      d.style.top = "16px";
      d.style.marginTop = "0px";
    }
  }
  parseQueryString(str) {
    var vars = [];
    var arr = str.split('&');
    var pair;
    for (var i = 0i < arr.lengthi++) {
      pair = arr[i].split('=');
      vars.push(pair[0]);
     // vars[pair[0]] = unescape(pair[1]);
    }
    return vars;
  }
 
i could not get  response from hosted form.
 
 
 
 
Highlighted
Member
Posts: 4
Registered: ‎03-07-2020

Re: how to use Hosted Form in angular 5

Thank you very much for the script,

being a learner and newbie, it really helped me.

I will now implement this on my new website https://cinemaapk.info/