click here const FORM_PAGE_URL = "https://YOUR-SITE.COM/payment-form-94/"; // <-- replace me const btn = document.getElementById('openFF94'); const modal = document.getElementById('ffModal'); const frame = document.getElementById('ffFrame'); const spin = document.getElementById('ffSpinner'); function openModal(){ // Set iframe src only when opening (prevents background loads & ensures fresh mount) if (!frame.getAttribute('src')) frame.setAttribute('src', FORM_PAGE_URL); modal.setAttribute('aria-hidden','false'); // Nudge layout so any payment iframes/elements size correctly requestAnimationFrame(()=> window.dispatchEvent(new Event('resize'))); // Show spinner until frame loads if (spin) spin.style.display = 'block'; } function closeModal(){ modal.setAttribute('aria-hidden','true'); // If you prefer to fully reload form each time, uncomment the next line: // frame.removeAttribute('src'); } btn?.addEventListener('click', openModal); modal?.addEventListener('click', (e)=>{ if (e.target.matches('[data-close], .ff-backdrop')) closeModal(); }); document.addEventListener('keydown', (e)=>{ if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') closeModal(); }); // Hide spinner once the embedded page is ready frame.addEventListener('load', ()=>{ if (spin) spin.style.display='none'; }); // Optional: auto-resize if same-origin and you emit height from inside the form page // In your /payment-form-94/ page, you can postMessage({type:'ff-resize',h:document.body.scrollHeight}, '*') window.addEventListener('message', (ev)=>{ try{ if (typeof ev.data === 'object' && ev.data && ev.data.type === 'ff-resize' && Number(ev.data.h)){ frame.style.height = Math.min(ev.data.h, window.innerHeight * 0.86) + 'px'; } }catch(e){} }); })();