test

Author: roshan-gorasia-cko

src/apm/references.ts

@@ -34,6 +34,7 @@
 /// <reference path="views/NextSteps.ts" />
 /// <reference path="views/Pending.ts" />
 /// <reference path="views/Redirect.ts" />
+/// <reference path="views/PopupBlockedFallback.ts" />
 /// <reference path="views/CancelRequest.ts" />
 /// <reference path="views/utils/render-elements.ts" />
 /// <reference path="views/utils/form.ts" />

src/apm/views/PopupBlockedFallback.ts

@@ -0,0 +1,38 @@
+module ProcessOut {
+  const { div } = elements
+
+  interface PopupBlockedFallbackProps {
+    config: APIRedirectBase & Partial<PaymentContext>
+    onRetry: () => void
+  }
+
+  /**
+   * Renders the Pay button UI inside the popup-blocked overlay modal.
+   * Used when a headless redirect popup is blocked by the browser — this view
+   * is mounted into a fresh APMPageImpl overlaid on document.body so it is
+   * always visible regardless of the merchant's container visibility.
+   */
+  export class APMViewPopupBlockedFallback extends APMViewImpl<PopupBlockedFallbackProps> {
+    render() {
+      const redirectLabel = `Pay ${formatCurrency(this.props.config.invoice.amount, this.props.config.invoice.currency)}`
+      return (
+        Main({
+          config: this.props.config,
+          className: 'redirect-page',
+          hideAmount: true,
+          buttons: [
+            Button({ onclick: this.props.onRetry }, redirectLabel),
+            ContextImpl.context.confirmation.allowCancelation
+              ? CancelButton({ config: this.props.config })
+              : null
+          ]
+        },
+          div({ className: 'heading-container' },
+            Header('Continue to payment'),
+            SubHeader('Click the button below to complete your payment'),
+          )
+        )
+      )
+    }
+  }
+}

src/apm/views/Redirect.ts

@@ -9,6 +9,10 @@ module ProcessOut {
     /** After a retryable headless error (e.g. pop-up blocked), show the normal Pay / Cancel UI. */
     private headlessManualFallback = false
 
+    /** Overlay mounted on document.body when popup is blocked in headless mode. */
+    private popupBlockedOverlayEl: HTMLElement | null = null
+    private popupBlockedOverlayPage: APMPageImpl | null = null
+
     styles = css`
       .redirect-headless-loading {
         justify-content: center;
@@ -34,6 +38,44 @@ module ProcessOut {
       }
     }
 
+    private showPopupBlockedFallbackOverlay() {
+      // Full-screen backdrop with centered content card
+      const overlay = document.createElement('div')
+      overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483647;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;'
+      document.body.appendChild(overlay)
+      this.popupBlockedOverlayEl = overlay
+
+      // Inner wrapper gives APMPageImpl a bounded container to render into
+      const content = document.createElement('div')
+      content.style.cssText = 'width:100%;max-width:400px;'
+      overlay.appendChild(content)
+
+      const overlayPage = new APMPageImpl(content)
+      this.popupBlockedOverlayPage = overlayPage
+
+      overlayPage.render(APMViewPopupBlockedFallback, {
+        config: this.props.config,
+        onRetry: () => {
+          this.removePopupBlockedFallbackOverlay()
+          this.handleRedirectClick()
+        },
+      })
+
+      // Auto-clean up when the payment reaches a terminal state
+      const remove = () => this.removePopupBlockedFallbackOverlay()
+      ContextImpl.context.events.on('success', remove)
+      ContextImpl.context.events.on('failure', remove)
+      ContextImpl.context.events.on('payment-cancelled', remove)
+    }
+
+    private removePopupBlockedFallbackOverlay() {
+      if (this.popupBlockedOverlayEl) {
+        this.popupBlockedOverlayEl.remove()
+        this.popupBlockedOverlayEl = null
+        this.popupBlockedOverlayPage = null
+      }
+    }
+
     handleRedirectClick() {
       ContextImpl.context.events.emit('redirect-initiated')
       const pm = this.props.config.payment_method
@@ -64,16 +106,16 @@ module ProcessOut {
             if (!this.headlessManualFallback && failure.code === 'customer.popup-blocked') {
               console.warn('[PO] Redirect: popup blocked on headless first attempt — activating manual fallback UI')
               this.headlessManualFallback = true
-              // Emit before forceUpdate so the merchant can make their container
-              // visible (e.g. un-hide an invisible host) before the SDK paints
-              // the Pay button inside it. retry() is a bound handleRedirectClick
-              // — the merchant must call it from a real user-gesture handler so
-              // the browser grants popup permission.
+              // Show the SDK's built-in Pay button in an overlay on document.body so it
+              // is visible even when the merchant's container is hidden (invisible host flow).
+              this.showPopupBlockedFallbackOverlay()
+              // Also emit the event so merchants who want custom UI can intercept it.
+              // retry() is a bound handleRedirectClick — must be called from a real
+              // user-gesture handler so the browser grants popup permission.
               ContextImpl.context.events.emit('redirect-popup-blocked', {
                 retry: this.handleRedirectClick.bind(this),
               })
-              console.warn('[PO] Redirect: emitted redirect-popup-blocked, calling forceUpdate')
-              this.forceUpdate()
+              console.warn('[PO] Redirect: emitted redirect-popup-blocked, overlay mounted')
               return
             }
             if (this.headlessManualFallback) {