@justifi/webcomponents 6.0.0-rc.2 → 6.0.0-rc.20

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -1,25 +1,27 @@
-import { h, Host } from "@stencil/core";
-import { checkoutStore, onChange } from "../../store/checkout.store";
+import { h, Host, } from "@stencil/core";
+import { checkoutStore, onAnyChange, getAvailablePaymentMethodTypes } from "../../store/checkout.store";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus } from "../../api";
-import { makeCheckoutComplete, makeGetCheckout } from "../../actions/checkout/checkout-actions";
+import { ComponentErrorCodes, ComponentErrorMessages, ComponentErrorSeverity, ICheckoutStatus, PaymentMethodTypes, } from "../../api";
+import { makeCheckoutComplete, makeGetCheckout, } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
+import { PlaidService } from "../../api/services/plaid.service";
 import { insuranceValues, insuranceValuesOn, hasInsuranceValueChanged } from "../insurance/insurance-state";
+import { PAYMENT_MODE } from "./ModularCheckout";
 export class ModularCheckout {
     constructor() {
-        this.savePaymentMethod = false;
+        this.plaidService = new PlaidService();
         this.handleApplePayCompleted = (event) => {
-            const { success, token, error } = event.detail;
+            const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
-                this.applePayToken = token;
-                // Complete the checkout with Apple Pay token
-                this.submitCheckoutWithApplePay();
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.applePay };
+                this.submitCheckout();
             }
             else {
-                console.error('Apple Pay completed but failed:', error);
+                console.error("Apple Pay completed but failed:", error);
                 this.errorEvent.emit({
-                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Apple Pay payment failed',
+                    message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
@@ -27,59 +29,48 @@ export class ModularCheckout {
         };
         this.handleApplePayError = (event) => {
             const { error } = event.detail;
-            console.error('Apple Pay error:', error);
+            console.error("Apple Pay error:", error);
             this.errorEvent.emit({
-                message: error || 'Apple Pay error occurred',
+                message: error || "Apple Pay error occurred",
                 errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                 severity: ComponentErrorSeverity.ERROR,
             });
         };
         this.handleApplePayCancelled = () => {
-            console.log('Apple Pay cancelled by user');
-            // Reset the token if cancelled
-            this.applePayToken = undefined;
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
         };
     }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
-    }
     connectedCallback() {
+        console.log("connectedCallback", checkoutStore.checkoutLoaded);
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
             this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
-            subtree: true
+            subtree: true,
         });
         checkoutStore.checkoutId = this.checkoutId;
         const config = {
             authToken: this.authToken,
             checkoutId: this.checkoutId,
-            service: new CheckoutService()
+            service: new CheckoutService(),
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     componentWillLoad() {
-        if (!this.authToken || !this.checkoutId) {
-            this.errorEvent.emit({
-                message: ComponentErrorMessages.NOT_AUTHENTICATED,
-                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
-        }
         this.analytics = new JustifiAnalytics(this);
         checkPkgVersion();
         checkoutStore.authToken = this.authToken;
-        checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
         // Refresh the checkout data when insurance values actually change (not on initial load)
-        insuranceValuesOn('set', (key) => {
+        insuranceValuesOn("set", (key) => {
             const value = insuranceValues[key];
             if (value !== undefined && hasInsuranceValueChanged(key, value)) {
                 this.fetchCheckout();
@@ -96,9 +87,18 @@ export class ModularCheckout {
         this.removeApplePayListeners();
     }
     fetchCheckout() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -115,7 +115,6 @@ export class ModularCheckout {
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
@@ -123,186 +122,217 @@ export class ModularCheckout {
                         errorCode: ComponentErrorCodes.FETCH_ERROR,
                         severity: ComponentErrorSeverity.ERROR,
                     });
-                }
+                },
             });
         }
     }
     updateStore(checkout) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
+        checkoutStore.checkoutLoaded = true;
         checkoutStore.paymentMethods = checkout.payment_methods;
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
         checkoutStore.paymentDescription = checkout.payment_description;
         checkoutStore.totalAmount = checkout.total_amount;
         checkoutStore.paymentAmount = checkout.payment_amount;
         checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
-        checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
-        checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
-        checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+        checkoutStore.insuranceEnabled = checkout.payment_settings.insurance_payments;
+        checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
+        checkoutStore.bnplProviderClientId = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_client_id;
+        checkoutStore.bnplProviderMode = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
+    }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
     }
     queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.paymentMethodFormRef =
+            this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
-        this.applePayRef = this.hostEl.querySelector('justifi-apple-pay');
     }
     setupApplePayListeners() {
         if (this.applePayRef) {
-            this.applePayRef.addEventListener('applePayCompleted', this.handleApplePayCompleted);
-            this.applePayRef.addEventListener('applePayError', this.handleApplePayError);
-            this.applePayRef.addEventListener('applePayCancelled', this.handleApplePayCancelled);
+            this.applePayRef.addEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.addEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.addEventListener("applePayCancelled", this.handleApplePayCancelled);
         }
     }
     removeApplePayListeners() {
         if (this.applePayRef) {
-            this.applePayRef.removeEventListener('applePayCompleted', this.handleApplePayCompleted);
-            this.applePayRef.removeEventListener('applePayError', this.handleApplePayError);
-            this.applePayRef.removeEventListener('applePayCancelled', this.handleApplePayCancelled);
-        }
-    }
-    async submitCheckoutWithApplePay() {
-        if (!this.applePayToken) {
-            this.errorEvent.emit({
-                message: 'No Apple Pay token available',
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
+            this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
         }
-        const payment = {
-            payment_mode: 'apple_pay',
-            payment_token: this.applePayToken,
-        };
-        this.completeCheckout({
-            payment,
-            onSuccess: ({ checkout }) => {
-                this.submitEvent.emit({
-                    checkout,
-                    message: 'Apple Pay checkout completed successfully',
-                });
-            },
-            onError: (error) => {
-                this.errorEvent.emit({
-                    message: error.message,
-                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
-                    severity: ComponentErrorSeverity.ERROR,
-                });
-            },
-        });
     }
     async tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
-        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues()))) !== null && _b !== void 0 ? _b : {};
         const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
         const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
         if (checkoutStore.savePaymentMethod) {
-            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
         }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
             paymentMethodMetadata,
             account: checkoutStore.accountId,
-        });
-    }
-    async getPaymentMethod(submitCheckoutArgs) {
-        // If Apple Pay token is available, return a placeholder since we handle it differently
-        if (this.applePayToken) {
-            return 'apple_pay_token';
-        }
-        // If we have a payment token from the store (set by tokenize-payment-method), use it
-        if (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
-        }
-        // Fallback to the original tokenization logic for backward compatibility
-        if (!this.paymentMethodFormRef) {
-            return checkoutStore.selectedPaymentMethod;
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
         }
-        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
-        if (error) {
-            this.errorEvent.emit({
-                errorCode: error.code,
-                message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return undefined;
-        }
-        return token;
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
+    }
+    // set the selected payment method to the checkout store from outside the component
+    async setSelectedPaymentMethod(paymentMethod) {
+        checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkoutStore.paymentToken = paymentMethod.id || undefined;
     }
+    // if validation fails, the error will be emitted by the component
     async validate() {
-        var _a, _b;
-        // If Apple Pay token is available, validation is already complete
-        if (this.applePayToken) {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card && checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount && checkoutStore.selectedPaymentMethod.id === undefined;
+        // For new card/bank account, validate payment method + billing.
+        if (isNewCard ||
+            isNewBankAccount) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
+        }
+        if (promises.length === 0)
+            return true;
+        try {
+            const results = await Promise.all(promises);
+            // Normalize different validator return shapes:
+            // - boolean -> use it directly
+            // - object  -> look for isValid; treat missing isValid as falsey only if explicitly false
+            const resultsAreValid = results.every(r => typeof r === 'boolean' ? r : (r === null || r === void 0 ? void 0 : r.isValid) !== false);
+            if (!resultsAreValid) {
+                this.errorEvent.emit({
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return false;
+            }
             return true;
         }
-        const promises = [
-            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
-            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
-        ];
-        if (this.insuranceFormRef) {
-            promises.push(this.insuranceFormRef.validate());
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
         }
-        const validationResults = await Promise.all(promises);
-        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a;
-        // If Apple Pay token is available, use Apple Pay flow
-        if (this.applePayToken) {
-            await this.submitCheckoutWithApplePay();
-            return;
-        }
         const isValid = await this.validate();
-        if (!isValid) {
-            this.errorEvent.emit({
-                message: 'Please fill in all required fields.',
-                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isPlaid = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.plaid;
+        const shouldTokenize = isNewCard || isNewBankAccount;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
+                this.errorEvent.emit({
+                    message: tokenizeResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
         }
-        let payment;
-        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
-            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
-            if (sezzleResult.error) {
+        // For Plaid, perform exchange at submit time using stored public token and link token id
+        if (isPlaid && !checkoutStore.paymentToken) {
+            const publicToken = checkoutStore.plaidPublicToken;
+            const linkTokenId = checkoutStore.plaidLinkTokenId;
+            if (!publicToken) {
                 this.errorEvent.emit({
-                    message: sezzleResult.error.message,
+                    message: 'Missing Plaid public token. Please connect your bank.',
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
-                payment = {
-                    payment_mode: 'bnpl',
-                    payment_token: undefined,
-                };
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, publicToken, linkTokenId || undefined, checkoutStore.savePaymentMethod ? checkoutStore.paymentMethodGroupId : undefined);
+                if (response === null || response === void 0 ? void 0 : response.error) {
+                    this.errorEvent.emit({
+                        message: typeof response.error === 'string' ? response.error : response.error.message || 'Failed to tokenize bank account',
+                        errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                    return;
+                }
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _a === void 0 ? void 0 : _a.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                checkoutStore.paymentToken = token;
             }
-        }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
+            catch (err) {
                 this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
+                    message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            ;
-            payment = {
-                payment_mode: 'ecom',
-                payment_token: paymentMethod,
-            };
         }
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: "Please fill in all required fields.",
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (!checkoutStore.paymentToken) {
+            this.errorEvent.emit({
+                message: 'Payment token not found.',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        let payment;
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PaymentMethodTypes.card:
+                case PaymentMethodTypes.bankAccount:
+                case PaymentMethodTypes.plaid:
+                    return PAYMENT_MODE.ECOM;
+                case PaymentMethodTypes.sezzle:
+                    return PAYMENT_MODE.BNPL;
+                case PaymentMethodTypes.applePay:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
+        };
+        payment = {
+            payment_mode: mapTypeToPaymentMode(checkoutStore.selectedPaymentMethod.type),
+            payment_token: checkoutStore.paymentToken,
+        };
         this.completeCheckout({
             payment,
             onSuccess: ({ checkout }) => {
                 this.submitEvent.emit({
                     checkout,
-                    message: 'Checkout completed successfully',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -314,11 +344,8 @@ export class ModularCheckout {
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return (h(Host, { key: '1b0c613494dde43962dc963618d5a81c4423b218' }));
+        return h(Host, { key: '2cbac33c57dd2cad327f156a4630b1dba9bf3252' });
     }
     static get is() { return "justifi-modular-checkout"; }
     static get properties() {
@@ -360,26 +387,6 @@ export class ModularCheckout {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "savePaymentMethod": {
-                "type": "boolean",
-                "attribute": "save-payment-method",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }
@@ -415,8 +422,8 @@ export class ModularCheckout {
                     "references": {}
                 }
             }, {
-                "method": "paymentMethodChangedEvent",
-                "name": "payment-method-changed",
+                "method": "checkoutChangedEvent",
+                "name": "checkout-changed",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -425,69 +432,95 @@ export class ModularCheckout {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "CheckoutChangedEventDetail",
+                    "resolved": "CheckoutChangedEventDetail",
+                    "references": {
+                        "CheckoutChangedEventDetail": {
+                            "location": "import",
+                            "path": "./ModularCheckout",
+                            "id": "src/components/modular-checkout/ModularCheckout.ts::CheckoutChangedEventDetail"
+                        }
+                    }
                 }
             }];
     }
     static get methods() {
         return {
-            "validate": {
+            "setSelectedPaymentMethod": {
                 "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
+                    "signature": "(paymentMethod: ICheckoutPaymentMethod | { type: PaymentMethodTypes; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "paymentMethod",
+                            "type": "ICheckoutPaymentMethod | { type: PaymentMethodTypes; }",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "ICheckoutPaymentMethod": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
+                        },
+                        "PaymentMethodTypes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentMethodTypes"
                         }
                     },
-                    "return": "Promise<boolean>"
+                    "return": "Promise<void>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "submitCheckout": {
+            "validate": {
                 "complexType": {
-                    "signature": "(submitCheckoutArgs?: BillingFormFields) => Promise<void>",
-                    "parameters": [{
-                            "name": "submitCheckoutArgs",
-                            "type": "BillingFormFields",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "BillingFormFields": {
+                        "ICheckoutPaymentMethod": {
                             "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::BillingFormFields"
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<boolean>"
                 },
                 "docs": {
                     "text": "",
                     "tags": []
                 }
             },
-            "setSelectedPaymentMethod": {
+            "submitCheckout": {
                 "complexType": {
-                    "signature": "(paymentMethodId: string) => Promise<void>",
+                    "signature": "(submitCheckoutArgs?: BillingFormFields) => Promise<void>",
                     "parameters": [{
-                            "name": "paymentMethodId",
-                            "type": "string",
+                            "name": "submitCheckoutArgs",
+                            "type": "BillingFormFields",
                             "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        },
+                        "ICheckoutPaymentMethod": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ICheckoutPaymentMethod"
                         }
                     },
                     "return": "Promise<void>"
@@ -500,10 +533,4 @@ export class ModularCheckout {
         };
     }
     static get elementRef() { return "hostEl"; }
-    static get watchers() {
-        return [{
-                "propName": "savePaymentMethod",
-                "methodName": "savePaymentMethodChanged"
-            }];
-    }
 }