Accept Hosted payment form with IE11

[raviparmarce88]

Hi Team,

I have integrated accept hosted payment page with iframe and it is working fine with chrom and FF browser.

When we tried with IE11 found few issues.

Initially we were not able to open the hosted payment form in iframe itself then we set the document mode as 'edge' and it is opening currectly but here all text boxes are clickable but not able to edit or wirte anything. It seems cursor is defocusing.

Also Cancel button is inconsistently working (Most of time not working).

Can anyone please help me as it is urgent.

[NexusSoftware]

Do you have the same issue at : https://nexwebsites.com/authorizenet/ ?

I am there now with IE Edge and IE11 emulation and not seeing any issues.

Do you have a live URL to check?

[raviparmarce88]

Thanks @NexusSoftware

I have already checked at https://nexwebsites.com/authorizenet/ ? and mine is different one.

When i set document mode 'edge' i can open hosted payment page in iframe with popup and edit value also .

But when i close and reopen hosted payment form it opens correctly but not able to edit any value. My cursor is blinking somewhere else.

Its seems wiered....:(

[NexusSoftware]

Can you post your page code or a URL?

[raviparmarce88]

@NexusSoftware,

I am not sure what you exactly looking for and asking me to post ?

Could you please point out specific area so i can post that .

[NexusSoftware]

The source code of the page where your iframe is.

[raviparmarce88]

Its quite difficult to extract source code for iFrame.

Here my findings are:

- When I first time open payment form i can able to enter value. But without submitting details when I cancel and reopen the payment form it is behaving like this (defocusing the cursor)

- I have set the 'edge' for my particular parent page in which iframe is there. Because our application is legacy applicaiton where edge mode is not working. (Might be same thing happening with iFrame) (I am not sure how to do this and solve cursor defocusing issue)

Below is some more details and finding which I have regarding application :
1) We are using jsf1.2, reachface 3.x
2) Used the same javascript named as "popup.js" available in AN.
3) Used the same communicator script and page provided by AN.(I have compare with your given sample and it is same)
4)We are setting few values in response header:

X-UA-Compatible IE=edge
Expires Thu, 01 Jan 1970 00:00:00 GMT
Cache-Control no-cache, must-revalidate, max-age=0
Pragma no-cache
X-FRAME-OPTIONS SAMEORIGIN
Content-Type text/html;charset=UTF-8

Hope this will help to get the some idea.

[NexusSoftware]

Considering it is working fine in other implementations, It's not at all likely to be related to the form coming from Authorize.net.

There are some known issues with Richfaces and IE 11 : https://ruleoftech.com/2015/patching-richfaces-3-3-3-ajax-js-for-ie11

If all else fails, you could try forcing IE 11 to emulate IE 10 with the following meta tag.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>

[raviparmarce88]

@NexusSoftware

Thanks so much for your suggestion and good news is that it is working at some extent with IE9 onwards.

But here bad news is that Cancel button stop working here. Sometime it works and sometime it's not.

I have tried to debug the issue but no luck and nothing in console also. Here the funny thing is sometime its works (20%) and most of time it is not (80%) in IE browser (IE9 and above).

Let me know if you need more information.

Could you please suggest if you have any idea.

[SteveAtTrytn]

I am having the same issue with Edge.  It appears the 'cancel' message is inconsistently being sent.  Sometimes it works, others it does not.

Working example is hosted here:  https://trytn-staging.azurewebsites.net/authorize/

Link to communicator page:  https://trytn-staging.azurewebsites.net/IFrameCommunicator.html

Javascript:  https://trytn-staging.azurewebsites.net/bundles/trytnScripts?v=q1iv02mF2vvLhW9miapVsfOO5XPGLwFF-B69O... (search for CommunicationHandler.onReceiveCommunication)

To reproduce:

1) Browse https://trytn-staging.azurewebsites.net/authorize/

2) Click "Details" of "Wednesday Morning Dip"

3) Add a quantity of 1 adult and click "Book Now"

4) Enter buyer info, a participant name and click "Review & Checkout"

5) Click "Purchase".  Modal appears with Authorize.net payment form.

6) Click 'Cancel'.

Expected results:  Auhothorize.net should send a 'cancel' message so that it can be handled by the CommunicationHandler.

Actual results:  The page redirects to the cancelUrl that was provided in the getHostedPaymentPageRequest.  The 'cancel' message is not received by the iFrameCommuincator.

The same code works as expected in Chrome and Safari.