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.
Do not use this iFrame setup for Crypto or Alternative Payment Methods. These flows do not require drag-and-drop.
Last updated