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

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

@@ -0,0 +1,554 @@
+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";
+import { configState } from "../../config-provider/config-state";
+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;
+        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);
+                if (result.success) {
+                    this.applePayCompleted.emit({
+                        success: true,
+                        token: result.token,
+                    });
+                }
+                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.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.error = "Missing required Apple Pay configuration";
+                this.isLoading = false;
+                return;
+            }
+            this.isAvailable = true; // ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = true; // 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,
+            };
+            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);
+            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: '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' }, `
+            .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\""
+            },
+            "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",
+                "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    error?: any;\n  }",
+                    "resolved": "{ success: boolean; token?: IApplePayToken; 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": "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: '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 }))))))));
+        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 }))))))));
     }
     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: '653403782a62c5a2ea0675f9633c7197503c9ab7' }, h(BankAccountFormSkeleton, { key: '63f13c4e3c7ca588a17837faeca840302675c927', isReady: this.isReady }), h("hidden-input", { key: '7d825c7c130942e751f3ba17d195e979c406f4a6' }), h("div", { key: 'd9fec72e9526c9dadd3cae0af98d99b024320a2c', class: "container-fluid p-0", style: {
+        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: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '22047ead687c0eb6cb724343091eac42760d93a4', class: "row mb-3" }, h("iframe-input", { key: '5f5a1300d37439b3c936dcc13e1e17cf779c9ba0', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '2898faa832be4454b81047cdc220cc418b6a6783', class: "row" }, h("iframe-input", { key: '962fc1a8504d5e84386818936b27d38ca580c410', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, 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` })))));
     }
     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: '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 }))))))));
+        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 }))))))));
     }
     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: 'a53db7e555c2a1df6679bf9ddeada18d9e750a3d' }, h(CardFormSkeleton, { key: '70eda1f05670b09bdb6a5f9f506f5828fec0cd71', isReady: this.isReady }), h("hidden-input", { key: '648480344a5a79e79d8396cdcc402f63f40b2b18' }), h("div", { key: 'd7bcf16f905367429ddf4be468d12f603135affa', class: "container-fluid p-0", style: {
+        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: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '9860508b6a16ae4a37d96c3d259237ccd17b28f1', class: "mb-3" }, h("iframe-input", { key: 'c37ec02e0b2f8465c4118892f0b51faaf9a57cdf', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '097258a271969ef38a1d32a5aa0b20c5443de991', class: "row" }, h("div", { key: 'ad2b656c503abd6aca2eea0842a70358097c452e', class: "col-4 align-content-end" }, h("iframe-input", { key: '3e3fda000e1ea41e44a337a1efd886ce7d9503f7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '13f33bd008ad4c6407336775d35b752c0e6eb8e5', class: "col-4 align-content-end" }, h("iframe-input", { key: '3dcf445381f39544a1421569151c76c47e790456', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'fbc26d74b4e18b7a77639d8b53720ca4e7bdd201', class: "col-4 align-content-end" }, h("iframe-input", { key: '400c65fa8efb358396e561b3ba2a5ac13c3bcbbe', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, 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` }))))));
     }
     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: '8055addaf7563d5deb7d9b31794bf36e1d273a0d', class: "payment-method" }, h("div", { key: '5fb85a3e5c94eff4e397ba5b23d3fb7a34e4c312', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'b36c23bb6eeee3fc7325ea6d9b46aed4fc43c21c', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        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 }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { checkoutStore } from "../../../store/checkout.store";
 import { StyledHost } from "../../../ui-components";
 export class Summary {
     render() {
-        return (h(StyledHost, { key: 'fccb819d66329424af42e9c53effec29a6c9784d' }, h("section", { key: '0ee7a4e0579f7f222a9db82e6b4db6bb92542d9e' }, h("div", { key: 'bdf74b2bc5db35b96ca75d50783b790bb482a76e' }, h("div", { key: '851b481bd6beb1fcaadc106d27d131f8b07d1c9a', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '0b261bc0e2d65cf989778e02df51b3265816f7aa' }, h("span", { key: '0eee0017ddf25ae45d6b5c828071098f45e6e19d', part: text }, "Total"), "\u00A0", h("span", { key: 'd21576f14c3437f70a4b85b9dfc01107392d663a', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: '28a1a324b8cdf2dea0aafe91fbdd3679482e76f8' }, h("section", { key: 'e8ffe2fdd1592a0b762647fdab94ee5e21436a93' }, h("div", { key: '099fbfb449066290cdcd113b0de5f87334777a0e' }, h("div", { key: 'c78325957b4e00299366b8e9efe6fd6e86da3b97', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'd077da888b03a34e540f66ebaa57502fe22be7c4' }, h("span", { key: 'd4f7ddd24e10302222679a9f73c3b5ed305267a7', part: text }, "Total"), "\u00A0", h("span", { key: '1f5d7b6b0cce64eea04879e7767ff87ce5a64069', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
     }
     static get is() { return "justifi-checkout-summary"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/order-terminals/order-terminals.js

@@ -126,7 +126,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '5171ddb7b807bf4084f0f831002803a4ece698f3' }, h("div", { key: '529adf4549be8b2723fca357be3f541403dfc8a3', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: 'bd9a460778680855f021376a57d6cecd71f9e560' }, h("div", { key: '7ac80b5f2499bdecb6f2c0e001f6c6631040c71e', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }