How to Handle the Iframe Communicator Post Messages in a PWA/Headless commerce Environment.

[seebakannant]

I currently have a local Magento installation with the Authorize.net payment module, along with a Graph-commerce (headless e-commerce) integration for Magento that utilizes GraphQL for communication with the Magento site.

To incorporate a hosted payment form into the headless commerce setup, I leverage the GraphQL query "authnetcimHostedPaymentFormParams," which furnishes the necessary parameters for loading the Hosted Form iframe.

The subsequent step involves monitoring post messages using a communicator. Unfortunately, the Communicator Iframe is rendered with the Magento site domain rather than my headless commerce domain. This mismatch results in a different origin error, preventing me from effectively listening to post messages.

Upon inspecting the Authorize.net payment module, I discovered that the "communicatorUrl" is statically encrypted in the Iframe Params token, pointing to the Magento site URL.

I am seeking assistance in resolving the aforementioned issue. Specifically, I am looking for documentation that provides guidance on PWA/Headless integration for Authorize.net payments. Any relevant resources or support in addressing the domain origin error would be greatly appreciated.

Authnetcim version: 5.0.1 Magento version: 2.4.6-p3 PHP version: 8.1

[rhoerr]

Hi Seebakannan,

To make sure I understand the situation, is this accurate?:

• example.com running your PWA frontend
• backend.example.com or some other origin running your Magento backend

And the issue is that the Magento form params (as requested from backend.example.com) use Magento's configured store domain (backend.example.com) for the communicator, which is different from your PWA frontend and so unable to function as communicator.

I see a couple possible paths.

1. Give your PWA the ability to set its own communicator URL with the form params. We pass that along to Authorize.net, and it comes back to you in the encrypted iframe params. Upside: Total flexibility on PWA domains. Downside: Perhaps security if the payment form could be embedded into unauthorized domains.
2. Give a new Magento admin setting to configure a communicator URL per store, defaulting to the Magento store base URL like it does now.

Any thoughts or preference on that point? From my standpoint, #2 would be better from a control perspective, but limited if you have multiple PWA domains connected to a single store.

[seebakannant]

Hi Ryan Hoerr,

Thank you for offering a comprehensive overview of the possibilities. Your understanding is accurate.

Given these considerations, I lean towards Option #2 for its centralized control, which aligns with better security practices.

[rhoerr]

Thanks. We'll work on making that change to the extension. I can't guarantee timing of that, but hopefully within a couple weeks we can have it available on GitHub. If you need a solution sooner, you're welcome to attempt it and submit a PR.

Best,

[rhoerr]

@seebakannant , I've added a PR #2 to set the custom communicator URL as discussed. It'll be necessary for you to create the communicator page somewhere on your frontend, using the contents of https://github.com/ParadoxLabs-Inc/authnetcim/blob/master/view/base/templates/hosted/communicator.phtml . Would you kindly test this solution and confirm it works for your use case?

Thanks

[seebakannant]

Hi Ryan Hoerr,

Thanks for update. Sure i will check it.