@justifi/webcomponents 6.0.0-rc.3 → 6.0.0-rc.5

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

@@ -0,0 +1,555 @@
+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,
+                        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.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: 'caa7c4f60ce054bc03c3749871369e8e47c1afaa' }, h("script", { key: 'a85d7950ff0053a2b7a2c78065013d3279b2a56c', async: true, src: "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" }), h("div", { key: '2d1a0748b3c8af0984a205998e60608b8192f45a', class: 'apple-pay-container' }, h(ApplePaySkeleton, { key: '42a06fcb5e13a76a6c85e690f5ca2a0781298b20', isReady: isReady }), !this.isLoading && this.error && (h("div", { key: '54ef9e349224f4750d6aa8c7afcada352f4e8f33', class: 'apple-pay-error', role: 'alert' }, h("span", { key: 'fe25095563775b06b2f7efb32e8d1853b4bd6087', class: 'error-icon' }, "\u26A0\uFE0F"), h("span", { key: '23eb21f755549a9569743979c33af7d3ae7e879b', class: 'error-message' }, this.error))), !this.isLoading && !this.error && !this.isAvailable && (h("div", { key: '4a44add4b7a0a586315ffc2a26a4526acd9fdcfd', class: 'apple-pay-unavailable' }, h("span", { key: '071e8c18c08efbbb15074360393c8888f676f855', class: 'unavailable-message' }, "Apple Pay is not available on this device"))), !this.isLoading &&
+            !this.error &&
+            this.isAvailable &&
+            this.canMakePayments && (h(ApplePayButton, { key: '67a22cb5855a5a470114a04daa3284b556c6a3fc', buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", { key: '82dc1ca5dc7c43ffcc06ab10a4b97bc445d73f46' }, `
+            .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    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": "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.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: '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: '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: '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-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: '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: '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: '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: '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: '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: '74b2a1ebf22f1f7e7cb0cfbbbba8a3f8cd528a6b' }, h("section", { key: '6ea0bd41680b937c0ff88aa0f73c1ac4bccee9b9' }, h("div", { key: '6ca013f92dbaf076bda9a65c98acdf5c8192b22a' }, h("div", { key: '62f166bdc0b47e8cda03ee4d549736aaf336727e', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'c681ecba3bbceac71993833f8861393dc5751b4c' }, h("span", { key: '46eaedc091f44c2d3bad94cb6a05098385be8ebc', part: text }, "Total"), "\u00A0", h("span", { key: 'ad70de1a38c2c7625562cee3a745a6a61235f4cf', 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: '866ce6548ba7252581c370fc33cad23e6a302f4e' }, h("div", { key: '2fbdde66e65ac95347a6b50e60f258a8e814e3ab', 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"; }

package/dist/collection/components/order-terminals/terminal-quantity-selector/terminal-quantity-selector.js

@@ -18,7 +18,7 @@ export class TerminalQuantitySelector {
         };
     }
     render() {
-        return (h("div", { key: 'a1e81baf3c6db04cae113ec9efdbdf990210413f', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: 'f8a1e39815a7932f7d452a055652a8cd22508310', class: "d-flex gap-3" }, h("div", { key: 'e7df0cd31126428f5ad374a855505e6c701b3f64', class: "d-flex align-items-center" }, h("img", { key: 'c32e1a286ffbf382c7400041df7573ea5c5ae736', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '05cf7f5c7ac3b9259334ff0a54a79e5f67bf89f8', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: '99031623ae281a4142710391361b0bfee8bb2fe0', class: "row" }, h("div", { key: 'c5e81e4acc36a90ae70aef260fb8304c70b2d3a1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '0a7484029de75b1591f3389929cd313261c53a52', helpText: this.description })), h("div", { key: 'bfe5d3dd9c758a46a0ddcf4919e98798703f9d73', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'de3891aad65c2865b3f4a8777eeadf0836c5ef39', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'a0c9ab81984ae26dca9636a26de2c7e24e3f9989', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '206dc9d22cdd7cea8b3a8d70c9ce28156d8d1a4c', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: '0b6c6622a2a25650c3713682888e9e3e842baebf', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: 'd8cb3815b1490dd7a8ae8dad06db84df65d84782', class: "d-flex gap-3" }, h("div", { key: '9f68c206b1a358fd9427615d1596d798678ea2e9', class: "d-flex align-items-center" }, h("img", { key: 'df5982d69ecc957a4536b2cc768dc682e3d1bef7', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '0ef6b9ee7fcbb6b7dd220c73835079571fbff861', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'f39724e9b712641914a4def251e48a0ed9b384b3', class: "row" }, h("div", { key: '200ba52e240dc6797423b25d1b056670f900a64d', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'bc52a0b94f09c8ebaeeb73f31878ca38d608ec80', helpText: this.description })), h("div", { key: '78029284d86432413ac3d3b00b6ca3b42327221c', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'b8822c9e6c10baf55f631061f6984c1d4f15f4e0', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '0d5662d0d3b39933ae53284c5083bf48f7ce0b38', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'ec9918b84364e12ecf0d39d3241793f8ab02a910', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {