# Iframe Messages

#### Iframe Event Communication

The embebed request iframe emits a `postMessage` event to its parent window with `type: "request-status"`. This message includes the `requestId` and the `status` as a string ("*CANCELLED"*, "*FAILED"*, "*COMPLETED*", "*PENDING*", "*PROCESSING*", "*EXPIRED*").The parent window listens for these messages to update its UI in real-time.

 

**Example: Listening in the Parent Window**

```javascript
window.addEventListener("message", (event) => {
    // IMPORTANT: Verify event.origin for security!
    if (event.origin !== "https://vudy.me") return;

    const data = event.data;
    if (data && data.type === "request-status") {
        // Do whatever you want with the status and requestId
        console.log(status, requestId);
    }
});

```

 

**Example: Listening in the Parent WIndow (React)**

```tsx
"use client";

import { useEffect, useRef } from "react";

interface IframeWrapperProps {
  src: string;
  requestId: number;
  generatedId: string;
}

export function IframeWrapper({ src, requestId, generatedId }: IframeWrapperProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const handleMessage = (event: MessageEvent) => {
      if (event.data && typeof event.data === "object") {
        const { type, requestId, status } = event.data;
        
        if (type === "request-status") {
          // Do whatever you want with the status and requestId
          console.log(status, requestId);
        }
      }
    };

    // Clean up the event listener when the component unmounts
    window.addEventListener("message", handleMessage);
    return () => {
      window.removeEventListener("message", handleMessage);
    };
  }, [requestId, generatedId]);

  return (
    <div className="flex-1 w-full">
      <iframe
        ref={iframeRef}
        src={src}
        className="w-full h-full border-0 bg-transparent"
        allow="payment"
        width="100%"
        height="600px"
      />
    </div>
  );
} 
```

For broader real-time event handling, consider using **webhooks**.