Merge pull request #64 from xsolla/PAYMENTS-18338

feat(PAYMENTS-18338): add apple-pay redirect integration
xsolla · Mar 12, 2024 · 35f9638 · 35f9638
2 parents dd8fbf9 + 8ba0a35
commit 35f9638
Show file tree

Hide file tree

Showing 30 changed files with 673 additions and 187 deletions.
diff --git a/src/core/event-name.enum.ts b/src/core/event-name.enum.ts
@@ -1,4 +1,5 @@
 export const enum EventName {
+  isReady = 'isReady',
   error = 'error',
   initPayment = 'initPayment',
   initForm = 'initForm',
@@ -28,4 +29,6 @@ export const enum EventName {
   finishLoadComponent = 'finishLoadComponent',
   getFormStatus = 'getFormStatus',
   applePayError = 'applePayError',
+  openApplePayPage = 'openApplePayPage',
+  submitApplePayForm = 'submitApplePayForm',
 }
diff --git a/src/core/guards/apple-pay/open-apple-pay-page.guard.spec.ts b/src/core/guards/apple-pay/open-apple-pay-page.guard.spec.ts
@@ -0,0 +1,14 @@
+import 'reflect-metadata';
+import { EventName } from '../../event-name.enum';
+import { isOpenApplePayPageEventMessage } from './open-apple-pay-page.guard';
+
+describe('Event message type guard', () => {
+  it('Should return true', () => {
+    expect(
+      isOpenApplePayPageEventMessage({ name: EventName.openApplePayPage })
+    ).toBeTruthy();
+  });
+  it('Should return false', () => {
+    expect(isOpenApplePayPageEventMessage({})).toBeFalsy();
+  });
+});
diff --git a/src/core/guards/apple-pay/open-apple-pay-page.guard.ts b/src/core/guards/apple-pay/open-apple-pay-page.guard.ts
@@ -0,0 +1,12 @@
+import { Message } from '../../message.interface';
+import { isEventMessage } from '../event-message.guard';
+import { EventName } from '../../event-name.enum';
+
+export const isOpenApplePayPageEventMessage = (
+  messageData: unknown
+): messageData is Message<{ redirectUrl: string } | null | undefined> => {
+  if (isEventMessage(messageData)) {
+    return messageData.name === EventName.openApplePayPage;
+  }
+  return false;
+};
diff --git a/src/core/web-components/web-component-tag-name.enum.ts b/src/core/web-components/web-component-tag-name.enum.ts
@@ -1,6 +1,7 @@
 export enum WebComponentTagName {
   TextComponent = 'psdk-text',
   SubmitButtonComponent = 'psdk-submit-button',
+  DefaultSubmitButtonComponent = 'psdk-default-submit-button',
   PaymentMethodsComponent = 'psdk-payment-methods',
   SavedMethodsComponent = 'psdk-saved-methods',
   PriceTextComponent = 'psdk-price-text',

diff --git a/src/core/web-components/web-components.map.ts b/src/core/web-components/web-components.map.ts
@@ -18,6 +18,7 @@ import { PaymentFormMessagesComponent } from '../../features/headless-checkout/w
 import { GooglePayButtonComponent } from '../../features/headless-checkout/web-components/pages/google-pay/google-pay-button.component';
 import { QrCodeComponent } from '../../features/headless-checkout/web-components/qr-code/qr-code.component';
 import { ApplePayComponent } from '../../features/headless-checkout/web-components/apple-pay/apple-pay.component';
+import { DefaultSubmitButtonComponent } from '../../features/headless-checkout/web-components/submit-button/default-submit-button/default-submit-button.component';
 
 export const webComponents: {
   [key in WebComponentTagName]: CustomElementConstructor;
@@ -41,4 +42,6 @@ export const webComponents: {
   [WebComponentTagName.GooglePayButtonComponent]: GooglePayButtonComponent,
   [WebComponentTagName.QrCodeComponent]: QrCodeComponent,
   [WebComponentTagName.ApplePayComponent]: ApplePayComponent,
+  [WebComponentTagName.DefaultSubmitButtonComponent]:
+    DefaultSubmitButtonComponent,
 };
diff --git a/src/features/headless-checkout/environment.ts b/src/features/headless-checkout/environment.ts
@@ -1,3 +1,4 @@
-export const headlessCheckoutAppUrl =
-  'https://secure.xsolla.com/headless-checkout';
+// export const headlessCheckoutAppUrl =
+//   'https://secure.xsolla.com/headless-checkout';
+export const headlessCheckoutAppUrl = 'https://localhost:4200';
 export const cdnUrl = 'https://cdn3.xsolla.com';
diff --git a/src/features/headless-checkout/headless-checkout.spec.ts b/src/features/headless-checkout/headless-checkout.spec.ts
@@ -8,6 +8,7 @@ import { LocalizeService } from '../../core/i18n/localize.service';
 import { getFinanceDetailsHandler } from './post-messages-handlers/get-finance-details.handler';
 import { FormStatus } from '../../core/status/form-status.enum';
 import { noopStub } from '../../tests/stubs/noop.stub';
+import { headlessCheckoutAppUrl } from './environment';
 
 const mockMessage: Message = {
   name: EventName.initPayment,
@@ -19,7 +20,6 @@ const mockHandler: Handler<void> = (): null => {
 };
 
 class MockIframeElement {
-  public src = '';
   public width = '';
   public height = '';
   public style = { border: '' };
@@ -46,6 +46,14 @@ describe('HeadlessCheckout', () => {
 
   beforeEach(() => {
     windowService = window;
+    spyOn(windowService, 'addEventListener').and.callFake(
+      (name: string, handlerWrapper: EventListenerOrEventListenerObject) => {
+        (handlerWrapper as (message: MessageEvent) => void)({
+          origin: headlessCheckoutAppUrl,
+          data: JSON.stringify({ name: EventName.isReady }),
+        } as MessageEvent);
+      }
+    );
     postMessagesClient = {
       init: stub,
       send: stub,
@@ -75,17 +83,16 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'init');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement,
+      () => new MockIframeElement() as unknown as HTMLIFrameElement
     );
-
     await headlessCheckout.init({ isWebview: false });
     expect(spy).toHaveBeenCalled();
   });
 
   it('Should init localization', () => {
     const localizeSpy = spyOn(
       localizeService,
-      'initDictionaries',
+      'initDictionaries'
     ).and.resolveTo();
 
     void headlessCheckout.init({ isWebview: false });
@@ -104,7 +111,7 @@ describe('HeadlessCheckout', () => {
     headlessCheckout.events.onCoreEvent(
       EventName.initPayment,
       mockHandler,
-      stub,
+      stub
     );
     expect(spy).toHaveBeenCalled();
   });
@@ -113,7 +120,7 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'listen');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement,
+      () => new MockIframeElement() as unknown as HTMLIFrameElement
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -145,7 +152,7 @@ describe('HeadlessCheckout', () => {
     await headlessCheckout.getFinanceDetails();
     expect(spy).toHaveBeenCalledWith(
       { name: EventName.financeDetails },
-      getFinanceDetailsHandler,
+      getFinanceDetailsHandler
     );
   });
 
@@ -166,7 +173,7 @@ describe('HeadlessCheckout', () => {
     spyOn(windowService.customElements, 'get').and.returnValue(undefined);
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement,
+      () => new MockIframeElement() as unknown as HTMLIFrameElement
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -175,11 +182,11 @@ describe('HeadlessCheckout', () => {
 
   it('Should web components not be redefined', async () => {
     spyOn(windowService.customElements, 'get').and.returnValue(
-      CustomElementMock,
+      CustomElementMock
     );
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement,
+      () => new MockIframeElement() as unknown as HTMLIFrameElement
     );
 
     const spy = spyOn(window.customElements, 'define');

diff --git a/src/features/headless-checkout/headless-checkout.ts b/src/features/headless-checkout/headless-checkout.ts
@@ -55,7 +55,7 @@ export class HeadlessCheckout {
     onCoreEvent: <T>(
       eventName: EventName,
       handler: Handler<T>,
-      callback: (value?: T) => void,
+      callback: (value?: T) => void
     ): (() => void) => {
       return this.postMessagesClient.listen(eventName, handler, callback);
     },
@@ -68,6 +68,7 @@ export class HeadlessCheckout {
      * @returns {Form} form details
      */
     init: async (configuration: FormConfiguration): Promise<Form> => {
+      this._formConfiguration = configuration;
       this.formStatus = FormStatus.pending;
 
       const msg: Message = {
@@ -84,7 +85,7 @@ export class HeadlessCheckout {
           }
           this.formSpy.formWasInit = true;
           this.formStatus = FormStatus.active;
-        }),
+        })
       ) as Promise<Form>;
     },
 
@@ -96,12 +97,12 @@ export class HeadlessCheckout {
           if (nextAction) {
             callbackFn(nextAction);
           }
-        },
+        }
       );
     },
 
     onFieldsStatusChange: (
-      callbackFn: (fieldsStatus: FormFieldsStatus) => void,
+      callbackFn: (fieldsStatus: FormFieldsStatus) => void
     ): void => {
       this.postMessagesClient.listen<FormFieldsStatus>(
         EventName.formFieldsStatusChanged,
@@ -110,7 +111,7 @@ export class HeadlessCheckout {
           if (fieldsStatus) {
             callbackFn(fieldsStatus);
           }
-        },
+        }
       );
     },
 
@@ -128,6 +129,9 @@ export class HeadlessCheckout {
       this.formStatus = FormStatus.active;
     },
   };
+  public get formConfiguration(): FormConfiguration | undefined {
+    return this._formConfiguration;
+  }
 
   private formStatus: FormStatus = FormStatus.undefined;
   private isWebView?: boolean;
@@ -136,13 +140,14 @@ export class HeadlessCheckout {
   private coreIframe!: HTMLIFrameElement;
   private errorsSubscription?: () => void;
   private readonly headlessAppUrl = headlessCheckoutAppUrl;
+  private _formConfiguration?: FormConfiguration;
 
   public constructor(
     private readonly window: Window,
     private readonly postMessagesClient: PostMessagesClient,
     private readonly localizeService: LocalizeService,
     private readonly headlessCheckoutSpy: HeadlessCheckoutSpy,
-    private readonly formSpy: FormSpy,
+    private readonly formSpy: FormSpy
   ) {}
 
   public async init(environment: {
@@ -156,6 +161,7 @@ export class HeadlessCheckout {
 
     await this.localizeService.initDictionaries();
 
+    this.postMessagesClient.init(this.coreIframe, this.headlessAppUrl);
     await this.setupCoreIframe();
     this.defineComponents();
 
@@ -165,7 +171,7 @@ export class HeadlessCheckout {
       getErrorHandler,
       (error) => {
         throw new Error(error);
-      },
+      }
     );
   }
 
@@ -194,7 +200,7 @@ export class HeadlessCheckout {
     return this.postMessagesClient.send<void>(msg, (message) =>
       setTokenHandler(message, () => {
         this.headlessCheckoutSpy.appWasInit = true;
-      }),
+      })
     );
   }
 
@@ -204,7 +210,7 @@ export class HeadlessCheckout {
         name: EventName.setSecureComponentStyles,
         data: styles,
       },
-      setSecureComponentStylesHandler,
+      setSecureComponentStylesHandler
     );
   }
 
@@ -219,7 +225,7 @@ export class HeadlessCheckout {
 
     return this.postMessagesClient.send<FinanceDetails | null>(
       msg,
-      getFinanceDetailsHandler,
+      getFinanceDetailsHandler
     ) as Promise<FinanceDetails | null>;
   }
 
@@ -243,7 +249,7 @@ export class HeadlessCheckout {
 
     return this.postMessagesClient.send<PaymentMethod[]>(
       msg,
-      getRegularMethodsHandler,
+      getRegularMethodsHandler
     ) as Promise<PaymentMethod[]>;
   }
 
@@ -263,7 +269,7 @@ export class HeadlessCheckout {
 
     return this.postMessagesClient.send<PaymentMethod[]>(
       msg,
-      getQuickMethodsHandler,
+      getQuickMethodsHandler
     ) as Promise<PaymentMethod[]>;
   }
 
@@ -274,7 +280,7 @@ export class HeadlessCheckout {
 
     return this.postMessagesClient.send<SavedMethod[]>(
       msg,
-      getSavedMethodsHandler,
+      getSavedMethodsHandler
     ) as Promise<SavedMethod[]>;
   }
 
@@ -285,7 +291,7 @@ export class HeadlessCheckout {
 
     return this.postMessagesClient.send<UserBalance>(
       msg,
-      getUserBalanceHandler,
+      getUserBalanceHandler
     ) as Promise<UserBalance>;
   }
 
@@ -298,7 +304,7 @@ export class HeadlessCheckout {
     };
 
     return this.postMessagesClient.send<Status>(msg, (message) =>
-      getPaymentStatusHandler(message),
+      getPaymentStatusHandler(message)
     ) as Promise<Status>;
   }
 
@@ -311,10 +317,19 @@ export class HeadlessCheckout {
     this.coreIframe.src = `${this.headlessAppUrl}/core`;
     this.coreIframe.name = 'core';
     this.window.document.body.appendChild(this.coreIframe);
+    return this.listenCoreIframeLoading();
+  }
+
+  private async listenCoreIframeLoading(): Promise<void> {
     return new Promise((resolve) => {
-      this.coreIframe.onload = () => {
-        resolve();
+      const handler = (event: MessageEvent): void => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (JSON.parse(event.data as string).name === EventName.isReady) {
+          resolve();
+          this.window.removeEventListener('message', handler);
+        }
       };
+      this.window.addEventListener('message', handler);
     });
   }
 

diff --git a/...es/headless-checkout/post-messages-handlers/apple-pay/open-apple-pay-page.handler.spec.ts b/...es/headless-checkout/post-messages-handlers/apple-pay/open-apple-pay-page.handler.spec.ts
@@ -0,0 +1,26 @@
+import { Message } from '../../../../core/message.interface';
+import { EventName } from '../../../../core/event-name.enum';
+import { openApplePayPageHandler } from './open-apple-pay-page.handler';
+
+const mockMessage: Message<{ redirectUrl: string } | null | undefined> = {
+  name: EventName.openApplePayPage,
+  data: {
+    redirectUrl: 'url',
+  },
+};
+
+describe('openApplePayPageHandler', () => {
+  it('Should handle data', () => {
+    expect(openApplePayPageHandler(mockMessage)).toEqual({
+      isHandled: true,
+      value: {
+        redirectUrl: 'url',
+      },
+    });
+  });
+  it('Should return null', () => {
+    expect(
+      openApplePayPageHandler({ name: EventName.getSavedMethods })
+    ).toBeNull();
+  });
+});