@justifi/webcomponents 6.0.0-rc.15 → 6.0.0-rc.16

package/dist/cjs/justifi-apple-pay.cjs.entry.js

@@ -1,18 +1,17 @@
 'use strict';
 
 var index = require('./index-C9hBD-32.js');
-var Api = require('./Api-DyimBzKT.js');
 var styledHost = require('./styled-host-BfVJlAsJ.js');
 require('./event-types-YOY5TKUN.js');
 var skeleton = require('./skeleton-C7DQRD6r.js');
 var checkout_store = require('./checkout.store-DJEc-So8.js');
-require('./config-state-BBOZIS8x.js');
+require('./parts-9jMf1erK.js');
 require('./index-B32W0A3m.js');
-require('./utils-ChCUZgUy.js');
+require('./config-state-BBOZIS8x.js');
 require('./dinero-BwNN_k7x.js');
-require('./parts-9jMf1erK.js');
 require('./ComponentError-D4OLnOkg.js');
 require('./Refund-BefKONu4.js');
+require('./utils-ChCUZgUy.js');
 require('./Dispute-CruQTF6_.js');
 require('./Pagination-Dediz133.js');
 require('./Business-DCRzZf0w.js');
@@ -48,45 +47,6 @@ var ApplePayMerchantCapability;
     ApplePayMerchantCapability["SUPPORTS_CREDIT"] = "supportsCredit";
     ApplePayMerchantCapability["SUPPORTS_DEBIT"] = "supportsDebit";
 })(ApplePayMerchantCapability || (ApplePayMerchantCapability = {}));
-class ApplePayConfig {
-    constructor(data) {
-        this.merchantIdentifier = data.merchantIdentifier;
-        this.displayName = data.displayName;
-        this.initiative = data.initiative;
-        this.initiativeContext = data.initiativeContext;
-        this.buttonType = data.buttonType || ApplePayButtonType.PLAIN;
-        this.buttonStyle = data.buttonStyle || ApplePayButtonStyle.BLACK;
-        this.buttonLocale = data.buttonLocale || 'en-US';
-    }
-    get isValid() {
-        return !!(this.merchantIdentifier &&
-            this.displayName &&
-            this.initiative &&
-            this.initiativeContext);
-    }
-}
-class ApplePayPaymentRequest {
-    constructor(data) {
-        this.countryCode = data.countryCode;
-        this.currencyCode = data.currencyCode;
-        this.merchantCapabilities = data.merchantCapabilities;
-        this.supportedNetworks = data.supportedNetworks;
-        this.total = data.total;
-        this.lineItems = data.lineItems;
-        this.shippingMethods = data.shippingMethods;
-        this.applicationData = data.applicationData;
-        this.supportedCountries = data.supportedCountries;
-    }
-    get isValid() {
-        var _a, _b, _c, _d;
-        return !!(this.countryCode &&
-            this.currencyCode &&
-            ((_a = this.merchantCapabilities) === null || _a === void 0 ? void 0 : _a.length) &&
-            ((_b = this.supportedNetworks) === null || _b === void 0 ? void 0 : _b.length) &&
-            ((_c = this.total) === null || _c === void 0 ? void 0 : _c.label) &&
-            ((_d = this.total) === null || _d === void 0 ? void 0 : _d.amount));
-    }
-}
 class ApplePayHelpers {
     static isApplePaySupported() {
         var _a;
@@ -140,298 +100,6 @@ class ApplePayHelpers {
     }
 }
 
-class ApplePayService {
-    constructor() {
-        this.api = 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;
-    }
-}
-
 const ApplePaySkeleton = (props) => {
     const { isReady } = props;
     if (isReady) {
@@ -662,25 +330,29 @@ const ApplePay = class {
             }
         };
     }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.unsubscribeCheckoutLoaded = checkout_store.onChange("checkoutLoaded", (loaded) => {
-            console.log("checkoutLoaded", loaded);
-            if (loaded) {
-                this.initializeApplePay();
-            }
-        });
-        this.initializeApplePay();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribeCheckoutLoaded) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.unsubscribeCheckoutLoaded = undefined;
-    }
-    watchPropsChange() {
-        this.initializeApplePay();
-    }
+    // private unsubscribeCheckoutLoaded?: () => void;
+    // componentWillLoad() {
+    //   this.unsubscribeCheckoutLoaded = onChange("checkoutLoaded", (loaded) => {
+    //     this.applePayService = new ApplePayService();
+    //     console.log("checkoutLoaded", loaded);
+    //     if (loaded) {
+    //       this.initializeApplePay();
+    //     }
+    //   });
+    // }
+    // disconnectedCallback() {
+    //   this.unsubscribeCheckoutLoaded?.();
+    //   this.unsubscribeCheckoutLoaded = undefined;
+    // }
+    // @Watch("merchantIdentifier")
+    // @Watch("buttonType")
+    // @Watch("buttonStyle")
+    // @Watch("disabled")
+    // watchPropsChange() {
+    //   this.initializeApplePay();
+    // }
     async initializeApplePay() {
+        console.log("initializeApplePay", checkout_store.checkoutStore.checkoutLoaded);
         try {
             this.isLoading = true;
             this.error = null;
@@ -689,9 +361,9 @@ const ApplePay = class {
                 Boolean(checkout_store.checkoutStore.paymentCurrency) &&
                 Boolean(checkout_store.checkoutStore.authToken);
             if (!hasRequiredConfig) {
-                this.error = "Missing required Apple Pay configuration";
+                this.error = "Missing required Apple Pay configuration blabla blabla 2";
                 this.isConfigValid = false;
-                console.error("Apple Pay config error: missing required values", {
+                console.error("Apple Pay config error: missing required values blabla blabla 2", {
                     paymentAmount: checkout_store.checkoutStore.paymentAmount,
                     paymentCurrency: checkout_store.checkoutStore.paymentCurrency,
                     hasAuthToken: Boolean(checkout_store.checkoutStore.authToken),
@@ -757,29 +429,24 @@ const ApplePay = class {
         this.applePayCancelled.emit();
     }
     render() {
-        const shouldHide = !this.isLoading &&
-            (!this.isConfigValid || !this.isAvailable || !this.canMakePayments || !checkout_store.checkoutStore.checkoutLoaded);
-        if (shouldHide) {
-            return null;
-        }
+        // const shouldHide =
+        //   !this.isLoading &&
+        //   (!this.isConfigValid || !this.isAvailable || !this.canMakePayments || !checkoutStore.checkoutLoaded);
+        // if (shouldHide) {
+        //   return null;
+        // }
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
             this.isConfigValid;
-        return (index.h(styledHost.StyledHost, null, index.h("script", { async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), index.h("div", { class: 'apple-pay-container' }, index.h(ApplePaySkeleton, { isReady: isReady }), !this.isLoading &&
-            this.isAvailable &&
-            this.canMakePayments && (index.h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), index.h("style", null, `
+        return (index.h(styledHost.StyledHost, { key: 'ea33bc759d2849cf013cb6f98367c8d78c799acb' }, checkout_store.checkoutStore.checkoutLoaded && (index.h("script", { key: '9ed6140223a8788ca194a8978a9ca8e1e30eb10e', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
+                this.initializeApplePay();
+            } })), index.h("div", { key: '6501d8cb4c4119eadf9112db4fca876437138bcc', class: 'apple-pay-container' }, index.h(ApplePaySkeleton, { key: '1aee83e3deac0d0f68d2788f65401a1d7c48047f', isReady: isReady }), isReady && (index.h(ApplePayButton, { key: 'eb05dde5789f5f1bb83e75127c222996a38c8fef', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), index.h("style", { key: '8060bf6771c12f47d482f0a774e4fd6547e50a2e' }, `
             .apple-pay-container {
               width: 100%;
             }
           `)));
     }
-    static get watchers() { return {
-        "merchantIdentifier": ["watchPropsChange"],
-        "buttonType": ["watchPropsChange"],
-        "buttonStyle": ["watchPropsChange"],
-        "disabled": ["watchPropsChange"]
-    }; }
 };
 
 exports.justifi_apple_pay = ApplePay;

package/dist/cjs/justifi-bank-account-billing-form-simple_9.cjs.entry.js

@@ -7,7 +7,7 @@ var parts = require('./parts-9jMf1erK.js');
 var styledHost = require('./styled-host-BfVJlAsJ.js');
 require('./event-types-YOY5TKUN.js');
 var skeleton = require('./skeleton-C7DQRD6r.js');
-var checkPkgVersion = require('./check-pkg-version-CVOffMTi.js');
+var checkPkgVersion = require('./check-pkg-version-DfzaKEDg.js');
 var configState = require('./config-state-BBOZIS8x.js');
 var header3 = require('./header-3-sOdOpfx3.js');
 var utils = require('./utils-DAyWinG2.js');
@@ -18,7 +18,7 @@ require('./_commonjsHelpers-BJu3ubxk.js');
 require('./business-form-options-CMII7nIK.js');
 require('./Business-DCRzZf0w.js');
 require('./helpers-B5OCqlIM.js');
-require('./package-MU7zz6nI.js');
+require('./package-CHNXn8wx.js');
 require('./Api-DyimBzKT.js');
 require('./utils-ChCUZgUy.js');
 require('./dinero-BwNN_k7x.js');
@@ -156,10 +156,10 @@ const BankAccountForm = class {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '55cf04f40c030d67235807168a303dc2680561d2' }, index.h(BankAccountFormSkeleton, { key: '1b076c4d58b80c5f9b5842e1e0228657ec39f68b', isReady: this.isReady }), index.h("hidden-input", { key: '8b622b9693d7648a6bd33f082241910801c14e1e' }), index.h("div", { key: 'ce79e65bd2dba972885b5c906715e70d2817dd4c', class: "container-fluid p-0", style: {
+        return (index.h(styledHost.StyledHost, { key: '99ccb5aa2afbf79e5bf40d59ca15eb217180349a' }, index.h(BankAccountFormSkeleton, { key: 'a26a6f4391a5e5b7923f36b05bdfe57491b31d8a', isReady: this.isReady }), index.h("hidden-input", { key: '7555fe1bbf38a1525e7c11fe7182e264752435c9' }), index.h("div", { key: 'd1d7141ee75a644d4ae67d23b353dc6293306371', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: '8cc5b4b9c742ba0958845f2e5fee3e94c6449229', class: "row mb-3" }, index.h("iframe-input", { key: '3c41e6d2af86ff242f3b7a3d462628ab16626fe7', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), index.h("div", { key: 'd95374c4f22fe40bc0033f159d456d94ee10363f', class: "row" }, index.h("iframe-input", { key: '22df6eb6ad22ccb18e9e24533dd8b208afb44309', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, index.h("div", { key: 'db0d578ccb3647e049b5ef958bef0273a8945448', class: "row mb-3" }, index.h("iframe-input", { key: '58311d94a8f5f023f05de260afbaf6bc707a0d57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), index.h("div", { key: '92e4b77f012a414ac88b8faf721b5a10f2c5a3a4', class: "row" }, index.h("iframe-input", { key: '5163f7e8cff8fb82bb009f615ef7ab2e231deb52', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
 };
 
@@ -240,7 +240,7 @@ const JustifiButton = class {
         this.type = 'button';
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'fae177edc7a7a898f1782a01c26b65fb11c50c65' }, index.h(button.Button, { key: 'c097e63cce36a5b4e2cb522bf17ba2519c354c6e', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (index.h(styledHost.StyledHost, { key: '48098276e0808052803f0d16df68ba23d529c4ab' }, index.h(button.Button, { key: 'c62e8d2d9208dc180180b4283edea991c5a93c57', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
 };
 
@@ -339,10 +339,10 @@ const JustifiCardForm = class {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '46acef24075db09eea0c94417e92e90a360e5850' }, index.h(CardFormSkeleton, { key: 'bd4f610e83d7bcbf5b597079d68bbeb2abe8c02e', isReady: this.isReady }), index.h("hidden-input", { key: 'b4a289f1ac7f104f5dce7848a94d22c9aa4a4b56' }), index.h("div", { key: 'df003c1be11c5a5262e6563d1fd4755ae60dc700', class: "container-fluid p-0", style: {
+        return (index.h(styledHost.StyledHost, { key: '46991f66161e4118fdf135bf18eb757435e26457' }, index.h(CardFormSkeleton, { key: 'aacb7f467a10debc809997a67172fe4f23a2ca76', isReady: this.isReady }), index.h("hidden-input", { key: '3e9bd9b7ff0aba356d9f8fd07428cbaedcb223b1' }), index.h("div", { key: '8fcf6d92703491fe6a0be076a5965c09c800f262', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: '900e56045f6db140c74db42396a85153d3fae683', class: "mb-3" }, index.h("iframe-input", { key: '1600ae4cddd10afb5abeea9d9a4e851e76ad3de2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), index.h("div", { key: 'ce66d35bd549b2cebca200c8c42eeddca4acd2d1', class: "row" }, index.h("div", { key: 'f1480606b802eff983710a37f79a9492f79b8440', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'd04785d62994fef3ee2d597a189d0b823e803bca', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), index.h("div", { key: '875e03320bb22f4f6891f01e749fef871f37cf18', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'ead59922d5ffeefe6e5951203b9ec157135dee3c', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), index.h("div", { key: 'a70d098fc88770441dfb347b9124f4c4d159714d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'eff54f20b8b3280b08839aaf4e77ab46c3262202', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, index.h("div", { key: '8dea63dc69d7c7cfbcded0a07bfbcf9c7d7a41fa', class: "mb-3" }, index.h("iframe-input", { key: 'ffd4de932414b206ea5936c21349c522b762f8a4', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), index.h("div", { key: '3e56350822761119dbb7ff49e3cc56bec7f361ca', class: "row" }, index.h("div", { key: 'ab13b6b20573fbec961164a415ccaf21b663eb4b', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'e12d56f2c1dd12ae5eff7619204d9f746e1b6a43', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), index.h("div", { key: '62e4808ee208aec7cf3e1d7a99fd65f3d9a5e615', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'c8e3945b466e61e8b21fbb13f71c0631740ca1a3', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), index.h("div", { key: '979929e29abb54f8837f71b1cdb7261df97a58df', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '2c25868c5fd7e6c2d34722b39f22c2062248cdf6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
 };
 

package/dist/cjs/justifi-business-details.cjs.entry.js

@@ -5,7 +5,7 @@ var utils = require('./utils-Bzyj4qWe.js');
 var business_service = require('./business.service-BB6zl4Gc.js');
 var getBusiness = require('./get-business-o5jPq_ME.js');
 var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var checkPkgVersion = require('./check-pkg-version-CVOffMTi.js');
+var checkPkgVersion = require('./check-pkg-version-DfzaKEDg.js');
 require('./parts-9jMf1erK.js');
 require('./Api-DyimBzKT.js');
 require('./config-state-BBOZIS8x.js');
@@ -19,7 +19,7 @@ require('./Business-DCRzZf0w.js');
 require('./helpers-B5OCqlIM.js');
 require('./state-options-CIT9xdTz.js');
 require('./utils-DvUQQLmR.js');
-require('./package-MU7zz6nI.js');
+require('./package-CHNXn8wx.js');
 
 const BusinessDetails = class {
     constructor(hostRef) {

package/dist/cjs/justifi-business-form.cjs.entry.js

@@ -11,7 +11,7 @@ require('./Refund-BefKONu4.js');
 require('./Pagination-Dediz133.js');
 var Business = require('./Business-DCRzZf0w.js');
 require('./Dispute-CruQTF6_.js');
-var checkPkgVersion = require('./check-pkg-version-CVOffMTi.js');
+var checkPkgVersion = require('./check-pkg-version-DfzaKEDg.js');
 var button = require('./button-DsHDMHaa.js');
 var styledHost = require('./styled-host-BfVJlAsJ.js');
 var header1 = require('./header-1-DRA3f4Jh.js');
@@ -27,7 +27,7 @@ require('./business-form-options-CMII7nIK.js');
 require('./index-B32W0A3m.js');
 require('./utils-ChCUZgUy.js');
 require('./helpers-B5OCqlIM.js');
-require('./package-MU7zz6nI.js');
+require('./package-CHNXn8wx.js');
 require('./Api-DyimBzKT.js');
 require('./parts-9jMf1erK.js');
 require('./utils-DvUQQLmR.js');

package/dist/cjs/justifi-checkout-summary_7.cjs.entry.js

@@ -9,7 +9,7 @@ require('./event-types-YOY5TKUN.js');
 var header1 = require('./header-1-DRA3f4Jh.js');
 var insuranceState = require('./insurance-state-d2thhXUX.js');
 var header3 = require('./header-3-sOdOpfx3.js');
-var checkPkgVersion = require('./check-pkg-version-CVOffMTi.js');
+var checkPkgVersion = require('./check-pkg-version-DfzaKEDg.js');
 require('./config-state-BBOZIS8x.js');
 require('./dinero-BwNN_k7x.js');
 var ComponentError = require('./ComponentError-D4OLnOkg.js');
@@ -23,7 +23,7 @@ var Api = require('./Api-DyimBzKT.js');
 var index$1 = require('./index-D-dD-aC2.js');
 var paymentMethodOptionUtils = require('./payment-method-option-utils-WYHIHy-l.js');
 require('./index-B32W0A3m.js');
-require('./package-MU7zz6nI.js');
+require('./package-CHNXn8wx.js');
 require('./helpers-B5OCqlIM.js');
 require('./state-options-CIT9xdTz.js');
 
@@ -32,7 +32,7 @@ const Summary = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '2644d423d844136d86f7f6b1b80aa98b224146ac' }, index.h("section", { key: '2017758b2eb8bf6483ca4765e5f18279ff2f6de7' }, index.h("div", { key: '029f98c45be1e9c807eef1dbf1508e231c7215d1' }, index.h("div", { key: 'db1b7e220f5afd230ea1fcf5dc818f96d03f68b9', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: 'b9d401af17512a5f5ef24350f8c9e9ad1163d83e' }, index.h("span", { key: '5d7dcef6b946ae455cb2b8e57089f0365b8bb52b', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: 'cfc8fc46c2f87011de758ccce92a9f4bfbe2ba88', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
+        return (index.h(styledHost.StyledHost, { key: '3161e6f6a196c79d684574cafbc90bcf741b2150' }, index.h("section", { key: '594b4485ed4fd9d7c1ee7f4556f071139f92ef0c' }, index.h("div", { key: '5c2d14677dda6fc7ddcb074d4887b839385dca3a' }, index.h("div", { key: 'fb850cd7e9c11741349710696dd4e6241c98e805', part: parts.text }, checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.paymentDescription), index.h("div", { key: '959014d7fa2a9c97bae0c986313a604930c1e0f3' }, index.h("span", { key: '14ab0932a083568419b1c36c95f9072c73962b11', part: parts.text }, "Total"), "\u00A0", index.h("span", { key: '08a9e00332253070ae984b77eb2a9bab88eb3472', part: parts.text }, utils.formatCurrency(+(checkout_store.checkoutStore === null || checkout_store.checkoutStore === void 0 ? void 0 : checkout_store.checkoutStore.totalAmount))))))));
     }
 };
 
@@ -48,7 +48,7 @@ const Header = class {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (index.h(styledHost.StyledHost, { key: 'ae04a67a1eaf95d6d093fef23911ac4eb1523cfe' }, index.h(HeaderComponent, { key: '51b27dd180d113ebe9ac52f7ff10c494926f7cdf', text: this.text, class: this.class })));
+        return (index.h(styledHost.StyledHost, { key: 'eb3651b698897193d34a6c6456cd57dd0bd0bc43' }, index.h(HeaderComponent, { key: '39caee687f93d3d4d90e62d9fbcae318eaa8022e', text: this.text, class: this.class })));
     }
 };
 
@@ -165,6 +165,7 @@ const ModularCheckout = class {
         };
     }
     connectedCallback() {
+        console.log("connectedCallback", checkout_store.checkoutStore.checkoutLoaded);
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
             this.setupApplePayListeners(); // set up again listeners when DOM changes
@@ -468,7 +469,7 @@ const ModularCheckout = class {
         });
     }
     render() {
-        return index.h(index.Host, { key: '08b6e2c3f58745ac7865f686bafba4e18cbab268' });
+        return index.h(index.Host, { key: '7ee5bc2bb0a8c1ed497440c7b1f90d1a2fb3c8bb' });
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -1404,7 +1405,7 @@ const TokenizePaymentMethod = class {
         return paymentMethodId === Refund.PaymentMethodTypes.card ? (index.h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (index.h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: '8a7983cbb634e39612d9f464c3dde43c646356dd' }, index.h("form", { key: 'ef1d8bc768aeb880445283d4b00d41cd85b77d16' }, index.h("fieldset", { key: 'be8f72bb4aab7b52098f034a06ad8586fe3b89cb' }, index.h("div", { key: '0155b97ff6bf1c9364b2b71b337e981c89774bbe', class: "row gy-3" }, index.h("div", { key: '27bf72ad4b2729a94be20b8a22e196cb5550c078', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '3a9c4c7bf7830f66d22fa99fc1ca12f3dcaad390', class: "col-12" }, index.h("justifi-button", { key: '860fbcdc509a72abecc1e6abe2c8ff45a565ea46', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (index.h(styledHost.StyledHost, { key: '27acb4552c8e2431792108448608c039baa705c6' }, index.h("form", { key: '914d43a641bbc484da9399d9d7b938215666862b' }, index.h("fieldset", { key: '4df90b4279eaa9c02268074c1d4c630c75e54f26' }, index.h("div", { key: 'b4b8895c7e5b9a3e615d357e2a6fdba5c245decb', class: "row gy-3" }, index.h("div", { key: '10ecdd6afffef324179fabcab340e4290c22f594', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), index.h("div", { key: '3327294952c67643c9c77178f801bbbba09fd511', class: "col-12" }, index.h("justifi-button", { key: '6de96d2c0065f676e696433f8ef6438527830437', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/justifi-checkout.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C9hBD-32.js');
-var checkPkgVersion = require('./check-pkg-version-CVOffMTi.js');
+var checkPkgVersion = require('./check-pkg-version-DfzaKEDg.js');
 require('./config-state-BBOZIS8x.js');
 require('./dinero-BwNN_k7x.js');
 require('./ComponentError-D4OLnOkg.js');
@@ -14,7 +14,7 @@ var parts = require('./parts-9jMf1erK.js');
 var styledHost = require('./styled-host-BfVJlAsJ.js');
 require('./event-types-YOY5TKUN.js');
 var index$1 = require('./index-D-dD-aC2.js');
-require('./package-MU7zz6nI.js');
+require('./package-CHNXn8wx.js');
 require('./Api-DyimBzKT.js');
 require('./utils-ChCUZgUy.js');
 require('./index-B32W0A3m.js');