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

package/dist/collection/components/modular-checkout/sub-components/apple-pay.js

@@ -4,15 +4,13 @@ import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, } from "../..
 import { StyledHost } from "../../../ui-components";
 import ApplePaySkeleton from "./apple-pay-skeleton";
 import { ApplePayButton } from "../../../ui-components/apple-pay-button";
-import { checkoutStore, onChange } from "../../../store/checkout.store";
-import { configState } from "../../config-provider/config-state";
+import { checkoutStore } from "../../../store/checkout.store";
 export class ApplePay {
     constructor() {
         this.countryCode = "US";
         this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
         this.merchantDisplayName = "JustiFi Checkout";
         this.initiativeContext = "dev-checkout.justifi-staging.com";
-        this.apiBaseUrl = configState.apiOrigin;
         this.buttonType = ApplePayButtonType.PLAIN;
         this.buttonStyle = ApplePayButtonStyle.BLACK;
         this.disabled = false;
@@ -21,6 +19,7 @@ export class ApplePay {
         this.isProcessing = false;
         this.isAvailable = false;
         this.canMakePayments = false;
+        this.isConfigValid = true;
         this.error = null;
         this.handleApplePayClick = async () => {
             var _a;
@@ -31,6 +30,14 @@ export class ApplePay {
                 this.isProcessing = true;
                 this.error = null;
                 this.applePayStarted.emit();
+                console.groupCollapsed('[ApplePay Component] handleApplePayClick');
+                console.log('[ApplePay Component] click context:', {
+                    isProcessing: this.isProcessing,
+                    disabled: this.disabled,
+                    isAvailable: this.isAvailable,
+                    canMakePayments: this.canMakePayments,
+                    hasService: Boolean(this.applePayService),
+                });
                 const paymentRequest = {
                     countryCode: this.countryCode,
                     currencyCode: checkoutStore.paymentCurrency,
@@ -38,11 +45,18 @@ export class ApplePay {
                     supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
                     total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
                 };
-                const result = await this.applePayService.startPaymentSession(paymentRequest);
+                console.log("[ApplePay Component] paymentRequest", paymentRequest);
+                console.log('[ApplePay Component] identifiers snapshot:', {
+                    authTokenLength: checkoutStore.authToken ? String(checkoutStore.authToken).length : 0,
+                    accountId: checkoutStore.accountId,
+                });
+                const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
+                console.log("[ApplePay Component] startPaymentSession result", result);
                 if (result.success) {
                     this.applePayCompleted.emit({
                         success: true,
                         token: result.token,
+                        paymentMethodId: result.paymentMethodId,
                     });
                 }
                 else {
@@ -67,53 +81,60 @@ export class ApplePay {
             }
             finally {
                 this.isProcessing = false;
+                console.groupEnd();
             }
         };
     }
-    componentWillLoad() {
-        this.applePayService = new ApplePayService();
-        this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-        this.applePayService.setAuthToken(checkoutStore.authToken);
-        this.applePayService.setAccountId(checkoutStore.accountId);
-        this.initializeApplePay();
-    }
-    componentDidLoad() {
-        onChange('paymentAmount', () => {
-            this.initializeApplePay();
-        });
-        onChange('authToken', () => {
-            if (this.applePayService) {
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
-        });
-    }
-    watchPropsChange() {
-        this.initializeApplePay();
-    }
     async initializeApplePay() {
-        console.log('Initializing Apple Pay');
         try {
-            if (this.applePayService) {
-                this.applePayService.setApiBaseUrl(this.apiBaseUrl);
-                this.applePayService.setAuthToken(checkoutStore.authToken);
-            }
             this.isLoading = true;
             this.error = null;
-            if (!checkoutStore.paymentAmount) {
+            this.isConfigValid = true;
+            console.groupCollapsed('[ApplePay Component] initializeApplePay');
+            console.log('[ApplePay Component] checkout state snapshot:', {
+                paymentAmount: checkoutStore.paymentAmount,
+                paymentCurrency: checkoutStore.paymentCurrency,
+                hasAuthToken: Boolean(checkoutStore.authToken),
+                accountId: checkoutStore.accountId,
+            });
+            const hasRequiredConfig = Boolean(checkoutStore.paymentAmount) &&
+                Boolean(checkoutStore.paymentCurrency) &&
+                Boolean(checkoutStore.authToken);
+            if (!hasRequiredConfig) {
                 this.error = "Missing required Apple Pay configuration";
+                this.isConfigValid = false;
+                console.error("Apple Pay config error: missing required values", {
+                    paymentAmount: checkoutStore.paymentAmount,
+                    paymentCurrency: checkoutStore.paymentCurrency,
+                    hasAuthToken: Boolean(checkoutStore.authToken),
+                    accountId: checkoutStore.accountId,
+                });
+                this.applePayError.emit({ error: this.error });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
-            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
-            this.canMakePayments = true; // ApplePayHelpers.canMakePayments();
+            this.isAvailable = ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = ApplePayHelpers.canMakePayments();
+            console.log('[ApplePay Component] support check:', {
+                isAvailable: this.isAvailable,
+                canMakePayments: this.canMakePayments,
+                hasApplePaySessionOnWindow: typeof window !== 'undefined' && 'ApplePaySession' in window,
+            });
             if (!this.isAvailable) {
                 this.error = "Apple Pay is not supported on this device";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             if (!this.canMakePayments) {
                 this.error = "Apple Pay is not available";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
                 this.isLoading = false;
+                console.groupEnd();
                 return;
             }
             const applePayConfig = {
@@ -124,11 +145,8 @@ export class ApplePay {
                 buttonType: this.buttonType,
                 buttonStyle: this.buttonStyle,
             };
-            console.log('=== APPLE PAY CONFIG ===');
-            console.log('Config:', applePayConfig);
-            console.log('Auth token present:', !!checkoutStore.authToken);
-            console.log('Account ID:', checkoutStore.accountId);
-            this.applePayService.setAccountId(checkoutStore.accountId);
+            console.log('[ApplePay Component] initializing service with config:', applePayConfig);
+            this.applePayService = new ApplePayService();
             this.applePayService.initialize(applePayConfig);
             const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
             if (!hasActiveCard) {
@@ -141,9 +159,11 @@ export class ApplePay {
                 error instanceof Error
                     ? error.message
                     : "Failed to initialize Apple Pay";
+            this.applePayError.emit({ error: this.error });
         }
         finally {
             this.isLoading = false;
+            console.groupEnd();
         }
     }
     async isSupported() {
@@ -164,42 +184,14 @@ export class ApplePay {
         const isReady = !this.isLoading &&
             this.isAvailable &&
             this.canMakePayments &&
-            !this.error;
-        return (h(StyledHost, { key: '45f2eaf52c3a2b2641a9cf6b22861de0a2a628a6' }, h("script", { key: '42a858aefc0e5ff23d5cf322ebca4408d7ac745f', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: '87ff666f7a898051253e18a1c14a9fca0373b1a8', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '3b4a24e3e8f4a4fdde1b134b61d7cbe422b40fd9', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: 'a6f58df266b99e385eb38f7d8104906966b337af', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'c97d5489a323df55a97a5d3395fd4e14363ba32b', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: 'd6447983dcf879d061d1b4d6d06300e9df3430d4', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: 'd58714c3a66403876a1b92f7de5a2981a71baaa4', class: 'apple-pay-unavailable' }, h("span", { key: '7d01800c0044a6b1cce70d76da8c4b37e9d592c8', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
-            !this.error &&
-            this.isAvailable &&
-            this.canMakePayments && (h(ApplePayButton, { key: '6e950987ae3c2d7c5168028f48a6400bd97a0692', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '2358f7ee9df1d9d270754801b00be2c807c2a10c' }, `
+            this.isConfigValid;
+        return (h(StyledHost, { key: 'a50061a2a487a9cddb9e9296ca508cd632cdf832' }, checkoutStore.checkoutLoaded && (h("script", { key: 'eb9a9479294c125b0db7bccd5e90c99ea9e03bbf', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js', onLoad: () => {
+                console.log('[ApplePay Component] Apple Pay SDK script loaded');
+                this.initializeApplePay();
+            } })), h("div", { key: '901b1f84625bb6c5652612f364312250f7ebb779', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '87b38d500738e1cdb1bb166f02e29845de30eae1', isReady: isReady }), isReady && (h(ApplePayButton, { key: '18fa731162b597740ee6b15b7737668efed9c162', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '9d71379ac48b89babae91012ea22de91f4fb1b58' }, `
             .apple-pay-container {
               width: 100%;
             }
-
-            .apple-pay-error {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              padding: 12px;
-              background: #fef2f2;
-              border: 1px solid #fecaca;
-              border-radius: 8px;
-              color: #dc2626;
-              font-size: 14px;
-            }
-
-            .apple-pay-unavailable {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              padding: 12px;
-              background: #f9fafb;
-              border: 1px solid #e5e7eb;
-              border-radius: 8px;
-              color: #6b7280;
-              font-size: 14px;
-            }
-
-            .error-icon {
-              font-size: 16px;
-            }
           `)));
     }
     static get is() { return "justifi-apple-pay"; }
@@ -286,26 +278,6 @@ export class ApplePay {
                 "reflect": false,
                 "defaultValue": "\"dev-checkout.justifi-staging.com\""
             },
-            "apiBaseUrl": {
-                "type": "string",
-                "attribute": "api-base-url",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "configState.apiOrigin"
-            },
             "buttonType": {
                 "type": "string",
                 "attribute": "button-type",
@@ -406,6 +378,7 @@ export class ApplePay {
             "isProcessing": {},
             "isAvailable": {},
             "canMakePayments": {},
+            "isConfigValid": {},
             "error": {}
         };
     }
@@ -436,8 +409,8 @@ export class ApplePay {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    success: boolean;\n    token?: IApplePayToken;\n    error?: any;\n  }",
-                    "resolved": "{ success: boolean; token?: IApplePayToken; error?: any; }",
+                    "original": "{\n    success: boolean;\n    token?: IApplePayToken;\n    paymentMethodId?: string;\n    error?: any;\n  }",
+                    "resolved": "{ success: boolean; token?: IApplePayToken; paymentMethodId?: string; error?: any; }",
                     "references": {
                         "IApplePayToken": {
                             "location": "import",
@@ -533,22 +506,4 @@ export class ApplePay {
             }
         };
     }
-    static get watchers() {
-        return [{
-                "propName": "merchantIdentifier",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "apiBaseUrl",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonType",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "buttonStyle",
-                "methodName": "watchPropsChange"
-            }, {
-                "propName": "disabled",
-                "methodName": "watchPropsChange"
-            }];
-    }
 }

package/dist/collection/components/modular-checkout/sub-components/bank-account-billing-form-simple.js

@@ -32,7 +32,7 @@ export class BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '5d20a10cee1aae5c6500b5ce0045859f9c2b9e60' }, h("div", { key: '9c5f77f6b03a70b4825bf40dd470d757cfe1eb50', part: billingForm, class: "mt-4" }, h("form", { key: 'a588d182b5d0a212d74fec4a7ce77bc743e387ca' }, h("fieldset", { key: '997ae96111c02eba64b6109786d634f0fe1d28d1' }, this.legend && (h("legend", { key: 'fdcaf97a5968bcdfa6e79b8da9ab8f111721ba3c' }, this.legend)), h("div", { key: '2b56bb94f907d2e6a68b8177c0d1dd77fae92aae', class: "row gy-3" }, h("div", { key: '0588a51e0d9a2bb0d643688677f02e2473c834f5', class: "col-12" }, h("form-control-text", { key: '06706f6b9db8f6ae7f732d8423b47af99718a2d7', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
+        return (h(StyledHost, { key: '81a8511265b4813817b4cf183aa176b464645e85' }, h("div", { key: '7dddd3ec7822077268c73da7d0f34a691ddde1cb', part: billingForm, class: "mt-4" }, h("form", { key: '1c9000a4b022209129cf511d79a77cf3dc44b77e' }, h("fieldset", { key: '134c349c5745197b5ebb79b31748bf480e1cab7a' }, this.legend && (h("legend", { key: 'fb8e12086fd6fb51f7456d8fc6e82a9184514d4f' }, this.legend)), h("div", { key: 'a49ae2d182e442efbe44aae7c2e0a4e40dabe7d7', class: "row gy-3" }, h("div", { key: '2be4b2aab266d0fc17f32237693dea8578c7545d', class: "col-12" }, h("form-control-text", { key: '92d1b3b05ba04212e46feecfd886f7dcc912e4fe', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler }))))))));
     }
     static get is() { return "justifi-bank-account-billing-form-simple"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/bank-account.js

@@ -40,10 +40,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: 'f6b75ae15faeea635abbdcbefee10a8bdb78ba08' }, h(BankAccountFormSkeleton, { key: '39f42d054342305001a934feeb29c65caa0fe941', isReady: this.isReady }), h("hidden-input", { key: 'd4bf758fe0600db0f1535ff9040cc3d9e25c45b9' }), h("div", { key: '095bd8da35c668c7c40d696454310e0e320a1730', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '99ccb5aa2afbf79e5bf40d59ca15eb217180349a' }, h(BankAccountFormSkeleton, { key: 'a26a6f4391a5e5b7923f36b05bdfe57491b31d8a', isReady: this.isReady }), h("hidden-input", { key: '7555fe1bbf38a1525e7c11fe7182e264752435c9' }), h("div", { key: 'd1d7141ee75a644d4ae67d23b353dc6293306371', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'db367bbd03c3d563913228c1051bdb9bb61c11a9', class: "row mb-3" }, h("iframe-input", { key: 'e636d0226cf832f6cd7fde39ea5f471aae6d4605', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '410dd5cdca9e6774f96133fe4dbb29f0d1405138', class: "row" }, h("iframe-input", { key: '26b7138268f6e4f866c4eaf3d2f9c4b0ba00a6c3', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'db0d578ccb3647e049b5ef958bef0273a8945448', class: "row mb-3" }, h("iframe-input", { key: '58311d94a8f5f023f05de260afbaf6bc707a0d57', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '92e4b77f012a414ac88b8faf721b5a10f2c5a3a4', class: "row" }, h("iframe-input", { key: '5163f7e8cff8fb82bb009f615ef7ab2e231deb52', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "justifi-bank-account-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/card-billing-form-simple.js

@@ -33,7 +33,7 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(StyledHost, { key: '2d6aa2cd3535338d3944b5bfa1f3e1b6c9fa237d' }, h("div", { key: '0d05444651f2ff00d25b11522ab4e30ce7e24f03', part: billingForm }, h("form", { key: 'fb3daca11e18c7cc068cc29650265a6fc2f48f7c' }, h("fieldset", { key: '2f32c7b540623519c2c7b3f781a1353be847e28c' }, this.legend && (h("legend", { key: '1def4406192651e851b94574abdb10c6f4c86a42' }, this.legend)), h("div", { key: '242b2ef201c5eafe083200cc1d9c4988f4229f5c', class: "row gy-3" }, h("div", { key: 'c7d8084f259ad0591bdd524af579b98048730f19', class: "col-12" }, h("form-control-text", { key: '8ad5e18bde33254f02d72307f8b16e0ba6212beb', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(StyledHost, { key: 'a88ea2aa0b1cc2fccda7c169aad9c061e106ecfe' }, h("div", { key: '414df056d92819bf646886ca8e15f2ed10e6ab18', part: billingForm }, h("form", { key: 'c11f6eb5c7c5c1ecbeb8cc8f644a3b3ba72254c7' }, h("fieldset", { key: 'dd69c65ff7f36da3954c01ca2401e8ede6799f14' }, this.legend && (h("legend", { key: '25a86a61452b84237cc58c047916de22c35b764d' }, this.legend)), h("div", { key: '2fa8445fcf4ac0500f357d92480f18ccac655689', class: "row gy-3" }, h("div", { key: 'b7ac75fcab43435a03ad919757541f74661ce5b4', class: "col-12" }, h("form-control-text", { key: 'fd9e84c9605edf1a987c7243409eb0182f79a803', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-card-billing-form-simple"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,10 +44,10 @@ export class JustifiCardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(StyledHost, { key: '18d429a9feac5ab030ab040a9aec0efdc0a09b3a' }, h(CardFormSkeleton, { key: '8a7a41be9477f7656601a1b21bbd89398846ddda', isReady: this.isReady }), h("hidden-input", { key: '256715cd96354c50903c03e15b3de7a81c25e59f' }), h("div", { key: 'd55bae0a16f8572e476f012594ca99074e1f3af5', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '46991f66161e4118fdf135bf18eb757435e26457' }, h(CardFormSkeleton, { key: 'aacb7f467a10debc809997a67172fe4f23a2ca76', isReady: this.isReady }), h("hidden-input", { key: '3e9bd9b7ff0aba356d9f8fd07428cbaedcb223b1' }), h("div", { key: '8fcf6d92703491fe6a0be076a5965c09c800f262', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '7d1906ad3065c71e5871c0fbb30686dcfa011ecb', class: "mb-3" }, h("iframe-input", { key: 'cabb51df56859dcf77a8e7b1bd18841eea872a96', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dc14f4d1cadd95587cee0e0fbf82b48b7ade1ffb', class: "row" }, h("div", { key: 'd6637ada2d0b35e41ffceedd4427bc8e819a564d', class: "col-4 align-content-end" }, h("iframe-input", { key: '57bac9f6b1695cb62f60483b4350aa9a1365f944', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '2264ccbe1c8ca30b3359cf52b3cef7ac0707462e', class: "col-4 align-content-end" }, h("iframe-input", { key: '0195b665d1b4809c9ab04c68fcd3de6a1f6af562', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '07578e7173b66895b84091184f7f3166fcf00314', class: "col-4 align-content-end" }, h("iframe-input", { key: 'cea4796ffdec09d0c9b56d3a09d5e0571744a966', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '8dea63dc69d7c7cfbcded0a07bfbcf9c7d7a41fa', class: "mb-3" }, h("iframe-input", { key: 'ffd4de932414b206ea5936c21349c522b762f8a4', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '3e56350822761119dbb7ff49e3cc56bec7f361ca', class: "row" }, h("div", { key: 'ab13b6b20573fbec961164a415ccaf21b663eb4b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e12d56f2c1dd12ae5eff7619204d9f746e1b6a43', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '62e4808ee208aec7cf3e1d7a99fd65f3d9a5e615', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c8e3945b466e61e8b21fbb13f71c0631740ca1a3', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '979929e29abb54f8837f71b1cdb7261df97a58df', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c25868c5fd7e6c2d34722b39f22c2062248cdf6', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "justifi-card-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/payment-method-option.js

@@ -3,7 +3,7 @@ import { radioListItem } from "../../../styles/parts";
 import { StyledHost } from "../../../ui-components";
 export class PaymentMethodOption {
     render() {
-        return (h(StyledHost, { key: 'a9d1a1ac11a9a39fa8e9e27fbab66793289c1538', class: "payment-method" }, h("div", { key: 'e9672061e4e5fa5244a51fd3b4cf34ca996f6ffb', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'a4f0985f9c9f609c14e664976c132c2bedf8db38', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '276e7685b6f5b7430fdac887fa5f270245011f6d', class: "payment-method" }, h("div", { key: '032431a1a0e3e97077c84f02288e3e0d1334e230', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '33a53344736a2a5d8546cbec24cc6c4aaebf7629', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }