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

package/dist/collection/components/modular-checkout/sub-components/plaid-payment-method.test.js

@@ -0,0 +1,124 @@
+// Mock the store before importing the component
+const mockCheckoutStore = {
+    selectedPaymentMethod: '',
+    authToken: 'test-token',
+    accountId: 'test-account',
+    checkoutId: 'test-checkout',
+    paymentToken: undefined,
+    paymentMethodGroupId: undefined,
+    savePaymentMethod: false,
+};
+jest.mock('../../../store/checkout.store', () => ({
+    checkoutStore: mockCheckoutStore,
+    onChange: jest.fn().mockReturnValue(jest.fn()),
+}));
+// Mock SVG imports
+jest.mock('../../../assets/plaid-icon.svg', () => 'mocked-svg-path');
+// Mock the PlaidService
+// Provide a concrete mock for PlaidService with expected method signatures
+jest.mock('../../../api/services/plaid.service', () => {
+    return {
+        PlaidService: jest.fn().mockImplementation(() => ({
+            getLinkToken: jest.fn().mockResolvedValue({
+                id: 'plt_123',
+                type: 'link_token',
+                data: { link_token: 'link-sandbox-abc', id: 'plt_123' },
+            }),
+            tokenizeBankAccount: jest.fn().mockResolvedValue({
+                id: 'pm_123',
+                type: 'payment_method',
+                data: { bank_account: { token: 'tok_pm_456' } },
+            }),
+        })),
+    };
+});
+import { newSpecPage } from "@stencil/core/testing";
+import { PlaidPaymentMethod } from "./plaid-payment-method";
+import { PaymentMethodTypes } from "../../../api";
+describe('PlaidPaymentMethod', () => {
+    let component;
+    let page;
+    beforeEach(async () => {
+        // Reset store state
+        mockCheckoutStore.selectedPaymentMethod = '';
+        mockCheckoutStore.authToken = 'test-token';
+        mockCheckoutStore.accountId = 'test-account';
+        mockCheckoutStore.checkoutId = 'test-checkout';
+        // Mock Plaid global
+        global.Plaid = {
+            create: jest.fn().mockReturnValue({
+                open: jest.fn(),
+            }),
+        };
+        page = await newSpecPage({
+            components: [PlaidPaymentMethod],
+            html: '<justifi-plaid-payment-method></justifi-plaid-payment-method>',
+        });
+        component = page.rootInstance;
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    describe('Basic Functionality', () => {
+        it('should render without crashing', async () => {
+            // Wait for component to render
+            await page.waitForChanges();
+            // Basic check that component exists
+            expect(component).toBeTruthy();
+            expect(page.root).toBeTruthy();
+        });
+        it('should initialize with correct default state', () => {
+            expect(component.isSelected).toBe(false);
+            expect(component.publicToken).toBeNull();
+            expect(component.error).toBeNull();
+        });
+    });
+    describe('Store Integration', () => {
+        it('should initialize selection state from store', () => {
+            // Set store value before creating component
+            mockCheckoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.plaid };
+            // Recreate component to test initialization
+            return newSpecPage({
+                components: [PlaidPaymentMethod],
+                html: '<justifi-plaid-payment-method></justifi-plaid-payment-method>',
+            }).then(page => {
+                const component = page.rootInstance;
+                expect(component.isSelected).toBe(true); // Component should initialize with selection state from store
+            });
+        });
+    });
+    describe('Component Methods', () => {
+        it('should provide isCurrentlySelected method', async () => {
+            component.isSelected = true;
+            const result = await component.isCurrentlySelected();
+            expect(result).toBe(true);
+        });
+        it('should provide reset method', async () => {
+            component.publicToken = 'test-token';
+            component.error = {
+                code: 'plaid-sdk-load-failed',
+                message: 'test-error',
+                severity: 'error',
+                retryable: true
+            };
+            await component.reset();
+            expect(component.publicToken).toBeNull();
+            expect(component.error).toBeNull();
+            expect(component.isAuthenticating).toBe(false);
+        });
+    });
+    describe('Plaid exchange flow', () => {
+        it('exchanges public token and saves payment token to store', async () => {
+            // Arrange
+            mockCheckoutStore.selectedPaymentMethod = 'plaid';
+            const instance = page.rootInstance;
+            // Act: simulate Plaid success
+            instance.handlePlaidSuccess('public-sandbox-xyz', {});
+            await page.waitForChanges();
+            // Allow any async exchange to complete
+            await new Promise((r) => setTimeout(r, 0));
+            // Assert
+            expect(mockCheckoutStore.paymentToken).toBe('tok_pm_456');
+        });
+    });
+});

package/dist/collection/components/modular-checkout/sub-components/saved-payment-methods.js

@@ -3,17 +3,19 @@ import { StyledHost } from "../../../ui-components";
 import { checkoutStore } from "../../../store/checkout.store";
 import { radioListItem } from "../../../styles/parts";
 import { CardBrandLabels } from "../../checkout/payment-method-option-utils";
+import { PAYMENT_METHOD_TYPES } from "../ModularCheckout";
 export class SavedPaymentMethods {
     constructor() {
-        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+        this.onPaymentMethodOptionClick = (paymentMethod) => (e) => {
             e.preventDefault();
-            checkoutStore.selectedPaymentMethod = paymentMethodId;
+            checkoutStore.selectedPaymentMethod = paymentMethod;
+            checkoutStore.paymentToken = paymentMethod.id;
         };
         this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === 'card' && checkoutStore.disableCreditCard) {
+            if (paymentMethod.type === PAYMENT_METHOD_TYPES.CARD && checkoutStore.disableCreditCard) {
                 return false;
             }
-            if (paymentMethod.type === 'bank_account' && checkoutStore.disableBankAccount) {
+            if (paymentMethod.type === PAYMENT_METHOD_TYPES.BANK_ACCOUNT && checkoutStore.disableBankAccount) {
                 return false;
             }
             return true;
@@ -33,7 +35,7 @@ export class SavedPaymentMethods {
         }
         return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
             .filter(this.isAllowedPaymentMethod)
-            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.paymentToken === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
     }
     static get is() { return "justifi-saved-payment-methods"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modular-checkout/sub-components/sezzle-payment-method.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
 import { formatCurrency } from "../../../utils/utils";
-import { radioListItem } from "../../../styles/parts";
 import { checkoutStore } from "../../../store/checkout.store";
 import { StyledHost } from "../../../ui-components";
+import { PAYMENT_METHODS } from "../ModularCheckout";
+import { PaymentMethodTypes } from "../../../api";
 const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
         display: 'inline',
         width: '80px',
@@ -11,12 +12,7 @@ const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "http
     } }));
 export class SezzlePaymentMethod {
     constructor() {
-        this.paymentMethodOptionId = 'sezzle';
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
-        };
+        this.paymentMethodOptionId = PAYMENT_METHODS.SEZZLE;
         this.initializeSezzleCheckout = () => {
             let resolveSezzlePromise;
             this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
@@ -59,13 +55,17 @@ export class SezzlePaymentMethod {
         this.sezzleButtonRef.click();
         return this.sezzlePromise;
     }
+    async handleSelectionClick() {
+        checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.sezzle };
+        this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+    }
     render() {
         var _a, _b;
         if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
             console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
             return null;
         }
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents)))))));
     }
     static get is() { return "justifi-sezzle-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +121,23 @@ export class SezzlePaymentMethod {
                     "text": "",
                     "tags": []
                 }
+            },
+            "handleSelectionClick": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -2,8 +2,7 @@ import { h } from "@stencil/core";
 import { StyledHost } from "../../ui-components";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
-import { PaymentMethodTypes } from "../../api/Payment";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
+import { ComponentErrorCodes, ComponentErrorSeverity, PaymentMethodTypes } from "../../api";
 import { checkoutStore } from "../../store/checkout.store";
 // Constants
 const PAYMENT_METHOD_TYPE_LABELS = {
@@ -18,14 +17,12 @@ const ERROR_MESSAGES = {
 };
 export class TokenizePaymentMethod {
     constructor() {
-        this.isLoading = false;
         this.computedHideSubmitButton = false;
+        this.isLoading = false;
         this.submitButtonText = 'Submit';
     }
-    componentWillLoad() {
-        checkPkgVersion();
-        this.analytics = new JustifiAnalytics(this);
-        this.validateRequiredProps();
+    paymentMethodsChanged() {
+        this.setDefaultSelectedPaymentMethod();
     }
     connectedCallback() {
         this.setDefaultSelectedPaymentMethod();
@@ -34,12 +31,17 @@ export class TokenizePaymentMethod {
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+        if (this.unsubscribeFromStore) {
+            this.unsubscribeFromStore();
+        }
     }
-    paymentMethodsChanged() {
-        this.setDefaultSelectedPaymentMethod();
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
     }
     handleRadioClick(event) {
-        this.selectedPaymentMethodId = event.detail;
+        this.selectedPaymentMethod = event.detail;
+        checkoutStore.selectedPaymentMethod = { type: event.detail };
     }
     async fillBillingForm(fields) {
         var _a;
@@ -47,6 +49,7 @@ export class TokenizePaymentMethod {
     }
     async tokenizePaymentMethod(event) {
         event === null || event === void 0 ? void 0 : event.preventDefault();
+        this.validateRequiredProps();
         this.isLoading = true;
         try {
             const validation = await this.validate();
@@ -89,11 +92,27 @@ export class TokenizePaymentMethod {
             this.billingFormRef.validate(),
             this.paymentMethodFormRef.validate(),
         ]);
-        return {
+        const result = {
             isValid: billingValidation.isValid && paymentMethodValidation.isValid,
             errors: Object.assign(Object.assign({}, billingValidation.errors), paymentMethodValidation.errors),
         };
+        return result;
+    }
+    async tokenize() {
+        try {
+            const billingFormFieldValues = await this.billingFormRef.getValues();
+            const config = {
+                clientId: this.authToken || checkoutStore.authToken,
+                account: this.accountId || checkoutStore.accountId,
+                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
+            };
+            return await this.paymentMethodFormRef.tokenize(config);
+        }
+        catch (error) {
+            return error;
+        }
     }
+    // 9. Local methods
     validateRequiredProps() {
         if (!this.authToken && !checkoutStore.authToken) {
             this.emitError({
@@ -109,14 +128,16 @@ export class TokenizePaymentMethod {
         }
     }
     setDefaultSelectedPaymentMethod() {
-        if (this.selectedPaymentMethodId) {
+        if (this.selectedPaymentMethod) {
             return;
         }
         if (!this.disableCreditCard) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.card;
+            this.selectedPaymentMethod = PaymentMethodTypes.card;
+            checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.card };
         }
         else if (!this.disableBankAccount) {
-            this.selectedPaymentMethodId = PaymentMethodTypes.bankAccount;
+            this.selectedPaymentMethod = PaymentMethodTypes.bankAccount;
+            checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.bankAccount };
         }
     }
     setComputedHideSubmitButton() {
@@ -182,7 +203,8 @@ export class TokenizePaymentMethod {
                     },
                 };
             }
-            return await this.performTokenization();
+            const result = await this.performTokenization();
+            return result;
         }
         catch (error) {
             return { error };
@@ -200,20 +222,6 @@ export class TokenizePaymentMethod {
             data: tokenizeResponseData,
         };
     }
-    async tokenize() {
-        try {
-            const billingFormFieldValues = await this.billingFormRef.getValues();
-            const config = {
-                clientId: this.authToken || checkoutStore.authToken,
-                account: this.accountId || checkoutStore.accountId,
-                paymentMethodMetadata: this.buildPaymentMethodMetadata(billingFormFieldValues),
-            };
-            return await this.paymentMethodFormRef.tokenize(config);
-        }
-        catch (error) {
-            return error;
-        }
-    }
     buildPaymentMethodMetadata(billingFormFieldValues) {
         return this.shouldSavePaymentMethod
             ? Object.assign(Object.assign({}, billingFormFieldValues), { payment_method_group_id: this.paymentMethodGroupID }) : Object.assign({}, billingFormFieldValues);
@@ -228,17 +236,17 @@ export class TokenizePaymentMethod {
         return this.disableCreditCard || this.disableBankAccount;
     }
     renderPaymentMethodOption(paymentMethodType) {
-        const isSelected = this.selectedPaymentMethodId === paymentMethodType;
+        const isSelected = this.selectedPaymentMethod === paymentMethodType && checkoutStore.selectedPaymentMethod.id === undefined;
         return (h("div", { class: "payment-method" }, h("justifi-radio-list-item", { name: "paymentMethodType", value: paymentMethodType, checked: isSelected, label: PAYMENT_METHOD_TYPE_LABELS[paymentMethodType], hidden: this.shouldHideRadioInput }), isSelected && this.renderSelectedPaymentMethodForm(paymentMethodType)));
     }
     renderSelectedPaymentMethodForm(paymentMethodId) {
-        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID })));
+        return (h("div", { class: "mt-4 pb-4" }, this.renderPaymentMethodForm(paymentMethodId), h("div", { class: "mt-4" }, h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodId })), h("div", { class: "mt-4" }, h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupID }))));
     }
     renderPaymentMethodForm(paymentMethodId) {
         return paymentMethodId === PaymentMethodTypes.card ? (h("justifi-card-form", { ref: (el) => (this.paymentMethodFormRef = el) })) : (h("justifi-bank-account-form", { ref: (el) => (this.paymentMethodFormRef = el) }));
     }
     render() {
-        return (h(StyledHost, { key: '11b857dea77d2f753e400cfaf021db51326ffc36' }, h("form", { key: 'fd1c625c62b1699157b24834e15c4c6e0bc93b84' }, h("fieldset", { key: 'febf7db57a5ceda457e21287c20df817b101b45d' }, h("div", { key: '1089c358094a3f0cea1c97b807779c7eb6e9e692', class: "row gy-3" }, h("div", { key: 'f564fbfec389008e352f9de54fdb604be56d8826', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: 'e3e7f46529d1a659f387fb6df0914c168d556e27', class: "col-12" }, h("justifi-button", { key: 'd729f38c5b55c174de479ab57da56defd327366b', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
+        return (h(StyledHost, { key: 'a89908d2f192d86edf016b052734f81f46e00f8b' }, h("form", { key: '527d1e5ff94a2db8b2d1223d7beda86fdaf08ff0' }, h("fieldset", { key: 'd8479461d3788dbcb319f1eaf99b7e05c00c49f9' }, h("div", { key: '17f68ee0dceb8353ca54ccf383dc2709444a3b26', class: "row gy-3" }, h("div", { key: '3568f3ac4ef04a9a245d61f2b94f3b79371b0a6f', class: "col-12" }, this.availablePaymentMethods.map((method) => this.renderPaymentMethodOption(method))), h("div", { key: '97be6dbaf8373a82a706a7eb97e9107baa6c1823', class: "col-12" }, h("justifi-button", { key: 'afcd192881ad092f8d31a01e571541079d4d33ac', text: this.submitButtonText, variant: "primary", type: "submit", clickHandler: (e) => this.tokenizePaymentMethod(e), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.computedHideSubmitButton })))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get properties() {
@@ -419,9 +427,9 @@ export class TokenizePaymentMethod {
     }
     static get states() {
         return {
+            "computedHideSubmitButton": {},
             "isLoading": {},
-            "selectedPaymentMethodId": {},
-            "computedHideSubmitButton": {}
+            "selectedPaymentMethod": {}
         };
     }
     static get events() {
@@ -552,6 +560,27 @@ export class TokenizePaymentMethod {
                     "text": "",
                     "tags": []
                 }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TokenizeConfig": {
+                            "location": "global",
+                            "id": "global::TokenizeConfig"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/index.js

@@ -1 +1,2 @@
 export * from './components';
+export { PAYMENT_METHODS } from './components/modular-checkout/ModularCheckout';

package/dist/collection/store/checkout.store.js

@@ -1,4 +1,6 @@
 import { createStore } from "@stencil/store";
+import { PaymentMethodTypes } from "../api";
+import { PAYMENT_METHODS } from "../components/modular-checkout/ModularCheckout";
 const initialState = {
     accountId: '',
     authToken: '',
@@ -6,22 +8,25 @@ const initialState = {
         address_postal_code: '',
     },
     bnplEnabled: false,
+    insuranceEnabled: false,
     bnplProviderApiVersion: '',
     bnplProviderCheckoutUrl: '',
     bnplProviderClientId: '',
     bnplProviderMode: '',
     checkoutId: '',
+    bankAccountVerification: undefined,
     disableBankAccount: false,
     disableBnpl: false,
     disableCreditCard: false,
     disablePaymentMethodGroup: false,
     paymentAmount: 0,
+    paymentCurrency: 'USD',
     paymentDescription: '',
     paymentMethodGroupId: undefined,
     paymentMethods: [],
     paymentToken: undefined,
     savePaymentMethod: false,
-    selectedPaymentMethod: '',
+    selectedPaymentMethod: { type: PaymentMethodTypes.card },
     totalAmount: 0,
 };
 const { state: checkoutStore, onChange } = createStore(initialState);
@@ -31,4 +36,43 @@ Object.keys(initialState).forEach((key) => {
         checkoutStore[key] = newValue;
     });
 });
-export { checkoutStore, onChange };
+// Helper: compute available payment methods based on store flags
+export function getAvailablePaymentMethodTypes() {
+    var _a;
+    const methods = [];
+    if (!checkoutStore.disablePaymentMethodGroup &&
+        ((_a = checkoutStore.paymentMethods) === null || _a === void 0 ? void 0 : _a.length)) {
+        const hasSavedCard = checkoutStore.paymentMethods.some((pm) => pm.type === 'card');
+        const hasSavedBank = checkoutStore.paymentMethods.some((pm) => pm.type === 'bank_account');
+        if (hasSavedCard && !checkoutStore.disableCreditCard) {
+            methods.push(PAYMENT_METHODS.SAVED_CARD);
+        }
+        if (hasSavedBank && !checkoutStore.disableBankAccount) {
+            methods.push(PAYMENT_METHODS.SAVED_BANK_ACCOUNT);
+        }
+    }
+    if (!checkoutStore.disableCreditCard) {
+        methods.push(PAYMENT_METHODS.NEW_CARD);
+    }
+    if (!checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.NEW_BANK_ACCOUNT);
+    }
+    if (checkoutStore.bnplEnabled && !checkoutStore.disableBnpl) {
+        methods.push(PAYMENT_METHODS.SEZZLE);
+    }
+    if (checkoutStore.bankAccountVerification === true &&
+        !checkoutStore.disableBankAccount) {
+        methods.push(PAYMENT_METHODS.PLAID);
+    }
+    return methods;
+}
+export function isNewCardSelected() {
+    return checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card;
+}
+export { checkoutStore as checkoutStore, onChange };
+export function onAnyChange(callback) {
+    Object.keys(initialState).forEach((key) => {
+        // @ts-ignore - onChange is generically typed by stencil/store but not exported here
+        onChange(key, (newValue) => callback(key, newValue));
+    });
+}

package/dist/collection/ui-components/apple-pay-button.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+import { ApplePayButtonType, ApplePayButtonStyle } from "../api/ApplePay";
+const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
+export const ApplePayButton = (props) => {
+    const getApplePayButtonClass = () => {
+        let classes = "apple-pay-button";
+        switch (props.buttonStyle) {
+            case ApplePayButtonStyle.WHITE:
+                classes += " apple-pay-button-white";
+                break;
+            case ApplePayButtonStyle.WHITE_OUTLINE:
+                classes += " apple-pay-button-white-outline";
+                break;
+            case ApplePayButtonStyle.BLACK:
+            default:
+                classes += " apple-pay-button-black";
+                break;
+        }
+        switch (props.buttonType) {
+            case ApplePayButtonType.BUY:
+                classes += " apple-pay-button-type-buy";
+                break;
+            case ApplePayButtonType.DONATE:
+                classes += " apple-pay-button-type-donate";
+                break;
+            case ApplePayButtonType.PLAIN:
+            default:
+                classes += " apple-pay-button-type-plain";
+                break;
+        }
+        if (props.disabled || props.isProcessing || !props.isAvailable) {
+            classes += " disabled";
+        }
+        return classes;
+    };
+    const getButtonStyles = () => {
+        return {
+            width: props.width || "200px",
+            height: props.height || "48px",
+        };
+    };
+    const handleClick = () => {
+        if (!props.disabled &&
+            !props.isProcessing &&
+            props.isAvailable &&
+            props.clickHandler) {
+            props.clickHandler();
+        }
+    };
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+          .apple-pay-button-container {
+            display: inline-block;
+            position: relative;
+          }
+
+          /* Apple Pay CSS classes - these are the official Apple Pay button styles */
+          .apple-pay-button {
+            display: inline-block;
+            -webkit-appearance: -apple-pay-button;
+            -apple-pay-button-type: plain; /* default */
+            -apple-pay-button-style: black; /* default */
+            border-radius: 8px;
+            cursor: pointer;
+            border: none;
+            outline: none;
+            transition: opacity 0.2s ease;
+            position: relative;
+          }
+
+          /* Button styles */
+          .apple-pay-button.apple-pay-button-black {
+            -apple-pay-button-style: black;
+          }
+
+          .apple-pay-button.apple-pay-button-white {
+            -apple-pay-button-style: white;
+          }
+
+          .apple-pay-button.apple-pay-button-white-outline {
+            -apple-pay-button-style: white-outline;
+          }
+
+          /* Button types */
+          .apple-pay-button.apple-pay-button-type-plain {
+            -apple-pay-button-type: plain;
+          }
+
+          .apple-pay-button.apple-pay-button-type-buy {
+            -apple-pay-button-type: buy;
+          }
+
+          .apple-pay-button.apple-pay-button-type-donate {
+            -apple-pay-button-type: donate;
+          }
+
+          /* Hover and disabled states */
+          .apple-pay-button:hover:not(.disabled) {
+            opacity: 0.9;
+          }
+
+          .apple-pay-button.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+
+          /* Processing overlay */
+          .processing-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          .spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top: 2px solid #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+          }
+
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+
+          /* Responsive design */
+          @media (max-width: 480px) {
+            .apple-pay-button {
+              width: 100% !important;
+              min-width: 200px;
+            }
+          }
+        `)));
+};