Add dynamic height to Coinflow iframe

Dynamic Heigh
1const [height, setHeight] = useState<string>('500');
2
3const handleIframeMessages = useCallback(
4 ({data, origin}: {data: string; origin: string}) => {
5 if (!origin.includes('coinflow.cash')) return;
6
7 try {
8 const message = JSON.parse(data);
9 if (message.method !== 'heightChange') return;
10 setHeight(message.data);
11 } catch (e) {}
12 },
13 []
14);
15
16useEffect(() => {
17 if (!window) throw new Error('Window not defined');
18 window.addEventListener('message', handleIframeMessages);
19 return () => {
20 window.removeEventListener('message', handleIframeMessages);
21 };
22}, [handleIframeMessages]);
23
24<div style={{height: `${height}px`}}>
25 <iframe
26 allow={'payment'}
27 scrolling="no"
28 style={{height: '100%', width: '100%'}}
29 src={'https://sandbox.coinflow.cash/...' +'&useHeightChange=true'}
30 />
31</div>
Response Example
1{"success":true}

Add Dynamnic Height Handler to

This snippet will allow you to capture and utilize dynamic height when utilizing coinflow checkout links embedded in an iframe on your site.