@justifi/webcomponents 5.7.6 → 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/{checkout/billing-form → modular-checkout/sub-components}/bank-account-billing-form-simple.js

@@ -1,7 +1,8 @@
-import { h, Host } from "@stencil/core";
-import { nameOnlySchema } from "./billing-form-schema";
+import { h } from "@stencil/core";
+import { nameOnlySchema } from "../../checkout/billing-form/billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { FormController } from "../../../ui-components/form/form";
+import { StyledHost } from "../../../ui-components";
 export class BankAccountBillingFormSimple {
     constructor() {
         this.errors = {};
@@ -31,9 +32,10 @@ export class BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '26bb004c8683881a5f7b6a4a7de3b1e2c680d157' }, h("div", { key: '89951cc4128e5b6578943af160eb44eb64d02272', part: billingForm, class: "mt-4" }, h("form", { key: '06ff2993369ed913abd9973fc7bb87514d047671' }, h("fieldset", { key: '29b61ffe7a9047a9909d8ed3688c41b9bbedc1d0' }, this.legend && (h("legend", { key: 'eb02a71dfa08b5b5b5e3646f96d9a6882b71bda0' }, this.legend)), h("div", { key: 'b6c5e23355c9a70423f23540f2a7191ae33aa738', class: "row gy-3" }, h("div", { key: 'a7f5606df9c5ca03de56ccaf3a809550a8437ff0', class: "col-12" }, h("form-control-text", { key: '688e677b9ceb86ae0c41715b12edbc6cee913424', 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"; }
     static get properties() {
         return {
             "legend": {
@@ -77,7 +79,7 @@ export class BankAccountBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "./billing-form-schema",
+                            "path": "../../checkout/billing-form/billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },
@@ -103,7 +105,7 @@ export class BankAccountBillingFormSimple {
                         },
                         "BillingFormFields": {
                             "location": "import",
-                            "path": "./billing-form-schema",
+                            "path": "../../checkout/billing-form/billing-form-schema",
                             "id": "src/components/checkout/billing-form/billing-form-schema.ts::BillingFormFields"
                         }
                     },

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const BankAccountFormSkeleton = (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-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
+};
+export default BankAccountFormSkeleton;