Authorized.net iframe communicator not return the transaction id.

[mounica]

i have two problem.

• if i use iframe in the my code form action not redirected to https://test.authorize.net/payment/payment.
  <iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="100%" height="650px" frameborder="0" scrolling="no" hidden="true"></iframe><form action="https://test.authorize.net/payment/payment" id="formAuthorizeNetTestPage" method="post" target="load_payment" name="formAuthorizeNetTestPage"><input id="token_val" name="token" type="hidden" value="generated_token"/><button id="btnContinue">Pay</button></form>
• if i remove iframe it will go to payment form and i'll enter card no,exp date,card code it will show the receipt of the transaction.                 <form action="https://test.authorize.net/payment/payment" id="formAuthorizeNetTestPage" method="post"               target="load_payment" name="formAuthorizeNetTestPage"><input id="token_val" name="token" type="hidden" value="generated_token"/><button id="btnContinue">Pay</button></form>

Tested in our site:

1. Already included the IFrameCommunicator.html script also but script is not loaded.for the testing purpose i added alert in the script but alert also not triggered. Below i'll share my tested script.
2. <Files IFrameCommunicator.html>
   Header set Content-Security-Policy "frame-ancestors 'self' *.http://localhost/project/ *.authorize.net"
   </Files>

Need solution for: Get the transaction id from accepted hosted form and then show into our parent page (our site).

Code sample:
IFrameCommunicator.html
<script>

window.CommunicationHandler = {};
function parseQueryString(str) {
alert("iii hee");
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
window.CommunicationHandler.onReceiveCommunication = function (argument) {
params = parseQueryString(argument.qstr)
parentFrame = argument.parent.split('/')[4];
switch (params['action']) {
case "transactResponse":
var transResponse = JSON.parse(params['response']);
if (transResponse.transId > 0) {
alert(transResponse.transId);

}

}

}

</script>

Mytoken_generation_accepted_host.php

$setting3 = new AnetAPI\SettingType();
$setting3->setSettingName("hostedPaymentReturnOptions");
$setting3->setSettingValue("{\"showReceipt\" : false }");

$commUrl = json_encode(array('url' => $homeurl."IFrameCommunicator.html" ), JSON_UNESCAPED_SLASHES);

$setting7 = new AnetAPI\SettingType();
$setting7->setSettingName("hostedPaymentIFrameCommunicatorUrl");
$setting7->setSettingValue($commUrl);

[Obrien45050]

he implementation and use of Accept Hosted follow a basic workflow:

1. You call getHostedPaymentPageRequest to request a form token. This request contains transaction information and form parameter settings.

2. You embed the payment form or redirect the customer to the payment form by sending an HTML POST containing the form token to https://accept.authorize.net/payment/payment.

3. Your customer completes and submits the payment form.

4. The API sends the transaction to Authorize.net for processing.

5. The customer is returned to your site, which displays a result page based on the URL followed or the response details sent. PFM Login