iFrame setup#

Basic setup#

IFrame integration is not an optimal solution as it entails various issues. The XGateway team recommends using a redirect to a new tab as a more stable option.

Still, iFrame is supported by the XGateway Checkout page. Make sure to give the iFrame proper access rights to allow it to operate with the camera and clipboard. Here is an example of how to display a generated invoice URL:

<iframe
  allow="clipboard-read; clipboard-write; camera*;"
  src="https://checkout.xgateway.dev/no/7f7c5880-0d4b-4154-b44c-37e898aa5a5e" 
/>

Drag-and-drop in an iFrame for SEPA Secure#

The basic setup does not support drag-and-drop during the KYC flow. When a user drags a file over an embedded KYC iFrame, the browser opens the file in a new tab instead of uploading it. This happens because the iFrame is loaded from a third-party domain, and the browser’s default behavior takes control before XGateway can intercept the event.

If you want to support drag-and-drop (which is required only for SEPA Secure payments), add a transparent overlay above the iFrame that intercepts the file drop and prevents the browser from hijacking the action. Here is an example in React TSX:

iFrame with an overlay

const iframeRef = useRef<HTMLIFrameElement>(null);
  const [isDragging, setIsDragging] = useState(false);

  useEffect(() => {
    const handleDragEnter = (e: DragEvent) => {
      setIsDragging(true);
    };

    const handleDragLeave = (e: DragEvent) => {
      setIsDragging(false);
    };

    const preventDefault = (e: DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const handleDrop = (e: DragEvent) => {
      preventDefault(e);
      setIsDragging(false);
    };

    document.addEventListener("dragenter", handleDragEnter);
    document.addEventListener("dragover", preventDefault);
    document.addEventListener("dragleave", handleDragLeave);
    document.addEventListener("drop", handleDrop);

    return () => {
      document.removeEventListener("dragenter", handleDragEnter);
      document.removeEventListener("dragover", preventDefault);
      document.removeEventListener("dragleave", handleDragLeave);
      document.removeEventListener("drop", handleDrop);
    };
  }, []);

  return (
    <div style={{ position: "relative", width: 400, height: 800 }}>
      {/* 👇 Overlay to block drop over iframe */}
      {isDragging && (
        <div
          onDragOver={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
          onDrop={(e) => {
            e.preventDefault();
            e.stopPropagation();
            setIsDragging(false);
          }}
          style={{
            position: "absolute",
            zIndex: 10,
            width: "100%",
            height: "100%",
            backgroundColor: "transparent",
          }}
        />
      )}

      <iframe
        allow="clipboard-read; clipboard-write; camera*;"
        height="800"
        ref={iframeRef}
        src="https://checkout.xgateway.dev/no/7f7c5880-0d4b-4154-b44c-37e898aa5a5e"
        style={{ border: "none", position: "absolute", top: 0, left: 0 }}
        width="400"
      />

Do not use this iFrame setup for Crypto or Alternative Payment Methods. These flows do not require drag-and-drop.