Есть ли способ прослушивать события Angular Js в компонентах React

Question

Итак, я работаю над интеграцией стороннего платежного решения (Paydock) в наше приложение, основанное на React JS. Они относительно новые и объединяют несколько платежных решений под, скажем, Stripe и Paypal вместе.

Подойдя к реальной проблеме, у них есть виджет Paydock. Я считаю, что это какая-то оболочка на основе Angular над Iframe.

Это npm js docs https://www.npmjs.com/package/@paydock / client-sdk # w_HtmlMultiWidget

Post отправить, я заинтересован в прослушивании определенных событий, чтобы получить подтверждение и получить токен платежа, который можно отправить обратно в наши серверные службы для дальнейшей обработки

https://www.npmjs.com/package/@paydock / client-sdk # w_HtmlMultiWidget + on

И события здесь https://www.npmjs.com/package/@paydock / client-sdk # w_EVENT

Очевидно, а может быть, я просто недостаточно умен, я не могу слушайте эти события, если бы это были просто iframe, размещенные нашими компонентами React. Я бы добавил прослушиватель событий в message.

Я пробовал следить за деталями более подробно в codeandbox

https://codesandbox.io/s/wizardly-breeze-5p2hw

import React, { useCallback, useEffect, useLayoutEffect } from "react";
import { EventEmitter } from "eventemitter3";
import { HtmlMultiWidget } from "@paydock/client-sdk/widget";
import "./styles.css";

export default function App() {
  const widget = new HtmlMultiWidget(
    "#widget",
    "e5f5e6b8a93295f625f16264bcbcaf879b8dac8b",
    [
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcmVkZWZpbmVkX2ZpZWxkcyI6eyJnYXRld2F5X2lkIjoiNWVhNjkyMzRiOTc1ZTQ1NmExMTkxNTQ0IiwidHlwZSI6ImNhcmQifSwiZGVmaW5lZF9mb3JtX2ZpZWxkcyI6WyJmaXJzdF9uYW1lKiIsImxhc3RfbmFtZSoiLCJjYXJkX25hbWUiLCJjYXJkX251bWJlciIsImV4cGlyZV9tb250aCIsImV4cGlyZV95ZWFyIiwiY2FyZF9jY3YiXSwiYWxsb3dlZF9yZXNwb25zZV9kYXRhIjp7InVybCI6W10sImV2ZW50IjpbInBheW1lbnRfc291cmNlIl19LCJwdXJwb3NlIjoicGF5bWVudF9zb3VyY2UiLCJ3ZWJob29rX2Rlc3RpbmF0aW9uIjoiIiwic3VjY2Vzc19yZWRpcmVjdF91cmwiOiIiLCJlcnJvcl9yZWRpcmVjdF91cmwiOiIiLCJsYWJlbCI6IiIsIm1ldGEiOnt9LCJpYXQiOjE1ODgwNzMyOTl9.9vVzb8uGwsXo-5y7xL4YKyDrlJpPJUGxivl6YBqOVsc"
    ]
  );
  const eventEmitter = new EventEmitter();

  const handleWidgetEvent = useCallback(event => {
    // nothing gets logged the message logs are not from the paydock iframe
    console.log(event);
  }, []);
  useLayoutEffect(() => {
    // try to listen to the iframe message here
    // window.addEventListener("message", handleWidgetEvent);
    // try with document and window
    document.addEventListener("validation", handleWidgetEvent);
    window.addEventListener("validation", handleWidgetEvent);
    // try again listening to validation event
    widget.on("validation", handleWidgetEvent);
    widget.on("finish", handleWidgetEvent);
    // Even tried third party event emitter to listen to angular events
    eventEmitter.on("validation", handleWidgetEvent);
    return () => {
      // unmount to listen to the iframe message here
      // window.removeEventListener("message", handleWidgetEvent);

      // widget.on("finish", handleWidgetEvent);
      // widget.on("validation", handleWidgetEvent);
      eventEmitter.off("validation", handleWidgetEvent);

      // unmount document and window
      document.removeEventListener("validation", handleWidgetEvent);
      window.removeEventListener("validation", handleWidgetEvent);
    };
  });
  useEffect(() => {
    // try to listen to the widget event here by naturally useffect hook
    widget.on("validation", data => {
      console.log(data);
    });
    // try the finish even too
    widget.on("finish", data => {
      console.log(data);
    });
    // load the widget
    widget.load();
  }, [widget]);
  return (
    <div>
      <style>{"iframe {border: 0;width: 100%;height: 600px}"}</style>
      <div id="widget" />
    </div>
  );
}

Как видите, ни валидация, ни события fini sh не запускаются? Есть ли способ прослушивать эмиттер событий из компонентов angular js, к которым у нас нет доступа в компоненте React?

Ура