Accept Hosted in iFrame

[dj1]

We’ve recently implemented the Accept Hosted Payment Page (in an iFrame) on a test version of our client’s site, and it’s working great everywhere except on Chrome browsers in Windows.  The payment page loads OK, but after filling in all the fields and clicking the payment button, I see the button changes to “Processing…” and the payment goes through to the sandbox merchant account OK, but the page just hangs there instead of going to the next step in the transactResponse case.  We initially discovered this console error...

Uncaught DOMException: Blocked a frame with IFrameCommunicator.html:27 origin "https://www.vtfwdsales.com” from accessing a cross-origin frame. at callParentFunction (https://www.vtfwdsales.com/online_test/IFrameCommunicator.html:27:28) at receiveMessage (https://www.vtfwdsales.com/online_test/IFrameCommunicator.html:33:6)

I then tried a solution that I found where others had resolved a similar issue.  Sorry, I wanted to include the link here, but I'm not finding it now.  The fix in that case was adding this to .htaccess...

Header set Content-Security-Policy "frame-ancestors 'self' *.vtfwdsales.com *.authorize.net"

We continue to have the same issue with the page hanging, but the console message has changed to...

Refused to frame 'https://www.vtfwdsales.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.vtfwdsales.com *.authorize.net".

Any help is greatly appreciated.  Let me know if you would like me to provide any other details.

[marine2026]

Try setting a cookie with attributes:

Path
HttpOnly;

SameSite=None

Secure

set response header("Set-Cookie"; "ACTIVE_SESSIONID="+SESSION ID+"; Path=/; HttpOnly; SameSite=None; Secure")

[muhammad_gsp]

We are having a similar problem. This is working fine in IE but failing in Chrome only. I found that when we click Confirm Order (iFrame submit), Authorize.NET is calling Google analytics which is throwing ActiveXObject undefined exception. I believe that this aborts the processing and blocks the response coming back to response page.

Note that Auth is captured in Authorize.net and we also receive the email, just the redirect fails.

[dj1]

Thanks so much for the suggestion. I'd love to give that a try, but unfortunately I'm not familiar with set response header, so not sure where to place it, etc.  Can you elaborate?

Thanks!

[dj1]

No need to elaborate (I think). I ended up using PHP to set that cookie for ACTIVE_SESSIONID.  Unfortunately, it did not seem to make any difference.  I'm still getting the same errors and the page still does not work correctly in Chrome.  Any other thoughts out there?

[beverlyrogers]

Accept Hosted is a payment processing solution from Authorize.net that allows merchants to accept payments on their own website without having to redirect customers to a third-party payment page. Accept Hosted can be integrated into a merchant's website using a variety of methods, including iFrames.

To accept hosted in an iFrame, merchants will need to follow these steps:

1. Create an Accept Hosted account and obtain a token.
2. Generate an HTML code snippet to embed the Accept Hosted payment form in an iFrame.
3. Add the HTML code snippet to the merchant's website where they want the payment form to appear.
4. Add a button to the merchant's website that triggers the iframe communication.
5. Submit the form token in an HTTP POST to Authorize.net.

Once the form token is submitted, the Accept Hosted payment form will appear in the iFrame. Customers can then enter their payment information and submit the form. Once the payment is processed, the customer will be redirected to the merchant's website.

Here are some additional tips for accepting hosted in an iFrame:

• The iFrame must be hosted on the same domain as the merchant's website.
• The iFrame must be embedded using HTTPS.
• The merchant must use the iframe communicator to communicate with Authorize.net.
• The merchant must use the correct target and action attributes for the form.
• The merchant may need to add CSS styles to adjust the size and location of the iFrame.

[dj1]

Thank you for your reply. We are following all of those steps/tips already. It’s working great everywhere except on Chrome browsers in Windows and we still don't know why. Even though the Auth Net developer's guide lists iFrame as an option for Accept Hosted implementation, one of the Auth Net support reps mentioned "Authorize.Net went through security updates at the beginning of the year and now no longer works with iFrame's systems" and "We actually do not support iFrame". So I'm curious... does anybody have Accept Hosted running in an iFrame and is it still working in Chrome on Windows? If so, was there anything you needed to do differently after those security updates at the beginning of the year?

[dj1]

Unfortunately, I never got an answer to this.  We ended up going with AcceptUI instead.