how to use Hosted Form in angular 5

[souravknath]

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

    form.action = "https://test.authorize.net/payment/payment";

    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 = 0; i < arr.length; i++) {

      pair = arr[i].split('=');

      vars.push(pair[0]);

     // vars[pair[0]] = unescape(pair[1]);

    }

    return vars;

  }

i could not get  response from hosted form.

[cyberflix]

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/