@justifi/webcomponents 4.8.1 → 4.8.3

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js

@@ -2,11 +2,15 @@ import { config } from "../../../../config";
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentMethodForm } from "../payment-method-form";
+import { PaymentMethodTypes } from "../../../api";
+import { FrameCommunicationService } from "../../../utils/frame-comunication-service";
+import { MessageEventType } from "../message-event-types";
+import packageJson from "../../../../package.json";
 describe('justifi-payment-method-form', () => {
     it('renders an iframe', async () => {
         const page = await newSpecPage({
             components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
+            template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.card, iframeOrigin: config.iframeOrigin })),
         });
         expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
@@ -14,70 +18,148 @@ describe('justifi-payment-method-form', () => {
     </justifi-payment-method-form>
   `);
     });
-    it('renders a card iframe when paymentMethodFormType is card', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card' }),
-        });
-        expect(page.root).toEqualHtml(`
+    describe('Test Props', () => {
+        it('renders a card iframe when paymentMethodFormType is card', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.card, iframeOrigin: config.iframeOrigin })),
+            });
+            expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
       <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card'></iframe>
     </justifi-payment-method-form>
   `);
-    });
-    it('renders a bank iframe when paymentMethodFormType is bank', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount' }),
         });
-        expect(page.root).toEqualHtml(`
+        it('renders a bank iframe when paymentMethodFormType is bank', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.bankAccount, iframeOrigin: config.iframeOrigin })),
+            });
+            expect(page.root).toEqualHtml(`
     <justifi-payment-method-form>
       <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount'></iframe>
     </justifi-payment-method-form>
   `);
-    });
-    it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onChange' }),
         });
-        expect(page.root).toEqualHtml(`
+        it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.bankAccount, paymentMethodFormValidationMode: 'onChange', iframeOrigin: config.iframeOrigin })),
+            });
+            expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount?validationMode=onChange'></iframe>
       </justifi-payment-method-form>
     `);
-    });
-    it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'bankAccount', paymentMethodFormValidationMode: 'onBlur' }),
         });
-        expect(page.root).toEqualHtml(`
+        it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.bankAccount, paymentMethodFormValidationMode: 'onBlur', iframeOrigin: config.iframeOrigin })),
+            });
+            expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
         <iframe id='justifi-payment-method-form-bankAccount' src='${config.iframeOrigin}/bankAccount?validationMode=onBlur'></iframe>
       </justifi-payment-method-form>
     `);
-    });
-    it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', iframeOrigin: '${config.iframeOrigin}' }),
         });
-        expect(page.root).toEqualHtml(`
+        it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.card, singleLine: true, iframeOrigin: config.iframeOrigin })),
+            });
+            expect(page.root).toEqualHtml(`
       <justifi-payment-method-form>
-        <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card'></iframe>
+        <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card?singleLine=true'></iframe>
       </justifi-payment-method-form>
     `);
+        });
     });
-    it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
-        const page = await newSpecPage({
-            components: [PaymentMethodForm],
-            template: () => h("justifi-payment-method-form", { paymentMethodFormType: 'card', singleLine: true }),
+    // Frame comunication service
+    describe('Frame Communication Service', () => {
+        it('removes message listener on disconnected callback', async () => {
+            const removeSpy = jest.spyOn(FrameCommunicationService.prototype, 'removeMessageListener');
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => h("justifi-payment-method-form", { iframeOrigin: config.iframeOrigin }),
+            });
+            // Manually set up the frameService to ensure it's available for the disconnectedCallback
+            page.rootInstance.frameService = new FrameCommunicationService(page.rootInstance.iframeElement, config.iframeOrigin);
+            page.rootInstance.frameService.addMessageListener(jest.fn()); // Add a dummy listener
+            // Manually call disconnectedCallback to simulate the component being removed
+            await page.rootInstance.disconnectedCallback();
+            // Check if removeMessageListener was called upon disconnection
+            expect(removeSpy).toHaveBeenCalled();
+            // Cleanup the spy
+            removeSpy.mockRestore();
+        });
+    });
+    // Event emission tests
+    describe('Event Emissions', () => {
+        it('emits paymentMethodFormReady when iframe sends ready event', async () => {
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => (h("justifi-payment-method-form", { paymentMethodFormType: PaymentMethodTypes.card, iframeOrigin: config.iframeOrigin })),
+            });
+            await page.waitForChanges();
+            const eventSpy = jest.fn();
+            page.win.addEventListener('paymentMethodFormReady', eventSpy);
+            // Ensure paymentMethodFormType is set and is a valid key in MessageEventType
+            const formType = page.rootInstance.paymentMethodFormType;
+            const eventType = MessageEventType[formType] ? MessageEventType[formType].ready : null;
+            if (!eventType) {
+                throw new Error(`Invalid paymentMethodFormType: ${formType}`);
+            }
+            const simulatedEventData = { eventType, data: {} };
+            page.rootInstance.dispatchMessageEvent({ data: simulatedEventData });
+            await page.waitForChanges();
+            expect(eventSpy).toHaveBeenCalled();
+        });
+    });
+    describe('Methods', () => {
+        it('calls postMessageWithResponseListener with correct parameters on tokenize', async () => {
+            // Mock the iframe and its contentWindow.postMessage
+            const mockPostMessage = jest.fn();
+            global.window = Object.create(window);
+            const url = "https://example.com";
+            Object.defineProperty(window, 'location', {
+                value: {
+                    href: url,
+                }
+            });
+            const mockedIframe = {
+                contentWindow: {
+                    postMessage: mockPostMessage,
+                }
+            };
+            const page = await newSpecPage({
+                components: [PaymentMethodForm],
+                template: () => h("justifi-payment-method-form", { iframeOrigin: url, paymentMethodFormType: PaymentMethodTypes.card }),
+            });
+            // Assign the mocked iframe to the component instance
+            page.rootInstance.iframeElement = mockedIframe;
+            // Replace the frameService with a mock that includes a mocked postMessageWithResponseListener
+            page.rootInstance.frameService = {
+                postMessage: jest.fn(),
+                postMessageWithResponseListener: jest.fn().mockResolvedValue({
+                // Mock the expected resolution value if your component expects any
+                }),
+                addMessageListener: jest.fn(),
+                removeMessageListener: jest.fn(),
+            };
+            const clientId = 'test-client-id';
+            const paymentMethodMetadata = { key: 'value' };
+            const account = 'test-account';
+            // Call the tokenize method
+            await page.rootInstance.tokenize(clientId, paymentMethodMetadata, account);
+            // Verify postMessageWithResponseListener was called with the expected parameters
+            expect(page.rootInstance.frameService.postMessageWithResponseListener)
+                .toHaveBeenCalledWith(MessageEventType.card.tokenize, expect.objectContaining({
+                clientId,
+                paymentMethodMetadata,
+                account,
+                componentVersion: packageJson.version,
+            }));
         });
-        expect(page.root).toEqualHtml(`
-      <justifi-payment-method-form>
-        <iframe id='justifi-payment-method-form-card' src='${config.iframeOrigin}/card?singleLine=true'></iframe>
-      </justifi-payment-method-form>
-    `);
     });
 });

package/dist/collection/components/payments-list/test/payments-list-core.spec.js

@@ -27,7 +27,7 @@ describe('payments-list-core', () => {
         const rows = justifiTable.shadowRoot.querySelectorAll('[data-test-id="table-row"]');
         expect(rows.length).toBe(mockPaymentsResponse.data.length);
         expect(mockPaymentsService.fetchPayments).toHaveBeenCalled();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('displays an error state on failed data fetch', async () => {
         const mockService = {
@@ -47,7 +47,7 @@ describe('payments-list-core', () => {
         await page.rootInstance.fetchData();
         await page.waitForChanges();
         expect(page.rootInstance.errorMessage).toBe('Fetch error');
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('emits payment-row-clicked event on row click', async () => {
         const mockPaymentsService = {

package/dist/collection/components/payments-list/test/payments-list.spec.js

@@ -8,7 +8,7 @@ describe('payments-list', () => {
             html: '<justifi-payments-list></justifi-payments-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('renders an error message when accountId is not provided', async () => {
         const page = await newSpecPage({
@@ -16,7 +16,7 @@ describe('payments-list', () => {
             html: '<justifi-payments-list auth-token="abc"></justifi-payments-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('renders an error message when authToken is not provided', async () => {
         const page = await newSpecPage({
@@ -24,6 +24,6 @@ describe('payments-list', () => {
             html: '<justifi-payments-list account-id="abc"></justifi-payments-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
 });

package/dist/collection/components/payout-details/test/payout-details-core.spec.js

@@ -19,7 +19,7 @@ describe('payout-details-core', () => {
         // Wait for any state changes to complete
         await page.waitForChanges();
         // Assert the loading state is visible in the snapshot
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('fetches payout details on connected callback', async () => {
         const mockService = {
@@ -42,7 +42,7 @@ describe('payout-details-core', () => {
         expect(page.rootInstance.payout).toEqual(expect.objectContaining({
             "id": mockPayoutDetailSuccess.id, // Verify the component state was updated with mock data
         }));
-        // expect(page.root).toMatchSnapshot(); // Verify the rendered output
+        expect(page.root).toMatchSnapshot(); // Verify the rendered output
     });
     it('handles fetch payout error correctly', async () => {
         // Mock the service method that gets called by getPayout
@@ -67,6 +67,6 @@ describe('payout-details-core', () => {
         await page.waitForChanges();
         // Assertions to verify the error handling
         expect(page.rootInstance.errorMessage).toBe('Error fetching payout details: Error: Fetch error');
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
 });

package/dist/collection/components/payout-details/test/payout-details.spec.js

@@ -8,6 +8,6 @@ describe('payout-details', () => {
             html: '<justifi-payout-details></justifi-payout-details>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
 });

package/dist/collection/components/payouts-list/test/payouts-list-core.spec.js

@@ -28,7 +28,7 @@ describe('payouts-list-core', () => {
         const shadowRoot = justifiTable.shadowRoot;
         const rows = shadowRoot.querySelectorAll('[data-test-id="table-row"]');
         expect(rows.length).toBe(4);
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('displays an error state on failed data fetch', async () => {
         const mockPayoutService = {
@@ -51,7 +51,7 @@ describe('payouts-list-core', () => {
         const shadowRoot = justifiTable.shadowRoot;
         const error = shadowRoot.querySelector('[data-test-id="table-error-state"]');
         expect(error).toBeTruthy();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('emits payout-row-clicked event on row click', async () => {
         const mockPayoutService = {

package/dist/collection/components/payouts-list/test/payouts-list.spec.js

@@ -8,7 +8,7 @@ describe('payouts-list', () => {
             html: '<justifi-payouts-list></justifi-payouts-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('renders an error message when accountId is not provided', async () => {
         const page = await newSpecPage({
@@ -16,7 +16,7 @@ describe('payouts-list', () => {
             html: '<justifi-payouts-list auth-token="abc"></justifi-payouts-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
     it('renders an error message when authToken is not provided', async () => {
         const page = await newSpecPage({
@@ -24,6 +24,6 @@ describe('payouts-list', () => {
             html: '<justifi-payouts-list account-id="abc"></justifi-payouts-list>',
         });
         await page.waitForChanges();
-        // expect(page.root).toMatchSnapshot();
+        expect(page.root).toMatchSnapshot();
     });
 });

package/dist/collection/utils/frame-comunication-service.js

@@ -0,0 +1,32 @@
+/**
+ * This approach decouples the communication logic from PaymentMethodForm component,
+ * making it cleaner, more maintainable, and easier to test
+ */
+export class FrameCommunicationService {
+    constructor(iframe, iframeOrigin) {
+        this.iframe = iframe;
+        this.iframeOrigin = iframeOrigin;
+    }
+    postMessage(eventType, payload) {
+        const message = Object.assign({ eventType }, payload);
+        this.iframe.contentWindow.postMessage(message, this.iframeOrigin);
+    }
+    addMessageListener(callback) {
+        window.addEventListener('message', callback);
+    }
+    removeMessageListener(callback) {
+        window.removeEventListener('message', callback);
+    }
+    postMessageWithResponseListener(eventType, payload) {
+        return new Promise((resolve) => {
+            const responseListener = (event) => {
+                if (event.data.eventType !== eventType)
+                    return;
+                window.removeEventListener('message', responseListener);
+                resolve(event.data.data);
+            };
+            window.addEventListener('message', responseListener);
+            this.postMessage(eventType, payload);
+        });
+    }
+}

package/dist/collection/utils/utils.js

@@ -150,3 +150,34 @@ export function snakeCaseToHumanReadable(snakeCaseStr) {
         .map(word => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
+export function composeQueryParams(values) {
+    const queryParams = values.map((value) => {
+        if (value === values[0]) {
+            return (value = `?${value}`);
+        }
+        else {
+            return (value = `&${value}`);
+        }
+    });
+    return queryParams.join('');
+}
+export async function loadFontsOnParent() {
+    const parent = document.body;
+    const fontsToLoad = extractComputedFontsToLoad();
+    if (!parent || !fontsToLoad) {
+        return null;
+    }
+    // Construct the font URL
+    const fontHref = `https://fonts.googleapis.com/css2?family=${fontsToLoad}&display=swap`;
+    // Check if a link element with the same href already exists
+    const existingFontLink = Array.from(document.querySelectorAll('link')).find((link) => link.href === fontHref);
+    // If the font link already exists, there's no need to append a new one
+    if (existingFontLink) {
+        return;
+    }
+    // This approach is needed to load the font in a parent of the component
+    const fonts = document.createElement('link');
+    fonts.rel = 'stylesheet';
+    fonts.href = fontHref;
+    parent.append(fonts);
+}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-28T21:53:13",
+  "timestamp": "2024-03-12T20:24:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.10.0",
@@ -1447,6 +1447,7 @@
           "reflectToAttr": false,
           "docs": "URL for the rendered iFrame. End-users need not use this.",
           "docsTags": [],
+          "default": "config.iframeOrigin",
           "values": [
             {
               "type": "string"
@@ -2826,6 +2827,7 @@
           "reflectToAttr": false,
           "docs": "URL for the rendered iFrame. End-users need not use this.",
           "docsTags": [],
+          "default": "config.iframeOrigin",
           "values": [
             {
               "type": "string"
@@ -3613,6 +3615,7 @@
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
+          "default": "true",
           "values": [
             {
               "type": "boolean"
@@ -3663,27 +3666,6 @@
           "optional": true,
           "required": false
         },
-        {
-          "name": "iframeOrigin",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "iframe-origin",
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "submitButtonText",
           "type": "string",
@@ -3767,28 +3749,6 @@
           ],
           "docs": "",
           "docsTags": []
-        },
-        {
-          "name": "loadFontsOnParent",
-          "returns": {
-            "type": "Promise<any>",
-            "docs": ""
-          },
-          "complexType": {
-            "signature": "() => Promise<any>",
-            "parameters": [],
-            "references": {
-              "Promise": {
-                "location": "global",
-                "id": "global::Promise"
-              }
-            },
-            "return": "Promise<any>"
-          },
-          "signature": "loadFontsOnParent() => Promise<any>",
-          "parameters": [],
-          "docs": "",
-          "docsTags": []
         }
       ],
       "events": [
@@ -3813,13 +3773,7 @@
           "docsTags": []
         }
       ],
-      "listeners": [
-        {
-          "event": "paymentMethodSelected",
-          "capture": false,
-          "passive": false
-        }
-      ],
+      "listeners": [],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -3868,16 +3822,22 @@
               "type": "string"
             }
           ],
-          "optional": true,
+          "optional": false,
           "required": false
         },
         {
           "name": "paymentMethodFormType",
-          "type": "\"bankAccount\" | \"card\"",
+          "type": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
           "complexType": {
-            "original": "'card' | 'bankAccount'",
-            "resolved": "\"bankAccount\" | \"card\"",
-            "references": {}
+            "original": "PaymentMethodTypes",
+            "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+            "references": {
+              "PaymentMethodTypes": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.ts::PaymentMethodTypes"
+              }
+            }
           },
           "mutable": false,
           "attr": "payment-method-form-type",
@@ -3886,12 +3846,10 @@
           "docsTags": [],
           "values": [
             {
-              "value": "bankAccount",
-              "type": "string"
+              "type": "PaymentMethodTypes.bankAccount"
             },
             {
-              "value": "card",
-              "type": "string"
+              "type": "PaymentMethodTypes.card"
             }
           ],
           "optional": false,
@@ -3961,11 +3919,11 @@
         {
           "name": "resize",
           "returns": {
-            "type": "Promise<any>",
+            "type": "Promise<void>",
             "docs": ""
           },
           "complexType": {
-            "signature": "() => Promise<any>",
+            "signature": "() => Promise<void>",
             "parameters": [],
             "references": {
               "Promise": {
@@ -3973,9 +3931,9 @@
                 "id": "global::Promise"
               }
             },
-            "return": "Promise<any>"
+            "return": "Promise<void>"
           },
-          "signature": "resize() => Promise<any>",
+          "signature": "resize() => Promise<void>",
           "parameters": [],
           "docs": "",
           "docsTags": []
@@ -4065,11 +4023,11 @@
       "events": [
         {
           "event": "paymentMethodFormReady",
-          "detail": "any",
+          "detail": "void",
           "bubbles": true,
           "complexType": {
-            "original": "any",
-            "resolved": "any",
+            "original": "void",
+            "resolved": "void",
             "references": {}
           },
           "cancelable": true,
@@ -4079,12 +4037,18 @@
         },
         {
           "event": "paymentMethodFormTokenized",
-          "detail": "any",
+          "detail": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
           "bubbles": true,
           "complexType": {
-            "original": "any",
-            "resolved": "any",
-            "references": {}
+            "original": "CreatePaymentMethodResponse",
+            "resolved": "BankAccountCreateResponse | CardCreateResponse | PaymentMethodErrorResponse",
+            "references": {
+              "CreatePaymentMethodResponse": {
+                "location": "import",
+                "path": "./payment-method-responses",
+                "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
+              }
+            }
           },
           "cancelable": true,
           "composed": true,
@@ -4137,33 +4101,6 @@
       "docsTags": [],
       "usage": {},
       "props": [
-        {
-          "name": "paymentMethodTypes",
-          "type": "PaymentMethodTypes[]",
-          "complexType": {
-            "original": "PaymentMethodTypes[]",
-            "resolved": "PaymentMethodTypes[]",
-            "references": {
-              "PaymentMethodTypes": {
-                "location": "import",
-                "path": "../../api",
-                "id": "src/api/index.ts::PaymentMethodTypes"
-              }
-            }
-          },
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "",
-          "docsTags": [],
-          "default": "[]",
-          "values": [
-            {
-              "type": "PaymentMethodTypes[]"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "selectedPaymentMethodType",
           "type": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
@@ -6576,6 +6513,11 @@
       "docstring": "",
       "path": "src/components/payment-method-form/payment-method-responses.ts"
     },
+    "src/api/index.ts::PaymentMethodTypes": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/index.ts"
+    },
     "src/components/billing-form/billing-form-schema.ts::BillingFormFields": {
       "declaration": "export interface BillingFormFields {\n  name: string;\n  address_line1: string;\n  address_line2?: string;\n  address_city: string;\n  address_state: string;\n  address_postal_code: string;\n}",
       "docstring": "",
@@ -6611,11 +6553,6 @@
       "docstring": "",
       "path": "src/components/form/form.ts"
     },
-    "src/api/index.ts::PaymentMethodTypes": {
-      "declaration": "any",
-      "docstring": "",
-      "path": "src/api/index.ts"
-    },
     "src/api/index.ts::Payment": {
       "declaration": "any",
       "docstring": "",