feat(PAYMENTS-21797): add form submit action

README.md

@@ -151,6 +151,12 @@ declare const headlessCheckout: {
      * Allows you to prepare components before a user can interact with them.
      */
     activate(): void;
+
+    /**
+     * Initiate form submit.
+     * To get submit action response listen onNextAction events
+     */
+    submit(): void;
   };
 
   /**

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

@@ -10,6 +10,7 @@ import { FormStatus } from '../../core/status/form-status.enum';
 import { noopStub } from '../../tests/stubs/noop.stub';
 import { headlessCheckoutAppUrl } from './environment';
 import { ThemesLoader } from '../../core/customization/themes-loader';
+import { submitHandler } from './post-messages-handlers/submit/submit.handler';
 
 const mockMessage: Message = {
   name: EventName.initPayment,
@@ -247,4 +248,13 @@ describe('HeadlessCheckout', () => {
     headlessCheckout.form.onFieldsStatusChange(noopStub);
     expect(spy).toHaveBeenCalled();
   });
+
+  it('Should init', async () => {
+    const spy = spyOn(postMessagesClient, 'send');
+    await headlessCheckout.form.submit();
+    expect(spy).toHaveBeenCalledWith(
+      { name: EventName.submitForm },
+      submitHandler,
+    );
+  });
 });

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

@@ -39,6 +39,7 @@ import { getCountryListHandler } from './post-messages-handlers/get-country-list
 import { CountryResponse } from '../../core/country-response.interface';
 import { FormLoader } from '../../core/form/form-loader';
 import { InitialOptions } from './initial-options.interface';
+import { submitHandler } from './post-messages-handlers/submit/submit.handler';
 
 @singleton()
 export class HeadlessCheckout {
@@ -138,8 +139,18 @@ export class HeadlessCheckout {
     activate: (): void => {
       this.formStatus = FormStatus.active;
     },
+
     setupAndAwaitFieldsLoading: async (fields: Field[]): Promise<void> =>
       this.formLoader.setupAndAwaitFieldsLoading(fields),
+
+    submit: async (): Promise<void> => {
+      await this.postMessagesClient.send(
+        {
+          name: EventName.submitForm,
+        },
+        submitHandler,
+      );
+    },
   };
 
   public get formConfiguration(): FormConfiguration | undefined {
@@ -411,8 +422,12 @@ export class HeadlessCheckout {
   private async listenCoreIframeLoading(): Promise<void> {
     return new Promise((resolve) => {
       const handler = (event: MessageEvent): void => {
+        if (typeof event.data !== 'string') {
+          return;
+        }
+
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        if (JSON.parse(event.data as string).name === EventName.isReady) {
+        if (JSON.parse(event.data).name === EventName.isReady) {
           resolve();
           this.window.removeEventListener('message', handler);
         }

src/features/headless-checkout/post-messages-handlers/submit/submit.handler.spec.ts

@@ -0,0 +1,19 @@
+import { EventName } from '../../../../core/event-name.enum';
+import { Message } from '../../../../core/message.interface';
+import { PaymentMethod } from '../../../../core/payment-method.interface';
+import { submitHandler } from './submit.handler';
+
+const mockMessage: Message<{ methods: PaymentMethod[] }> = {
+  name: EventName.submitForm,
+  data: { methods: [] },
+};
+describe('submitHandler', () => {
+  it('Should handle data', () => {
+    expect(submitHandler(mockMessage)).toEqual({
+      isHandled: true,
+    });
+  });
+  it('Should return null', () => {
+    expect(submitHandler({ name: EventName.initPayment })).toBeNull();
+  });
+});

src/features/headless-checkout/post-messages-handlers/submit/submit.handler.ts

@@ -0,0 +1,14 @@
+import { Handler } from '../../../../core/post-messages-client/handler.type';
+import { Message } from '../../../../core/message.interface';
+import { EventName } from '../../../../core/event-name.enum';
+
+export const submitHandler: Handler<void> = (
+  message: Message,
+): { isHandled: boolean } | null => {
+  if (message.name === EventName.submitForm) {
+    return {
+      isHandled: true,
+    };
+  }
+  return null;
+};

src/features/headless-checkout/web-components/submit-button/default-submit-button/default-submit-button.component.ts

@@ -5,7 +5,7 @@ import { EventName } from '../../../../../core/event-name.enum';
 import { HeadlessCheckout } from '../../../headless-checkout';
 import { DefaultSubmitButtonAttributes } from './default-submit-button-attributes.enum';
 import { getSubmitButtonTemplate } from './default-submit-button.template';
-import { defaultSubmitButtonHandler } from './default-submit-button.handler';
+import { submitHandler } from '../../../post-messages-handlers/submit/submit.handler';
 import { Message } from '../../../../../core/message.interface';
 import { Handler } from '../../../../../core/post-messages-client/handler.type';
 import { isSubmitButtonLoadingMessage } from '../../../../../core/guards/submit-button-loading-message.guard';
@@ -75,7 +75,7 @@ export class DefaultSubmitButtonComponent extends WebComponentAbstract {
 
         void this.postMessagesClient.send(
           { name: EventName.submitForm },
-          defaultSubmitButtonHandler,
+          submitHandler,
         );
 
         this.render();