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 operate with 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 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 the drag-and-drop (which is required only for the 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 and 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.