diff --git a/modules/rcart/components/folk-payment-page.ts b/modules/rcart/components/folk-payment-page.ts index 504f820..64fcdd3 100644 --- a/modules/rcart/components/folk-payment-page.ts +++ b/modules/rcart/components/folk-payment-page.ts @@ -23,6 +23,8 @@ class FolkPaymentPage extends HTMLElement { private cardEmail = ''; private cardLoading = false; private transakUrl = ''; + private transakEnv: 'STAGING' | 'PRODUCTION' = 'PRODUCTION'; + private transakPopup: Window | null = null; // Wallet tab state private walletProviders: any[] = []; @@ -64,6 +66,7 @@ class FolkPaymentPage extends HTMLElement { disconnectedCallback() { this.stopPolling(); this.walletDiscovery?.stop?.(); + window.removeEventListener('message', this.handleTransakMessage); } private getApiBase(): string { @@ -148,10 +151,28 @@ class FolkPaymentPage extends HTMLElement { }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Failed to create session'); + + this.transakEnv = data.env || 'PRODUCTION'; this.transakUrl = data.widgetUrl; // Listen for Transak postMessage events window.addEventListener('message', this.handleTransakMessage); + + // Staging blocks iframes (X-Frame-Options: sameorigin) — use popup + if (this.transakEnv === 'STAGING') { + this.transakPopup = window.open( + data.widgetUrl, + 'transak-payment', + 'width=450,height=700,scrollbars=yes,resizable=yes', + ); + // Poll for popup close (user cancelled) + const popupPoll = setInterval(() => { + if (this.transakPopup?.closed) { + clearInterval(popupPoll); + this.transakPopup = null; + } + }, 1000); + } } catch (e) { this.error = e instanceof Error ? e.message : String(e); } @@ -549,6 +570,17 @@ class FolkPaymentPage extends HTMLElement { private renderCardTab(): string { if (this.transakUrl) { + // Staging: Transak blocks iframes, show popup status instead + if (this.transakEnv === 'STAGING') { + return ` +
Transak payment opened in a new window.
+Complete the payment in the popup window. This page will update automatically.
+ +