Shopify Billing

Retired Boards Appdev Billing

Topic summary

A developer is troubleshooting issues with cross-iframe communication in a Shopify app using window.postMessage.

The Problem:

  • The child component (iframe) sends a message via window.parent.postMessage('Request Billing', URL)
  • The parent component cannot receive this message properly
  • useEffect hook in the parent component fails to trigger on mount
  • The window object returns “undefined” when attempting to add event listeners

Technical Details:

  • Parent component uses useCallback to define the event listener function
  • Code attempts to add/remove event listeners for the ‘message’ event
  • The parent checks if typeof window !== 'undefined' before adding listeners

Current Status:
The issue remains unresolved. The code snippet shows the parent component’s event listener setup, but the communication between iframe and parent is not functioning as expected. No solutions or responses have been provided yet.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I tried to receive the EventListener from the child component (Iframe) through the window.parent.postMessage method. The issue is that I cannot use the useEffect (this useEffect didn’t trigger when the component mounted) in the parrent component (the root URL which contains the IFrame). In addition, the object window was always returned “undefined” when I used the “window.addEventListener” to trigger.

In the child component:

window.parent.postMessage('Request Billing', URL);

In the parent component:

const listenEvent = useCallback((event) => {
      if(event.data === 'Request Billing')
       {
          //do something
       }
  }, [...dependency]);

  useEffect(() => {
    console.log('useEffect called');
    if (typeof window !== 'undefined') {
      console.log('eventListener called');
      try {
        console.log('eventListener added');
        window.addEventListener('message', listenEvent);
      } catch (error) {
        console.log('eventListener error: ', error);
      }

      return () => {
        console.log('eventListener removed');
        window.removeEventListener('message', listenEvent);
      };
    }
    else {
      console.log('typeof', typeof window);
    }
  }, [listenEvent]);

Thanks for your help.

Best regards,