Accept hosted empty transaction response

[majod1]

I successfully implement your Accep Hosted example from github, but sometimes, not always, I cannot prorcess transaction response, as it returns empty:

parent: "https://test.authorize.net/payment/payment"
​
qstr: "action=transactResponse&response={"

SyntaxError: JSON.parse: end of data while reading object contents at line 1 column 2 of the JSON data

The transaction passes correctly, I recieve confirmation email, but I cannot process it on my side because the response is empty, or only "{".

Any help appreciated,

thank you.

[majod1]

Now I can confirm the empty response is happening only in Firefox (v. 58b) and not in any other browser.

I can submit a bugzilla report if anyone can confirm this is strictly Firefox related.

Thanks.

[majod1 · Accepted solution]

This is solved:

The reason was that IFrameCommunicator didn't register the message event listener, until the iframe was loaded instantly.

The default iframe HTML code is:

<div  id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px">
			<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="100%" height="650px" frameborder="0" scrolling="yes" hidden="true">
			</iframe>

And later JS code is:

$("#iframe_holder iframe").hide();

which sets

display:none

on the iframe. Removing this JS code and hidden="true" from iframe inline, the iframe now loads instantly and registers eventListener correctly. Without that, only this code:

if (window.location.hash && window.location.hash.length > 1) {
   callParentFunction(window.location.hash.substring(1));
 }

from IFrameCommunicator would run, which for some reason doesn't include the respone JSON.

[ioiki]

hi ,

i m using  Authorize.net accept hosted form but,  always, I cannot prorcess transaction response, as it returns empty:

action=transactResponse&response={

also i have recvd email but why my response not proper in 

ajax response  from test.authorize.net/payment/Api.ashx

{"resultCode":"Ok","messageCode":"Ok","transactionData":{"accountType":"Visa","accountNumber":"XXXX0130","transId":"60101095995","responseCode":"1","authorization":"V3DWUE","billTo":{"firstName":"Ellen","lastName":"Johnson","company":"Souveniropolis","address":"14 Main Street","city":"Pecan Springs","state":"TX","zip":"44628","country":"USA"},"totalAmount":"2.00","dateTime":"3/28/2018 9:31:21 AM"}}

but after this i getting this error

action=transactResponse&response={

[Wei]

Guys,

after severals days headache, confusing and depressing, we figured it out!

this intermittent issue is due to how we(the integrator) use the hosted form, that is render hosted form too earlier cause listener not registered.

inside the hosted form

<div _ngcontent-c0="" class="iFrameClass" id="divIframeCommunicator"></div> is not fully rendered.

<div _ngcontent-c0="" class="iFrameClass" id="divIframeCommunicator"><iframe src="your_site_url" name="ifrmCommunicator" id="ifrmCommunicator"></iframe></div> the correctly one.

the symptom is unable to receiveMessage but location.hash give truncated JSON like "#action=transactResponse&response={"

also noticed their demo page in doc is a button to trigger post form token, where is an implied delay.

when realized this the solution is simple, instead of do $("#send_token").submit(); in .ready() but do it in setTimeout with 1-2 seconds delay.

now the hosted iframe working perfectly under Firefox, Chrome, Edge, IE11 and Opera


From avetticommerce