Accept Hosted iFrame form displaying wrong. (.NET)

[JohnB]

Greetings,

I have been working on a .NET form, that will allow us to implement authorize.net's accept hosted form.  I used the code from this page as an example:

https://developer.authorize.net/api/reference/#payment-transactions-get-an-accept-payment-page

When I run the code from my development machine, the payment form shows up as expected.  When I copy the same code to our web server, I get a form that looks like this:  (Contains all sections, with {{}} placeholders.)

https://imgur.com/a/tGu5l

I've verified that the form is posting to "https://test.authorize.net/payment/payment", without a trailing slash.  Just to test, I added the slash, and the CSS files fail to load, so I know that the location is correct.

One other thing that I've done, is to run it though the IE developer tools, and watched the results for each of the actions.  All of the scripts and CSS files download with a 200 result code, which is fine.  However, the form is always screwed up.

One thing I have noted, is that for some unknown reason, some times when I go to the page, some of the scripts from test.authorize.net will not have a result.  They simply say (Aborted).  This is not the cause of the issue, as even when all files come back normally, the form is still messed up.

If anyone has an ideas, I'd love some help, as it makes no sense that the same code would work on one machine, but not another.

[Anurag]

Hi @JohnB

Make sure you have defined a IFrameCommunicator page  in your app . 

For an example of an IFrameCommunicator page and more information about the messages passed, see our sample IFrameCommunicator.html in our sample application on GitHub.

Hope it helps !!! 

[angie]

Hello,

Based on the screenshot you sent, it looks like Angular is not loaded correctly.

Please clean the cache from your browser and try again.

By the way, which browser (IE?) and browser version you are using?

Plus, are you using the same browser of same version on both of your machines?

If the form is still not loaded correctly after you clear your cache, please send us the information such as the browser, browser version, and screenshot of "Network" under developer tools, based on which we could help more.

Thanks! 

[JohnB]

 Anurag/Angie,

Thanks for the replies.  Anurag, I do have an IFrameCommunicator.html file in place, and I added a bunch of alerts, to debug, but I get nothing. (From IE 11)

I'm trying this on Internet Explorer, when I get the error.  It seems to be working from Edge, Chrome, and FireFox.  Safari won't load the form at all, not even with the placeholders.  Internet Explorer 11 shows the full form with the placeholders.  As I said, the network tab shows some strange behaviors.  For example, I refreshed the page, clicked Pay, then I got this: (First screenshot)

https://imgur.com/a/lvQNk

After a couple of refreshes, I no longer get the "Aborted", and I got the proper result for each of the included files, but the form is still screwed up.  The second screenshot shows the results when everything downloaded properly.

[Shoagraw]

Hi John,

Please check these also:-

1.  Are you seeing any errors in console
2.  Is there any meta tag in parent page like <meta http-equiv="X-UA-Compatible" content="IE=8" />
3.  Check browser also if its gone to document mode 8