Shopify Billing

[PhuocNguyen]

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,