fix(rcart): use popup for Transak in all environments

Transak production also sends X-Frame-Options: SAMEORIGIN, blocking
iframe embeds. Switch to popup window for all environments, not just
staging. Show "payment opened in new window" status with re-open button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-04-03 02:26:30 +00:00
parent 1b8fcbdf47
commit 3c801aecaf
1 changed files with 15 additions and 23 deletions

View File

@ -158,8 +158,7 @@ class FolkPaymentPage extends HTMLElement {
// Listen for Transak postMessage events
window.addEventListener('message', this.handleTransakMessage);
// Staging blocks iframes (X-Frame-Options: sameorigin) — use popup
if (this.transakEnv === 'STAGING') {
// Transak blocks iframes (X-Frame-Options: sameorigin) — always use popup
this.transakPopup = window.open(
data.widgetUrl,
'transak-payment',
@ -172,7 +171,6 @@ class FolkPaymentPage extends HTMLElement {
this.transakPopup = null;
}
}, 1000);
}
} catch (e) {
this.error = e instanceof Error ? e.message : String(e);
}
@ -570,8 +568,7 @@ class FolkPaymentPage extends HTMLElement {
private renderCardTab(): string {
if (this.transakUrl) {
// Staging: Transak blocks iframes, show popup status instead
if (this.transakEnv === 'STAGING') {
// Transak blocks iframes (X-Frame-Options: sameorigin) — show popup status
return `
<div class="tab-body" style="text-align:center">
<div class="transak-popup-status">
@ -581,11 +578,6 @@ class FolkPaymentPage extends HTMLElement {
</div>
</div>`;
}
return `
<div class="transak-container">
<iframe src="${this.transakUrl}" class="transak-iframe" allow="camera;microphone;payment" frameborder="0"></iframe>
</div>`;
}
return `
<div class="tab-body">