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

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

@@ -0,0 +1,509 @@
+import { h, } from "@stencil/core";
+import { ApplePayService } from "../../../api/services/apple-pay.service";
+import { ApplePayButtonType, ApplePayButtonStyle, ApplePayHelpers, } from "../../../api/ApplePay";
+import { StyledHost } from "../../../ui-components";
+import ApplePaySkeleton from "./apple-pay-skeleton";
+import { ApplePayButton } from "../../../ui-components/apple-pay-button";
+import { checkoutStore, onChange } from "../../../store/checkout.store";
+export class ApplePay {
+    constructor() {
+        this.countryCode = "US";
+        this.merchantIdentifier = "merchant.com.staging-justifi.checkout-dev";
+        this.merchantDisplayName = "JustiFi Checkout";
+        this.initiativeContext = "dev-checkout.justifi-staging.com";
+        this.buttonType = ApplePayButtonType.PLAIN;
+        this.buttonStyle = ApplePayButtonStyle.BLACK;
+        this.disabled = false;
+        this.showSkeleton = true;
+        this.isLoading = true;
+        this.isProcessing = false;
+        this.isAvailable = false;
+        this.canMakePayments = false;
+        this.isConfigValid = true;
+        this.error = null;
+        this.handleApplePayClick = async () => {
+            var _a;
+            if (this.isProcessing || this.disabled || !this.isAvailable) {
+                return;
+            }
+            try {
+                this.isProcessing = true;
+                this.error = null;
+                this.applePayStarted.emit();
+                const paymentRequest = {
+                    countryCode: this.countryCode,
+                    currencyCode: checkoutStore.paymentCurrency,
+                    merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
+                    supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
+                    total: ApplePayHelpers.createLineItem(checkoutStore.paymentDescription, checkoutStore.paymentAmount),
+                };
+                const result = await this.applePayService.startPaymentSession(paymentRequest, checkoutStore.authToken, checkoutStore.accountId);
+                if (result.success) {
+                    this.applePayCompleted.emit({
+                        success: true,
+                        token: result.token,
+                        paymentMethodId: result.paymentMethodId,
+                    });
+                }
+                else {
+                    this.applePayCompleted.emit({
+                        success: false,
+                        error: result.error,
+                    });
+                    this.applePayError.emit({
+                        error: ((_a = result.error) === null || _a === void 0 ? void 0 : _a.message) || "Payment failed",
+                    });
+                }
+            }
+            catch (error) {
+                console.error("Apple Pay payment error:", error);
+                const errorMessage = error instanceof Error ? error.message : "Payment failed";
+                this.error = errorMessage;
+                this.applePayError.emit({ error: errorMessage });
+                this.applePayCompleted.emit({
+                    success: false,
+                    error: errorMessage,
+                });
+            }
+            finally {
+                this.isProcessing = false;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.applePayService = new ApplePayService();
+        this.initializeApplePay();
+    }
+    componentDidLoad() {
+        onChange("paymentAmount", () => {
+            this.initializeApplePay();
+        });
+        onChange("authToken", () => {
+            this.initializeApplePay();
+        });
+    }
+    watchPropsChange() {
+        this.initializeApplePay();
+    }
+    async initializeApplePay() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            this.isConfigValid = true;
+            const hasRequiredConfig = Boolean(checkoutStore.paymentAmount) &&
+                Boolean(checkoutStore.paymentCurrency) &&
+                Boolean(checkoutStore.authToken);
+            if (!hasRequiredConfig) {
+                this.error = "Missing required Apple Pay configuration";
+                this.isConfigValid = false;
+                console.error("Apple Pay config error: missing required values", {
+                    paymentAmount: checkoutStore.paymentAmount,
+                    paymentCurrency: checkoutStore.paymentCurrency,
+                    hasAuthToken: Boolean(checkoutStore.authToken),
+                });
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            this.isAvailable = ApplePayHelpers.isApplePaySupported();
+            this.canMakePayments = ApplePayHelpers.canMakePayments();
+            if (!this.isAvailable) {
+                this.error = "Apple Pay is not supported on this device";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            if (!this.canMakePayments) {
+                this.error = "Apple Pay is not available";
+                console.error(this.error);
+                this.applePayError.emit({ error: this.error });
+                this.isLoading = false;
+                return;
+            }
+            const applePayConfig = {
+                merchantIdentifier: this.merchantIdentifier,
+                displayName: this.merchantDisplayName,
+                initiative: "web",
+                initiativeContext: this.initiativeContext,
+                buttonType: this.buttonType,
+                buttonStyle: this.buttonStyle,
+            };
+            this.applePayService.initialize(applePayConfig);
+            const hasActiveCard = await this.applePayService.canMakePaymentsWithActiveCard();
+            if (!hasActiveCard) {
+                console.warn("No Apple Pay cards available, but continuing...");
+            }
+        }
+        catch (error) {
+            console.error("Apple Pay initialization error:", error);
+            this.error =
+                error instanceof Error
+                    ? error.message
+                    : "Failed to initialize Apple Pay";
+            this.applePayError.emit({ error: this.error });
+        }
+        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 shouldHide = !this.isLoading &&
+            (!this.isConfigValid || !this.isAvailable || !this.canMakePayments);
+        if (shouldHide) {
+            return null;
+        }
+        const isReady = !this.isLoading &&
+            this.isAvailable &&
+            this.canMakePayments &&
+            this.isConfigValid;
+        return (h(StyledHost, null, h("script", { async: true, src: 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js' }), h("div", { class: 'apple-pay-container' }, h(ApplePaySkeleton, { isReady: isReady }), !this.isLoading &&
+            this.isAvailable &&
+            this.canMakePayments && (h(ApplePayButton, { buttonType: this.buttonType, buttonStyle: this.buttonStyle, disabled: this.disabled, isProcessing: this.isProcessing, isAvailable: this.isAvailable, clickHandler: this.handleApplePayClick }))), h("style", null, `
+            .apple-pay-container {
+              width: 100%;
+            }
+          `)));
+    }
+    static get is() { return "justifi-apple-pay"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "countryCode": {
+                "type": "string",
+                "attribute": "country-code",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"US\""
+            },
+            "merchantIdentifier": {
+                "type": "string",
+                "attribute": "merchant-identifier",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"merchant.com.staging-justifi.checkout-dev\""
+            },
+            "merchantDisplayName": {
+                "type": "string",
+                "attribute": "merchant-display-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"JustiFi Checkout\""
+            },
+            "initiativeContext": {
+                "type": "string",
+                "attribute": "initiative-context",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"dev-checkout.justifi-staging.com\""
+            },
+            "buttonType": {
+                "type": "string",
+                "attribute": "button-type",
+                "mutable": false,
+                "complexType": {
+                    "original": "ApplePayButtonType",
+                    "resolved": "ApplePayButtonType.BOOK | ApplePayButtonType.BUY | ApplePayButtonType.CHECK_OUT | ApplePayButtonType.DONATE | ApplePayButtonType.PLAIN | ApplePayButtonType.SET_UP | ApplePayButtonType.SUBSCRIBE",
+                    "references": {
+                        "ApplePayButtonType": {
+                            "location": "import",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::ApplePayButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ApplePayButtonType.PLAIN"
+            },
+            "buttonStyle": {
+                "type": "string",
+                "attribute": "button-style",
+                "mutable": false,
+                "complexType": {
+                    "original": "ApplePayButtonStyle",
+                    "resolved": "ApplePayButtonStyle.BLACK | ApplePayButtonStyle.WHITE | ApplePayButtonStyle.WHITE_OUTLINE",
+                    "references": {
+                        "ApplePayButtonStyle": {
+                            "location": "import",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::ApplePayButtonStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "ApplePayButtonStyle.BLACK"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showSkeleton": {
+                "type": "boolean",
+                "attribute": "show-skeleton",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isProcessing": {},
+            "isAvailable": {},
+            "canMakePayments": {},
+            "isConfigValid": {},
+            "error": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "applePayStarted",
+                "name": "applePayStarted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "applePayCompleted",
+                "name": "applePayCompleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    success: boolean;\n    token?: IApplePayToken;\n    paymentMethodId?: string;\n    error?: any;\n  }",
+                    "resolved": "{ success: boolean; token?: IApplePayToken; paymentMethodId?: string; error?: any; }",
+                    "references": {
+                        "IApplePayToken": {
+                            "location": "import",
+                            "path": "../../../api/ApplePay",
+                            "id": "src/api/ApplePay.ts::IApplePayToken"
+                        }
+                    }
+                }
+            }, {
+                "method": "applePayCancelled",
+                "name": "applePayCancelled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "applePayError",
+                "name": "applePayError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ error: string }",
+                    "resolved": "{ error: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isSupported": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getPaymentMethods": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "abort": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "merchantIdentifier",
+                "methodName": "watchPropsChange"
+            }, {
+                "propName": "buttonType",
+                "methodName": "watchPropsChange"
+            }, {
+                "propName": "buttonStyle",
+                "methodName": "watchPropsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchPropsChange"
+            }];
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/bank-account.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: '55cf04f40c030d67235807168a303dc2680561d2' }, h(BankAccountFormSkeleton, { key: '1b076c4d58b80c5f9b5842e1e0228657ec39f68b', isReady: this.isReady }), h("hidden-input", { key: '8b622b9693d7648a6bd33f082241910801c14e1e' }), h("div", { key: 'ce79e65bd2dba972885b5c906715e70d2817dd4c', 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: '8cc5b4b9c742ba0958845f2e5fee3e94c6449229', class: "row mb-3" }, h("iframe-input", { key: '3c41e6d2af86ff242f3b7a3d462628ab16626fe7', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: 'd95374c4f22fe40bc0033f159d456d94ee10363f', class: "row" }, h("iframe-input", { key: '22df6eb6ad22ccb18e9e24533dd8b208afb44309', 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: '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: '46acef24075db09eea0c94417e92e90a360e5850' }, h(CardFormSkeleton, { key: 'bd4f610e83d7bcbf5b597079d68bbeb2abe8c02e', isReady: this.isReady }), h("hidden-input", { key: 'b4a289f1ac7f104f5dce7848a94d22c9aa4a4b56' }), h("div", { key: 'df003c1be11c5a5262e6563d1fd4755ae60dc700', 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: '900e56045f6db140c74db42396a85153d3fae683', class: "mb-3" }, h("iframe-input", { key: '1600ae4cddd10afb5abeea9d9a4e851e76ad3de2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'ce66d35bd549b2cebca200c8c42eeddca4acd2d1', class: "row" }, h("div", { key: 'f1480606b802eff983710a37f79a9492f79b8440', class: "col-4 align-content-end" }, h("iframe-input", { key: 'd04785d62994fef3ee2d597a189d0b823e803bca', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '875e03320bb22f4f6891f01e749fef871f37cf18', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ead59922d5ffeefe6e5951203b9ec157135dee3c', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'a70d098fc88770441dfb347b9124f4c4d159714d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'eff54f20b8b3280b08839aaf4e77ab46c3262202', 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: '42003535aac99ae51b47511facb02f602dff703d', class: "payment-method" }, h("div", { key: 'c1ad6051d7b2dd88d2a76cd94ed69fe3f7408c7d', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '98ea069afd3e9d09ca8599ab35f998294046463a', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
     static get is() { return "payment-method-option"; }
     static get encapsulation() { return "shadow"; }