@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.11

package/dist/collection/api/index.js

@@ -1,7 +1,7 @@
 export * from './Api';
 export * from './ComponentEvents';
 export * from './ComponentError';
-export * from './Checkout';
+export { Completion, Checkout, ICheckoutPaymentMode, ICheckoutPaymentModeParam, ICheckoutStatus, CompletionStatuses, } from './Checkout';
 export * from './Insurance';
 export * from './Pagination';
 export * from './Payment';
@@ -16,7 +16,6 @@ export * from './Document';
 export * from './Refund';
 export * from './Business';
 export * from './Identity';
-export * from './Document';
 export * from './Dispute';
 export * from './GrossVolume';
 // In a future PR I would like to update the naming of the BankAccount Payment Method class in Payment.ts so this import can be updated to be written the same as the others in this file.

package/dist/collection/api/services/apple-pay.service.js

@@ -0,0 +1,293 @@
+import { Api } from "../Api";
+import { ApplePaySessionStatus, ApplePayHelpers, ApplePayConfig, ApplePayPaymentRequest, } from "../ApplePay";
+export class ApplePayService {
+    constructor() {
+        this.api = Api();
+    }
+    /**
+     * Initialize Apple Pay configuration
+     */
+    initialize(applePayConfig) {
+        this.applePayConfig = new ApplePayConfig(applePayConfig);
+        if (!this.applePayConfig.isValid) {
+            throw new Error('Invalid Apple Pay configuration provided');
+        }
+    }
+    /**
+     * Validate merchant with Apple Pay servers via API
+     */
+    async validateMerchant(authToken, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
+        }
+    }
+    /**
+     * Process Apple Pay payment via API (fixed to match original logic)
+     */
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
+            headers: {
+                'Sub-Account': accountId,
+            },
+        });
+        return {
+            success: result.id && !!result.data.token,
+            data: result,
+        };
+    }
+    /**
+     * Check if Apple Pay is available on this device/browser
+     */
+    isAvailable() {
+        return (ApplePayHelpers.isApplePaySupported() && ApplePayHelpers.canMakePayments());
+    }
+    /**
+     * Check if the user has an active card for the merchant
+     */
+    async canMakePaymentsWithActiveCard() {
+        if (!this.applePayConfig) {
+            throw new Error('Apple Pay not initialized. Call initialize() first.');
+        }
+        return await ApplePayHelpers.canMakePaymentsWithActiveCard(this.applePayConfig.merchantIdentifier);
+    }
+    /**
+     * Start Apple Pay session
+     */
+    async startPaymentSession(paymentRequest, authToken, accountId) {
+        if (!this.applePayConfig) {
+            throw new Error('Apple Pay not initialized. Call initialize() first.');
+        }
+        // if (!this.isAvailable()) {
+        //   throw new Error('Apple Pay is not available on this device/browser');
+        // }
+        const request = new ApplePayPaymentRequest(paymentRequest);
+        if (!request.isValid) {
+            throw new Error('Invalid payment request provided');
+        }
+        this.currentPaymentRequest = request;
+        return new Promise((resolve, reject) => {
+            try {
+                this.currentSession = new window.ApplePaySession(3, request);
+                this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
+                this.currentSession.begin();
+            }
+            catch (error) {
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Failed to start Apple Pay session',
+                    },
+                });
+            }
+        });
+    }
+    /**
+     * Abort current Apple Pay session
+     */
+    abortPaymentSession() {
+        if (this.currentSession) {
+            this.currentSession.abort();
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+        }
+    }
+    /**
+     * Setup Apple Pay session event handlers
+     */
+    setupSessionEventHandlers(resolve, reject, authToken, accountId) {
+        if (!this.currentSession ||
+            !this.applePayConfig ||
+            !this.currentPaymentRequest) {
+            return;
+        }
+        this.currentSession.onvalidatemerchant = async () => {
+            try {
+                if (!authToken) {
+                    throw new Error('Authentication token not provided.');
+                }
+                const merchantSession = await this.validateMerchant(authToken, accountId);
+                try {
+                    this.currentSession.completeMerchantValidation(merchantSession);
+                }
+                catch (completionError) {
+                    console.error('Error calling completeMerchantValidation:', completionError);
+                    throw completionError;
+                }
+            }
+            catch (error) {
+                console.error('=== MERCHANT VALIDATION ERROR ===');
+                console.error('Error during merchant validation:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.abort();
+                reject({
+                    success: false,
+                    error: {
+                        code: 'MERCHANT_VALIDATION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Merchant validation failed',
+                    },
+                });
+            }
+        };
+        this.currentSession.onpaymentauthorized = async (event) => {
+            try {
+                const payment = event.payment;
+                const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
+                        name: this.currentPaymentRequest.total.label,
+                        price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
+                        description: this.currentPaymentRequest.total.label,
+                    } });
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                if (paymentResult.success) {
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_SUCCESS,
+                    });
+                    resolve({
+                        success: true,
+                        token: payment.token,
+                        paymentMethodId: paymentResult.data.id,
+                    });
+                }
+                else {
+                    console.error('PSP reported payment failure:', paymentResult.data);
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_FAILURE,
+                    });
+                    reject({
+                        success: false,
+                        error: {
+                            code: 'PAYMENT_PROCESSING_ERROR',
+                            message: 'Payment processing failed',
+                        },
+                    });
+                }
+            }
+            catch (error) {
+                console.error('=== PAYMENT PROCESSING ERROR ===');
+                console.error('Error processing payment:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.completePayment({
+                    status: ApplePaySessionStatus.STATUS_FAILURE,
+                });
+                reject({
+                    success: false,
+                    error: {
+                        code: 'PAYMENT_PROCESSING_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Payment processing failed',
+                    },
+                });
+            }
+            finally {
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+            }
+        };
+        this.currentSession.onpaymentmethodselected = () => {
+            const paymentUpdate = {
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            };
+            try {
+                this.currentSession.completePaymentMethodSelection(paymentUpdate);
+            }
+            catch (error) {
+                console.error('Error completing payment method selection:', error);
+                this.currentSession.abort();
+            }
+        };
+        this.currentSession.onshippingmethodselected = () => {
+            this.currentSession.completeShippingMethodSelection({
+                status: ApplePaySessionStatus.STATUS_SUCCESS,
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            });
+        };
+        this.currentSession.oncancel = (event) => {
+            if (event.sessionError) {
+                console.error(event.sessionError);
+                switch (event.sessionError.code) {
+                    case 'unknown':
+                        console.error('Unknown error - likely merchant validation issue');
+                        console.error('This usually means:');
+                        console.error('1. Merchant certificate is invalid or expired');
+                        console.error('2. Merchant identifier mismatch');
+                        console.error('3. Backend validation endpoint issues');
+                        break;
+                    case 'invalidMerchantSession':
+                        console.error('Invalid merchant session provided');
+                        console.error('Check that the merchant session from backend is valid');
+                        break;
+                    case 'userCancel':
+                        console.error('User cancelled the payment');
+                        break;
+                    default:
+                        console.error('Other error code:', event.sessionError.code);
+                }
+            }
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+            reject({
+                success: false,
+                error: {
+                    code: 'USER_CANCELLED',
+                    message: 'User cancelled the Apple Pay session',
+                },
+            });
+        };
+        if ('onerror' in this.currentSession) {
+            this.currentSession.onerror = (error) => {
+                console.error('=== APPLE PAY SESSION ERROR ===');
+                console.error('Session error:', error);
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: 'Apple Pay session error occurred',
+                    },
+                });
+            };
+        }
+    }
+    /**
+     * Create a basic payment request
+     */
+    static createPaymentRequest(amount, label, countryCode = 'US', currencyCode = 'USD') {
+        return {
+            countryCode,
+            currencyCode,
+            merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
+            supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
+            total: ApplePayHelpers.createLineItem(label, amount),
+        };
+    }
+    /**
+     * Get current configuration
+     */
+    getApplePayConfig() {
+        return this.applePayConfig;
+    }
+}

package/dist/collection/api/services/plaid.service.js

@@ -0,0 +1,20 @@
+import { Api } from "..";
+const api = Api();
+export class PlaidService {
+    async getLinkToken(authToken, accountId, checkoutId, signal) {
+        const endpoint = `plaid/${accountId}/link`;
+        const body = { checkout_id: checkoutId };
+        return api.post({ endpoint, body, authToken, signal });
+    }
+    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
+        const endpoint = `plaid/${accountId}/tokenize`;
+        const body = { public_token: publicToken };
+        if (linkTokenId) {
+            body.link_token_id = linkTokenId;
+        }
+        if (paymentMethodGroupId) {
+            body.payment_method_group_id = paymentMethodGroupId;
+        }
+        return api.post({ endpoint, body, authToken, signal });
+    }
+}

package/dist/collection/assets/plaid-icon.svg

@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 28 29" xmlns="http://www.w3.org/2000/svg" class="css-1rdaj8m"><g fill="#111" fill-rule="evenodd"><path d="M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z"></path></g></svg>

package/dist/collection/collection-manifest.json

@@ -50,6 +50,7 @@
     "components/modular-checkout/sub-components/card-billing-form-simple.js",
     "components/modular-checkout/sub-components/bank-account-billing-form-simple.js",
     "components/checkout/card-form/card-form.js",
+    "ui-components/form/form-control-checkbox.js",
     "components/checkouts-list/checkouts-list-core.js",
     "components/checkouts-list/checkouts-list-filters.js",
     "components/checkouts-list/checkouts-list.js",
@@ -73,9 +74,11 @@
     "components/gross-payment-chart/gross-payment-chart.js",
     "components/insurance/season-interruption/season-interruption-insurance.js",
     "components/modular-checkout/modular-checkout.js",
+    "components/modular-checkout/sub-components/apple-pay.js",
     "components/modular-checkout/sub-components/bank-account.js",
     "components/modular-checkout/sub-components/card-form.js",
     "components/modular-checkout/sub-components/payment-method-option.js",
+    "components/modular-checkout/sub-components/plaid-payment-method.js",
     "components/modular-checkout/sub-components/saved-payment-methods.js",
     "components/modular-checkout/sub-components/sezzle-payment-method.js",
     "components/modular-checkout/sub-components/summary.js",
@@ -103,7 +106,6 @@
     "components/terminals-list/terminals-list.js",
     "components/tokenize-payment-method/tokenize-payment-method.js",
     "ui-components/custom-popper/custom-popper.js",
-    "ui-components/form/form-control-checkbox.js",
     "ui-components/form/form-control-file-v2.js",
     "ui-components/form/form-control-file.js",
     "ui-components/form/form-control-monetary.js",
@@ -123,7 +125,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.2",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class BankAccountForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -31,16 +33,17 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/card-form/card-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class CardForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class CardForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -35,16 +37,17 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '8a6454e0a16e0a26762627f7a42527ab243c1c7a' }, h(CardFormSkeleton, { key: 'ed7386f746518e1ebb62d1bf9bc2e98778d9804e', isReady: this.isReady }), h("div", { key: 'f3092bcce1626f04a079ebcf64f0cdf06a7029a8', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '3e211e500bef824aff5b6bf6cdedc99435cacfd4', class: "mb-3" }, h("iframe-input", { key: '6ad14a317fd6cad6d6535ba661684e31c325c5ab', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '931e9f1b047ff57c2b37bb2947e29f6708f239d9', class: "d-flex align-items-start" }, h("div", { key: '5ca19fbf9047bd6595557890b0bdbbf0d2e65de9', class: "flex-fill me-3" }, h("iframe-input", { key: 'c99f426b77308b15fcb174e8adbe8c120abc58b5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '677b8fb8f33a021afda90a8b4e13b5f44b5fe694', class: "flex-fill me-3" }, h("iframe-input", { key: '9bcf91464c5f2ca77b339f2fe299db6027aa9f8b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '9b5c52d9cc5b30eedf522801c3f8f6c0530757ce', class: "flex-fill" }, h("iframe-input", { key: '3e73df1c7119193a239fcd2f5212967e109cff83', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

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

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import JustifiAnalytics from "../../api/Analytics";
+import { PaymentMethodTypes } from "../../api";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
 import { StyledHost } from "../../ui-components";
+import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
 export class Checkout {
     constructor() {
+        this.availablePaymentMethods = [];
         this.errorMessage = '';
         this.insuranceToggled = false;
         this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
@@ -36,23 +38,11 @@ export class Checkout {
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
-    checkoutError(event) {
+    checkoutError(_event) {
         this.isSubmitting = false;
-        console.error('checkout error', event.detail);
     }
-    async handleTokenizeSubmit(event) {
-        this.tokenizedPaymentMethod = event.detail.response;
-        if (event.detail.response.error) {
-            this.isSubmitting = false;
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
-            });
-            return;
-        }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
+    checkoutChanged(event) {
+        this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
     }
     async fillBillingForm(fields) {
         var _a;
@@ -60,12 +50,9 @@ export class Checkout {
         (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a, _b, _c;
-        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
-        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
-        return {
-            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
-        };
+        var _a;
+        const modularValidation = await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate());
+        return { isValid: modularValidation };
     }
     updateStore() {
         checkoutStore.checkoutId = this.checkoutId;
@@ -78,24 +65,15 @@ export class Checkout {
     async submit(_event) {
         var _a;
         this.isSubmitting = true;
-        // Trigger the tokenize payment method submission
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
-    }
-    async submitCheckoutWithToken() {
-        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
-            this.isSubmitting = false;
-            return;
-        }
-        // Set the payment token in the store for the modular checkout to use
-        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
-        // Submit the checkout
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
+        (_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.submitCheckout(checkoutStore.billingFormFields);
     }
     get showPaymentTypeHeader() {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
     render() {
-        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '61cab7c3b5ca01ea70f35d23df100c2e7bd0c03a' }, h("justifi-modular-checkout", { key: '67ed6c7b2a6bbbec0e24b47b24c2eb73b82abc43', ref: (el) => {
+                this.modularCheckoutRef = el;
+            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'b02aaa188db4d619ab3f14a336fe33f4113f2799', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2c8c019f86bc181d7d05848993ff3782f1fe3ed2', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '00eb81f75652c80108ad24620b72a977a09192d9', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '346d90b8cca657a1af0eea96244ef105d1274abe' }, h("justifi-checkout-summary", { key: '68784e0b3ef83b6a87d8084fe19dbce7d3348169' }))), h("div", { key: 'bb04ad56ed5074cc272c47e013c7647cc6cf5c2d', class: "col-12 mt-4" }, h("slot", { key: 'a0955737dc7af83b01608abe7818af666ac08d87', name: "insurance" })), h("div", { key: '7025fb6b7ad229879f2198f12a79e07871691b6a', class: "col-12 mt-4" }, h("justifi-header", { key: 'a7823342698429e7845cb341bba2de41f461f6c2', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'b579b51c7f6adec31c7e1d39981634328a22b0c2', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '496812c7404b914acc03052018b06b5ebedfd230', class: "d-flex flex-column" }, h("section", { key: '227d6e265d947a5035d8e072b6ea9a87e04faa97' }, h("div", { key: 'b06b49af43c4fce8251c7b227bcc2f2dce5b531a' }, h("justifi-saved-payment-methods", { key: 'd5629c6248d780c5ce8b69c88b4bf866baab2c53' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'dbaf7d54d8c26315faea5537eb821a4a9314d2c4', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.sezzle, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && (h("justifi-radio-list-item", { key: 'dad1c44a06f6e60d27d737d36ff68d536244776b', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.plaid, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '2bf37f35ae9cb51a6622d4e3f4244359fd40606d', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'a29f2e940b8c2970d09af0fdce278344cd70833a', class: "mt-4" }, h("justifi-button", { key: '6a076cff574520eaf3303cb4792227365eaf25ae', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -262,13 +240,13 @@ export class Checkout {
     }
     static get states() {
         return {
+            "availablePaymentMethods": {},
             "checkout": {},
             "complete": {},
             "errorMessage": {},
             "insuranceToggled": {},
             "isSubmitting": {},
-            "serverError": {},
-            "tokenizedPaymentMethod": {}
+            "serverError": {}
         };
     }
     static get events() {
@@ -419,8 +397,8 @@ export class Checkout {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "submit-event",
-                "method": "handleTokenizeSubmit",
+                "name": "checkout-changed",
+                "method": "checkoutChanged",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -3,6 +3,7 @@ import { StyledHost } from "../../ui-components";
 import { checkoutStore } from "../../store/checkout.store";
 export class SaveNewPaymentMethod {
     constructor() {
+        this.label = 'Save New Payment Method';
         this.isChecked = false;
         this.handleCheckboxChange = (_name, value) => {
             this.isChecked = value;
@@ -11,10 +12,34 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: 'f23a4f992eef86df7ebfa86f4b46b232456016b2' }, h("div", { key: '0ef7c08423451655318751a6377f0ba8ffda3c7c', class: "mt-4 form-check" }, h("form-control-checkbox", { key: '609527d08abb45603ea683a051cf9c09435fc5bc', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange }))));
+        return (h(StyledHost, { key: 'c3808f4373067144ded9db353e48fe9cd3df59bc' }, h("form-control-checkbox", { key: '2f104a35497fdc1397c014c4c4ed646f7b389239', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Save New Payment Method'"
+            }
+        };
+    }
     static get states() {
         return {
             "isChecked": {}

package/dist/collection/components/checkouts-list/checkouts-list-core.js

@@ -118,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'c411d1c3a54fd8a331f0c5cdbae344e231482c0f' }, h(TableComponent, { key: '21774546f3500612497943869017fa7c712dff7e' }, h(TableHead, { key: 'c4e745ead905a393ff1b0cd0fba23db2fcc03ad8' }, h(TableHeadRow, { key: '88063d0baedd1febe0febcab1ccefc512accfd7d' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'e2534bc13d9e015f127c5396bbe73545d92536b4' }, h(TableLoadingState, { key: '0f0958fa87403652880222365cf7f88dd33335cc', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '588bb80d518892791ed2134dd5405940e7c28db7', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '219cce1137232c64b7c9188042c4aaca7e0e91b6', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '16978b3be698ceabd1d19b9eaa3f85c01a862b83' }, h(TableFootRow, { key: 'cd26e5b6f03dff77e09dfb4f9962e7601b2e40dc' }, h(TableFootCell, { key: '508008cf682b393549a839453d4b4c2eee1f67a4', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '688702c35e666def509ccb77b88b88ddd5e0d58a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {