Add headless APM Payment redirect mode

Author: roshan-gorasia-cko

docs/apm-ui-system.md

@@ -574,6 +574,11 @@ const apm = client.apm.authorization(container, {
     timeout: 900,                // Timeout in seconds (15 minutes)
     allowCancelation: true       // Allow cancellation during confirmation
   },
+
+  // Redirect step (web): skip intermediate Pay / “Continue to payment” UI (same idea as mobile enableHeadlessMode)
+  redirect: {
+    enableHeadlessMode: false,
+  },
 
   // Success screen settings
   success: {

src/apm/Context.ts

@@ -39,6 +39,16 @@ module ProcessOut {
       /** Whether user must take action to dismiss success screen (default: false) */
       requiresAction: boolean
     }
+
+    /**
+     * Client-side redirect behaviour (web APM). Aligns with mobile
+     * `RedirectConfiguration.enableHeadlessMode`: skip the intermediate
+     * “Continue to payment” / Pay button and open the PSP flow as soon as the
+     * redirect step is shown.
+     */
+    redirect?: {
+      enableHeadlessMode?: boolean
+    }
   }
 
   export type TokenizationUserData = TokenizationFlowData & FlowData

src/apm/index.ts

@@ -33,13 +33,17 @@ module ProcessOut {
             requiresAction: false,
             autoDismissDuration: 3,
             manualDismissDuration: 60,
-            ...data.success,
+            ...(data.success || {}),
           },
           confirmation: {
             requiresAction: false,
             timeout: MIN_15 / 1000,
             allowCancelation: true,
-            ...data.confirmation,
+            ...(data.confirmation || {}),
+          },
+          redirect: {
+            enableHeadlessMode: false,
+            ...(data.redirect || {}),
           },
           logger: {
             error: (options: Omit<Parameters<TelemetryClient['reportError']>[0], 'stack'>) => {

src/apm/views/Redirect.ts

@@ -6,26 +6,75 @@ module ProcessOut {
   }
 
   export class APMViewRedirect extends APMViewImpl<RedirectProps> {
+    /** After a retryable headless error (e.g. pop-up blocked), show the normal Pay / Cancel UI. */
+    private headlessManualFallback = false
+
+    styles = css`
+      .redirect-headless-loading {
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 8px;
+        min-height: 120px;
+      }
+    `
+
+    protected componentDidMount(): void {
+      const headless = ContextImpl.context.redirect && ContextImpl.context.redirect.enableHeadlessMode
+      if (headless && !this.headlessManualFallback) {
+        this.handleRedirectClick()
+      }
+    }
+
     handleRedirectClick() {
       ContextImpl.context.events.emit('redirect-initiated')
+      const pm = this.props.config.payment_method
+      const actionOptions = pm
+        ? new ActionHandlerOptions(
+            pm.gateway_name.toLowerCase(),
+            pm.logo && pm.logo.light_url ? pm.logo.light_url.raster : undefined,
+          )
+        : undefined
       ContextImpl.context.poClient.handleAction(
-        this.props.config.redirect.url, 
+        this.props.config.redirect.url,
         () => {
             ContextImpl.context.events.emit('redirect-completed')
             ContextImpl.context.page.load(APIImpl.getCurrentStep)
         },
         (err) => {
-          ContextImpl.context.events.emit('failure', {
-            failure: {
-              message: err.message,
-              code: err.code
+          const failure = {
+            message: err.message,
+            code: err.code,
+          }
+          const headless = ContextImpl.context.redirect && ContextImpl.context.redirect.enableHeadlessMode
+          if (headless) {
+            if (
+              !this.headlessManualFallback &&
+              (failure.code === 'customer.popup-blocked' || failure.code === 'customer.canceled')
+            ) {
+              this.headlessManualFallback = true
+              this.forceUpdate()
+              return
             }
-          })
-        }
+            ContextImpl.context.page.criticalFailure({
+              title: 'Could not open payment',
+              code: failure.code,
+              message: failure.message,
+            })
+            return
+          }
+          ContextImpl.context.events.emit('failure', { failure })
+        },
+        actionOptions,
       )
     }
 
     render() {
+      const headless = ContextImpl.context.redirect && ContextImpl.context.redirect.enableHeadlessMode
+      if (headless && !this.headlessManualFallback) {
+        return page({ className: 'redirect-headless-loading' }, Loader())
+      }
+
       const redirectLabel = `Pay ${formatCurrency(this.props.config.invoice.amount, this.props.config.invoice.currency)}`;
       return (
         Main({