fix(events): prevent losing Apple Pay external window close event

examples/apple-pay/index.html

@@ -122,14 +122,6 @@ <h1>Apple pay</h1>
            * Refer to `examples/return.html` for more details.
            */
           returnUrl: 'http://return',
-
-          paymentMethodSettings: {
-            /**
-             * Enables applePayWindowOpened to handle edge cases related to external window openings;
-             * set to false by default.
-             */
-            enableExternalWindowOpenMessage: true,
-          },
         });
       }
 

src/core/form/form-configuration.interface.ts

@@ -1,6 +1,5 @@
 import { cardPid } from '../../features/headless-checkout/web-components/payment-methods/variables';
 import { XpsBoolean } from '../xps-boolean.enum';
-import { PaymentConfigurationApplePaySettings } from './types/apple-pay-form-configuration.interface';
 import { PaymentConfigurationCreditCardSettings } from './types/credit-card-form-configuration.interface';
 import { PaymentConfigurationGooglePaySettings } from './types/google-pay-form-configuration.interface';
 
@@ -27,5 +26,4 @@ interface PaymentConfigurationWithGeneralSettings
 export type FormConfiguration =
   | PaymentConfigurationCreditCardSettings
   | PaymentConfigurationGooglePaySettings
-  | PaymentConfigurationApplePaySettings
   | PaymentConfigurationWithGeneralSettings;

src/features/headless-checkout/headless-checkout.ts

@@ -42,8 +42,6 @@ import { InitialOptions } from './initial-options.interface';
 import { submitHandler } from './post-messages-handlers/submit/submit.handler';
 import { externalInputChangeValueHandler } from './post-messages-handlers/external-input-change-value/external-input-change-value.handler';
 import { isGooglePaySettingsGuard } from '../../core/form/types/is-google-pay-settings.guard';
-import { isApplePaySettingsGuard } from '../../core/form/types/is-apple-pay-settings.guard';
-import { PaymentConfigurationApplePaySettings } from '../../core/form/types/apple-pay-form-configuration.interface';
 import { PaymentConfigurationGooglePaySettings } from '../../core/form/types/google-pay-form-configuration.interface';
 
 @singleton()
@@ -507,11 +505,6 @@ export class HeadlessCheckout {
         this.getDefaultGooglePaySettings(configuration);
     }
 
-    if (isApplePaySettingsGuard(configuration)) {
-      configurationWithDefaultValues.paymentMethodSettings =
-        this.getDefaultApplePaySettings(configuration);
-    }
-
     return configurationWithDefaultValues;
   }
 
@@ -531,21 +524,4 @@ export class HeadlessCheckout {
         true,
     };
   }
-
-  private getDefaultApplePaySettings(
-    configuration: PaymentConfigurationApplePaySettings,
-  ): PaymentConfigurationApplePaySettings['paymentMethodSettings'] {
-    if (!configuration.paymentMethodSettings) {
-      return {
-        enableExternalWindowOpenMessage: false,
-      };
-    }
-
-    return {
-      ...configuration.paymentMethodSettings,
-      enableExternalWindowOpenMessage:
-        configuration.paymentMethodSettings?.enableExternalWindowOpenMessage ??
-        false,
-    };
-  }
 }

src/features/headless-checkout/web-components/apple-pay/apple-pay.component.ts

@@ -18,20 +18,18 @@ import { applePayQrClosedHandler } from '../../post-messages-handlers/apple-pay/
 import { applePayQrOpenedHandler } from '../../post-messages-handlers/apple-pay/apple-pay-qr-opened.handler';
 import { applePayButtonClickedHandler } from '../../post-messages-handlers/apple-pay/apple-pay-button-clicked.handler';
 import { closeExternalWindowHandler } from '../../post-messages-handlers/close-external-window.handler';
-import { openExternalWindowHandler } from '../../post-messages-handlers/open-external-window.handler';
-import { isApplePaySettingsGuard } from '../../../../core/form/types/is-apple-pay-settings.guard';
 
 export class ApplePayComponent extends SecureComponentAbstract {
   protected componentName: string | null = 'pages/apple-pay';
   private readonly applePayWindowName = 'HeadlessCheckout_PayStation_ApplePay';
-  private readonly externalWindowTimeoutMs = 5000;
   private readonly headlessCheckout: HeadlessCheckout;
   private readonly formSpy: FormSpy;
   private readonly window: Window;
   private applePayWindow?: Window | null;
   private readonly subscriptions: Array<() => void> = [];
-  private externalWindowTimeoutId?: number;
-  private isWaitingElementShown = false;
+  // eslint-disable-next-line no-magic-numbers
+  private readonly externalWindowCheckIntervalMs = 500;
+  private externalWindowCheckIntervalId?: ReturnType<typeof setInterval>;
 
   public constructor() {
     super();
@@ -110,20 +108,6 @@ export class ApplePayComponent extends SecureComponentAbstract {
       ),
     );
 
-    if (this.isExternalWindowOpenMessageEnabled) {
-      this.subscriptions.push(
-        this.headlessCheckout.events.onCoreEvent(
-          EventName.openExternalWindow,
-          openExternalWindowHandler,
-          () => {
-            this.notifyExternalWindowOpened();
-            this.clearExternalWindowTimeout();
-            this.setupWaitingPayment(true);
-          },
-        ),
-      );
-    }
-
     this.subscriptions.push(
       this.headlessCheckout.events.onCoreEvent(
         EventName.applePayButtonClicked,
@@ -148,9 +132,7 @@ export class ApplePayComponent extends SecureComponentAbstract {
 
   protected disconnectedCallback(): void {
     this.subscriptions.forEach((unsubscribe) => unsubscribe());
-    if (this.isExternalWindowOpenMessageEnabled) {
-      this.clearExternalWindowTimeout();
-    }
+    this.stopWindowCheckInterval();
   }
 
   protected getHtml(): string {
@@ -213,17 +195,13 @@ export class ApplePayComponent extends SecureComponentAbstract {
   }
 
   private drawWaitingElement(): void {
-    if (this.isWaitingElementShown) {
-      return;
-    }
     const waitingProcessingWrapper = document.createElement('div');
     waitingProcessingWrapper.classList.add(waitingProcessingClassname);
     waitingProcessingWrapper.innerHTML = getWaitingProcessingTemplate(
       i18next.t('status.processing.title'),
       i18next.t('status.processing.description'),
     );
     this.append(waitingProcessingWrapper);
-    this.isWaitingElementShown = true;
   }
 
   private removeWaitingElement(): void {
@@ -233,7 +211,6 @@ export class ApplePayComponent extends SecureComponentAbstract {
     if (waitingProcessingWrapper) {
       waitingProcessingWrapper.remove();
     }
-    this.isWaitingElementShown = false;
   }
 
   private openRedirectPage(redirectUrl: string): void {
@@ -242,15 +219,34 @@ export class ApplePayComponent extends SecureComponentAbstract {
       redirectUrl,
       this.applePayWindowName,
     );
-    if (this.isExternalWindowOpenMessageEnabled) {
-      this.startExternalWindowTimeout();
+
+    this.startWindowCheckInterval();
+  }
+
+  private startWindowCheckInterval(): void {
+    this.stopWindowCheckInterval();
+
+    this.externalWindowCheckIntervalId = setInterval(() => {
+      if (this.applePayWindow?.closed) {
+        this.stopWindowCheckInterval();
+        this.onApplePayWindowClosed();
+      }
+    }, this.externalWindowCheckIntervalMs);
+  }
+
+  private stopWindowCheckInterval(): void {
+    if (this.externalWindowCheckIntervalId) {
+      clearInterval(this.externalWindowCheckIntervalId);
+      this.externalWindowCheckIntervalId = undefined;
     }
   }
 
+  private onApplePayWindowClosed(): void {
+    this.destroyApplePayWindow(true);
+  }
+
   private destroyApplePayWindow(stopLoading?: boolean): void {
-    if (this.isExternalWindowOpenMessageEnabled) {
-      this.clearExternalWindowTimeout();
-    }
+    this.stopWindowCheckInterval();
     this.dispatchEvent(new CustomEvent(EventName.applePayWindowClosed));
 
     this.window.focus();
@@ -263,23 +259,6 @@ export class ApplePayComponent extends SecureComponentAbstract {
     }
   }
 
-  private startExternalWindowTimeout(): void {
-    this.clearExternalWindowTimeout();
-    const timeoutId = this.window.setTimeout(() => {
-      if (this.externalWindowTimeoutId === timeoutId) {
-        this.setupWaitingPayment(false);
-      }
-    }, this.externalWindowTimeoutMs);
-    this.externalWindowTimeoutId = timeoutId;
-  }
-
-  private clearExternalWindowTimeout(): void {
-    if (this.externalWindowTimeoutId !== undefined) {
-      this.window.clearTimeout(this.externalWindowTimeoutId);
-      this.externalWindowTimeoutId = undefined;
-    }
-  }
-
   private addStylesForQrCode(): void {
     const iframe = this.querySelector('#apple-pay-iframe');
 
@@ -295,25 +274,4 @@ export class ApplePayComponent extends SecureComponentAbstract {
     (iframe as HTMLElement).style.removeProperty('top');
     (iframe as HTMLElement).style.removeProperty('left');
   }
-
-  private notifyExternalWindowOpened(): void {
-    this.dispatchEvent(new CustomEvent(EventName.applePayWindowOpened));
-  }
-
-  private get isExternalWindowOpenMessageEnabled(): boolean {
-    const configuration = this.headlessCheckout.formConfiguration;
-
-    if (!configuration) {
-      return false;
-    }
-
-    if (!isApplePaySettingsGuard(configuration)) {
-      return false;
-    }
-
-    return (
-      configuration.paymentMethodSettings?.enableExternalWindowOpenMessage ??
-      false
-    );
-  }
 }

src/features/headless-checkout/web-components/payment-methods/variables.ts

@@ -2,5 +2,3 @@
 export const cardPid = 1380 as const;
 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
 export const googlePayPid = 3431 as const;
-// eslint-disable-next-line @typescript-eslint/no-magic-numbers
-export const applePayPid = 3175 as const;