@justifi/webcomponents 6.0.0-rc.4 → 6.0.0-rc.6

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const ApplePaySkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: 'container-fluid p-0' }, h("div", { class: 'row mb-3' }, h("div", { class: 'col-12 align-content-center' }, h(Skeleton, { height: '44px', width: '100%', styles: { borderRadius: "8px" } })))));
+};
+export default ApplePaySkeleton;

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

@@ -0,0 +1,515 @@
+import { h, } from "@stencil/core";
+import { ApplePayService } from "../../../api/services/apple-pay.service";
+import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, } from "../../../api/ApplePay";
+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";
+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.buttonType = ApplePayButtonType.PLAIN;
+        this.buttonStyle = ApplePayButtonStyle.BLACK;
+        this.disabled = false;
+        this.showSkeleton = true;
+        this.isLoading = true;
+        this.isProcessing = false;
+        this.isAvailable = false;
+        this.canMakePayments = false;
+        this.error = null;
+        this.handleApplePayClick = async () => {
+            var _a;
+            if (this.isProcessing || this.disabled || !this.isAvailable) {
+                return;
+            }
+            try {
+                this.isProcessing = true;
+                this.error = null;
+                this.applePayStarted.emit();
+                const paymentRequest = {
+                    countryCode: this.countryCode,
+                    currencyCode: checkoutStore.paymentCurrency,
+                    merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
+                    supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
+                    total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
+                };
+                const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
+                if (result.success) {
+                    this.applePayCompleted.emit({
+                        success: true,
+                        token: result.token,
+                        paymentMethodId: result.paymentMethodId,
+                    });
+                }
+                else {
+                    this.applePayCompleted.emit({
+                        success: false,
+                        error: result.error,
+                    });
+                    this.applePayError.emit({
+                        error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "Payment failed",
+                    });
+                }
+            }
+            catch (error) {
+                console.error("Apple Pay payment error:", error);
+                const errorMessage = error instanceof Error ? error.message : "Payment failed";
+                this.error = errorMessage;
+                this.applePayError.emit({ error: errorMessage });
+                this.applePayCompleted.emit({
+                    success: false,
+                    error: errorMessage,
+                });
+            }
+            finally {
+                this.isProcessing = false;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.applePayService = new ApplePayService();
+        this.initializeApplePay();
+    }
+    componentDidLoad() {
+        onChange("paymentAmount", () => {
+            this.initializeApplePay();
+        });
+        onChange("authToken", () => {
+            this.initializeApplePay();
+        });
+    }
+    watchPropsChange() {
+        this.initializeApplePay();
+    }
+    async initializeApplePay() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            if (!checkoutStore.paymentAmount) {
+                this.error = "Missing required Apple Pay configuration";
+                this.isLoading = false;
+                return;
+            }
+            this.isAvailable = ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = ApplePayHelpers.canMakePayments();
+            if (!this.isAvailable) {
+                this.error = "Apple Pay is not supported on this device";
+                this.isLoading = false;
+                return;
+            }
+            if (!this.canMakePayments) {
+                this.error = "Apple Pay is not available";
+                this.isLoading = false;
+                return;
+            }
+            const applePayConfig = {
+                merchantIdentifier: this.merchantIdentifier,
+                displayName: this.merchantDisplayName,
+                initiative: "web",
+                initiativeContext: this.initiativeContext,
+                buttonType: this.buttonType,
+                buttonStyle: this.buttonStyle,
+            };
+            this.applePayService.initialize(applePayConfig);
+            const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
+            if (!hasActiveCard) {
+                console.warn("No Apple Pay cards available, but continuing...");
+            }
+        }
+        catch (error) {
+            console.error("Apple Pay initialization error:", error);
+            this.error =
+                error instanceof Error
+                    ? error.message
+                    : "Failed to initialize Apple Pay";
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async isSupported() {
+        return this.isAvailable && this.canMakePayments;
+    }
+    async getPaymentMethods() {
+        if (!this.isAvailable) {
+            return [];
+        }
+        return ApplePayHelpers.getDefaultSupportedNetworks();
+    }
+    async abort() {
+        this.applePayService.abortPaymentSession();
+        this.isProcessing = false;
+        this.applePayCancelled.emit();
+    }
+    render() {
+        const isReady = !this.isLoading &&
+            this.isAvailable &&
+            this.canMakePayments &&
+            !this.error;
+        return (h(StyledHost, { key: 'd07bd5b228a761fe021830823b410805b44c6829' }, h("script", { key: '59ca72df49c6210c3122df6328e3b9798ff3440f', async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), h("div", { key: '69010db6e3e59ffb1ad9d7cc5af0680934c61207', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: 'f25d2ae58d6730c9dbf9a02ac14cf5800e3ca6ed', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '0460b10f967df69f04984c17b6b1641db3dfd582', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'a194317367175498c098c522cc2ee77ae0848e25', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '8eb5cb96fb00f2deb9b76796d09979d488f5d922', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '97fd0863a893a98b01b9886dc94a088cb87419e4', class: 'apple-pay-unavailable' }, h("span", { key: 'fde1d32be78fc35024bea1c4f81b02a9d792b41e', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
+            !this.error &&
+            this.isAvailable &&
+            this.canMakePayments && (h(ApplePayButton, { key: '1e445d7b72f378f7bac6f62e069a526f1d9ae9ba', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: 'd552fd4b0726a63ed9a242b3b2204dc6339ef590' }, `
+            .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"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "countryCode": {
+                "type": "string",
+                "attribute": "country-code",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"US\""
+            },
+            "merchantIdentifier": {
+                "type": "string",
+                "attribute": "merchant-identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"merchant.com.staging-justifi.checkout-dev\""
+            },
+            "merchantDisplayName": {
+                "type": "string",
+                "attribute": "merchant-display-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"JustiFi Checkout\""
+            },
+            "initiativeContext": {
+                "type": "string",
+                "attribute": "initiative-context",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"dev-checkout.justifi-staging.com\""
+            },
+            "buttonType": {
+                "type": "string",
+                "attribute": "button-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "ApplePayButtonType",
+                    "resolved": "ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE | ApplePayButtonType.PLAIN | ApplePayButtonType.SET_UP | ApplePayButtonType.SUBSCRIBE",
+                    "references": {
+                        "ApplePayButtonType": {
+                            "location": "import",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::ApplePayButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ApplePayButtonType.PLAIN"
+            },
+            "buttonStyle": {
+                "type": "string",
+                "attribute": "button-style",
+                "mutable": false,
+                "complexType": {
+                    "original": "ApplePayButtonStyle",
+                    "resolved": "ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE",
+                    "references": {
+                        "ApplePayButtonStyle": {
+                            "location": "import",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::ApplePayButtonStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ApplePayButtonStyle.BLACK"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showSkeleton": {
+                "type": "boolean",
+                "attribute": "show-skeleton",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isProcessing": {},
+            "isAvailable": {},
+            "canMakePayments": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "applePayStarted",
+                "name": "applePayStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "applePayCompleted",
+                "name": "applePayCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "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",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::IApplePayToken"
+                        }
+                    }
+                }
+            }, {
+                "method": "applePayCancelled",
+                "name": "applePayCancelled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "applePayError",
+                "name": "applePayError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ error: string }",
+                    "resolved": "{ error: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isSupported": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getPaymentMethods": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "abort": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "merchantIdentifier",
+                "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: '747d0bd674b599caae42830991744c3fae14e803' }, h(BankAccountFormSkeleton, { key: '003f7e171314684a54a6cae032741b9eb8cf6491', isReady: this.isReady }), h("hidden-input", { key: '6ba383c713664e59d4abd2ecc4275596d4632be5' }), h("div", { key: '81546cb09ecaec5f50c57e78d95714e6715cf019', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: 'f7b088f8dd8a977f3843183fb444f28862644fb3' }, h(BankAccountFormSkeleton, { key: '63179b2a1616ac98e9647bc8a6cf8f32cf159c24', isReady: this.isReady }), h("hidden-input", { key: 'bc2427c6ae7ca231f444cac83789682c5b7f252b' }), h("div", { key: 'd7b8ad011f441f35130a8836d5a9998aeed5ef6f', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '21257886a4cd3667bf92b94de93f9f6d856c42f5', class: "row mb-3" }, h("iframe-input", { key: '80102dd11c42053e8b7b9b4d3f586d28400e759f', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: 'b513ba0b350c390e554dd6d30acf636dc9bddff3', class: "row" }, h("iframe-input", { key: '8929a99c7fbe37148416295d92018a6291cbc9e6', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '87c14b39416411432109fa477a45905824986a5d', class: "row mb-3" }, h("iframe-input", { key: 'aa63db40e7dcff302c804b6f772a8903ac53a588', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '683ff288ff835321c364b4af64524dbf183da030', class: "row" }, h("iframe-input", { key: '46653b74876dfc02916b7d2842ab793b8658e8b2', 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: '4aca2e72165125e0ddf34c978c29eca6ae3bded1' }, h(CardFormSkeleton, { key: 'bfe670e2a84a1945babf9f0f27ab33387fd3e320', isReady: this.isReady }), h("hidden-input", { key: 'ae76e3246979e71ea916109dbba61d041a0434bb' }), h("div", { key: '192dee5354b70a59030a7258b4282636a8b0d545', class: "container-fluid p-0", style: {
+        return (h(StyledHost, { key: '75938c15dce1b5b078773f28c689c8f7d4ad5059' }, h(CardFormSkeleton, { key: 'fa27e1cb7262b012e69c6c88580bfa432edb13f0', isReady: this.isReady }), h("hidden-input", { key: '305afc644870ea4c5e11ade42e6f8b5504b0a299' }), h("div", { key: 'fc87adbea2130fd4334f2f7a8dbc666ad9b84f76', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'edc562e49002e4fc5d59975f2faec7d4cb53e7c4', class: "mb-3" }, h("iframe-input", { key: '597cda9d529c3099bf0afe121b62dc425d0199b6', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '41436372ad92b6bb30be16057340caf56a22c656', class: "row" }, h("div", { key: '5ac0a9964db760b293ceba8730e4cdd1ba50382e', class: "col-4 align-content-end" }, h("iframe-input", { key: '3b5d4e5c535a3e0e7eaffdf3e1f5afdceac3738c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'd946453b6fa4c99dd9c7f5d64ee7171ebebbb67f', class: "col-4 align-content-end" }, h("iframe-input", { key: 'b132330a64b46d6506debf79c87282598c2fbf5a', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '21b5cfbf2aa6e038dc13910108dcd85c800e09cf', class: "col-4 align-content-end" }, h("iframe-input", { key: '4a266eef3d8636b5852a090ee20e6d014296e6dc', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: 'b426b711813d401e181c833c06f440adc2998f4a', class: "mb-3" }, h("iframe-input", { key: '1c81cac902a472ffe841340de40c8aa80688d908', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '370fb4bd7951ea6948b57923141842da07575bd3', class: "row" }, h("div", { key: '7912c07831d685c0f30d103537933c4ec0e41726', class: "col-4 align-content-end" }, h("iframe-input", { key: 'a892fead0333523eecd1a6e02fb6cd3807e1b0ad', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '699f614dcada9748525afe53cd461a5dd4f96847', class: "col-4 align-content-end" }, h("iframe-input", { key: '0c65a7fbb4bf1fa35fc645de62723f8d130217de', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'b25d6322892f5a3313db2592193552f34e364103', class: "col-4 align-content-end" }, h("iframe-input", { key: '279646b3bfa68f8e03d0118e2de86668471f5821', 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: 'aebf05239985d34458540500c4c499e27b89ae8b', class: "payment-method" }, h("div", { key: 'dec8e357a96e94ae3756c3e3b7d47bc43c6dcb93', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'ea72465e4fbe8f4dff434dcad8ab6e908ff3a3b2', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '2348e1f435417c0d5379133d3a648760637cbf41', class: "payment-method" }, h("div", { key: '7fbc5c47891a86bead7e62b8df3fad972b91b3f0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'de7b2236e04dc2b8a0dc7e0434c4de66f612366a', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }