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

package/dist/collection/api/services/apple-pay.service.js

@@ -1,23 +1,8 @@
-import { configState } from "../../components/config-provider/config-state";
+import { Api } from "../Api";
 import { ApplePaySessionStatus, ApplePayHelpers, ApplePayConfig, ApplePayPaymentRequest, } from "../ApplePay";
 export class ApplePayService {
     constructor() {
-        this.apiBaseUrl = configState.apiOrigin;
-    }
-    /**
-     * Set custom API base URL
-     */
-    setApiBaseUrl(url) {
-        this.apiBaseUrl = url;
-    }
-    /**
-     * Set authentication token
-     */
-    setAuthToken(authToken) {
-        this.authToken = authToken;
-    }
-    setAccountId(accountId) {
-        this.accountId = accountId;
+        this.api = Api();
     }
     /**
      * Initialize Apple Pay configuration
@@ -31,55 +16,36 @@ export class ApplePayService {
     /**
      * Validate merchant with Apple Pay servers via API
      */
-    async validateMerchant(authToken) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/merchant_session`;
-        console.log('=== MERCHANT VALIDATION REQUEST ===');
-        console.log('Endpoint:', endpoint);
-        console.log('Auth token present:', !!authToken);
-        console.log('Account ID:', this.accountId);
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
-            },
-        });
-        console.log('Response status:', response.status);
-        if (!response.ok) {
-            const errorData = await response.text();
-            console.error('Backend validation failed - Raw response:', errorData);
-            try {
-                const jsonError = JSON.parse(errorData);
-                console.error('Backend validation failed - Parsed error:', jsonError);
-            }
-            catch (parseError) {
-                console.error('Could not parse error response as JSON:', parseError);
-            }
-            throw new Error(`Merchant validation failed: ${response.status}`);
+    async validateMerchant(authToken, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
         }
-        const merchantSession = await response.json();
-        console.log('Merchant session received:', merchantSession);
-        return merchantSession;
     }
     /**
      * Process Apple Pay payment via API (fixed to match original logic)
      */
-    async processPayment(authToken, payload) {
-        const endpoint = `${this.apiBaseUrl}/v1/apple_pay/process_token`;
-        const body = payload;
-        const response = await fetch(endpoint, {
-            method: 'POST',
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
             headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json',
-                Authorization: `Bearer ${authToken}`,
-                'Sub-Account': this.accountId,
+                'Sub-Account': accountId,
             },
-            body: JSON.stringify(body),
         });
-        const result = await response.json();
         return {
             success: result.id && !!result.data.token,
             data: result,
@@ -103,25 +69,67 @@ export class ApplePayService {
     /**
      * Start Apple Pay session
      */
-    async startPaymentSession(paymentRequest) {
+    async startPaymentSession(paymentRequest, authToken, accountId) {
+        // Begin verbose diagnostics for easier debugging in the field
+        console.groupCollapsed('[ApplePayService] startPaymentSession called');
+        console.log('[ApplePayService] raw paymentRequest:', JSON.stringify(paymentRequest, null, 2));
+        console.log('[ApplePayService] has authToken:', Boolean(authToken));
+        console.log('[ApplePayService] accountId:', accountId);
+        console.log('[ApplePayService] has config:', Boolean(this.applePayConfig));
         if (!this.applePayConfig) {
+            console.error('[ApplePayService] Missing applePayConfig. Did you call initialize()?');
+            console.groupEnd();
             throw new Error('Apple Pay not initialized. Call initialize() first.');
         }
         // if (!this.isAvailable()) {
         //   throw new Error('Apple Pay is not available on this device/browser');
         // }
         const request = new ApplePayPaymentRequest(paymentRequest);
+        console.log('[ApplePayService] created ApplePayPaymentRequest:', request);
         if (!request.isValid) {
+            const missingFields = [];
+            if (!request.countryCode)
+                missingFields.push('countryCode');
+            if (!request.currencyCode)
+                missingFields.push('currencyCode');
+            if (!request.merchantCapabilities ||
+                request.merchantCapabilities.length === 0)
+                missingFields.push('merchantCapabilities');
+            if (!request.supportedNetworks || request.supportedNetworks.length === 0)
+                missingFields.push('supportedNetworks');
+            if (!request.total || !request.total.label || !request.total.amount)
+                missingFields.push('total');
+            console.error('[ApplePayService] Payment request is invalid. Missing/invalid:', missingFields);
+            console.groupEnd();
             throw new Error('Invalid payment request provided');
         }
         this.currentPaymentRequest = request;
         return new Promise((resolve, reject) => {
             try {
+                console.log('[ApplePayService] About to instantiate ApplePaySession');
+                // Defensive checks for Apple Pay environment
+                if (typeof window === 'undefined' || !('ApplePaySession' in window)) {
+                    console.error('[ApplePayService] ApplePaySession not available on window');
+                    console.groupEnd();
+                    return reject({
+                        success: false,
+                        error: {
+                            code: 'APPLE_PAY_UNAVAILABLE',
+                            message: 'ApplePaySession API is not available in this environment',
+                        },
+                    });
+                }
                 this.currentSession = new window.ApplePaySession(3, request);
-                this.setupSessionEventHandlers(resolve, reject);
+                console.log('[ApplePayService] ApplePaySession instantiated:', this.currentSession);
+                this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
+                console.log('[ApplePayService] Event handlers set. Beginning session...');
                 this.currentSession.begin();
+                console.log('[ApplePayService] Session.begin() called');
+                console.groupEnd();
             }
             catch (error) {
+                console.error('[ApplePayService] Exception while starting session:', error);
+                console.groupEnd();
                 reject({
                     success: false,
                     error: {
@@ -147,20 +155,30 @@ export class ApplePayService {
     /**
      * Setup Apple Pay session event handlers
      */
-    setupSessionEventHandlers(resolve, reject) {
+    setupSessionEventHandlers(resolve, reject, authToken, accountId) {
         if (!this.currentSession ||
             !this.applePayConfig ||
             !this.currentPaymentRequest) {
+            console.error('[ApplePayService] setupSessionEventHandlers called without required state', {
+                hasSession: Boolean(this.currentSession),
+                hasConfig: Boolean(this.applePayConfig),
+                hasPaymentRequest: Boolean(this.currentPaymentRequest),
+            });
             return;
         }
         this.currentSession.onvalidatemerchant = async () => {
+            console.groupCollapsed('[ApplePayService] onvalidatemerchant');
             try {
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
+                console.log('[ApplePayService] accountId:', accountId);
+                if (!authToken) {
+                    console.error('[ApplePayService] Missing authToken for merchant validation');
+                    throw new Error('Authentication token not provided.');
                 }
-                const merchantSession = await this.validateMerchant(this.authToken);
+                const merchantSession = await this.validateMerchant(authToken, accountId);
+                console.log('[ApplePayService] merchantSession received');
                 try {
                     this.currentSession.completeMerchantValidation(merchantSession);
+                    console.log('[ApplePayService] completeMerchantValidation called');
                 }
                 catch (completionError) {
                     console.error('Error calling completeMerchantValidation:', completionError);
@@ -170,7 +188,9 @@ export class ApplePayService {
             catch (error) {
                 console.error('=== MERCHANT VALIDATION ERROR ===');
                 console.error('Error during merchant validation:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.abort();
                 reject({
                     success: false,
@@ -182,26 +202,34 @@ export class ApplePayService {
                     },
                 });
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentauthorized = async (event) => {
+            var _a;
+            console.groupCollapsed('[ApplePayService] onpaymentauthorized');
             try {
                 const payment = event.payment;
+                console.log('[ApplePayService] payment payload snapshot:', {
+                    hasToken: Boolean(payment === null || payment === void 0 ? void 0 : payment.token),
+                    tokenType: ((_a = payment === null || payment === void 0 ? void 0 : payment.token) === null || _a === void 0 ? void 0 : _a.paymentData) ? 'paymentData' : 'raw',
+                });
                 const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
                         name: this.currentPaymentRequest.total.label,
                         price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
                         description: this.currentPaymentRequest.total.label,
                     } });
-                if (!this.authToken) {
-                    throw new Error('Authentication token not set. Call setAuthToken() first.');
-                }
-                const paymentResult = await this.processPayment(this.authToken, paymentPayload);
+                console.log('[ApplePayService] paymentPayload prepared');
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                console.log('[ApplePayService] processPayment result:', paymentResult);
                 if (paymentResult.success) {
                     this.currentSession.completePayment({
                         status: ApplePaySessionStatus.STATUS_SUCCESS,
                     });
+                    console.log('[ApplePayService] Payment success; resolving');
                     resolve({
                         success: true,
                         token: payment.token,
+                        paymentMethodId: paymentResult.data.id,
                     });
                 }
                 else {
@@ -221,7 +249,9 @@ export class ApplePayService {
             catch (error) {
                 console.error('=== PAYMENT PROCESSING ERROR ===');
                 console.error('Error processing payment:', error);
-                console.error('Error stack:', error.stack);
+                if (error && error.stack) {
+                    console.error('Error stack:', error.stack);
+                }
                 this.currentSession.completePayment({
                     status: ApplePaySessionStatus.STATUS_FAILURE,
                 });
@@ -236,31 +266,40 @@ export class ApplePayService {
                 });
             }
             finally {
+                console.log('[ApplePayService] Cleaning up session state');
                 this.currentSession = undefined;
                 this.currentPaymentRequest = undefined;
             }
+            console.groupEnd();
         };
         this.currentSession.onpaymentmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onpaymentmethodselected');
             const paymentUpdate = {
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             };
             try {
                 this.currentSession.completePaymentMethodSelection(paymentUpdate);
+                console.log('[ApplePayService] completePaymentMethodSelection called');
             }
             catch (error) {
                 console.error('Error completing payment method selection:', error);
                 this.currentSession.abort();
             }
+            console.groupEnd();
         };
         this.currentSession.onshippingmethodselected = () => {
+            console.groupCollapsed('[ApplePayService] onshippingmethodselected');
             this.currentSession.completeShippingMethodSelection({
                 status: ApplePaySessionStatus.STATUS_SUCCESS,
                 newTotal: this.currentPaymentRequest.total,
                 newLineItems: this.currentPaymentRequest.lineItems || [],
             });
+            console.log('[ApplePayService] completeShippingMethodSelection called');
+            console.groupEnd();
         };
         this.currentSession.oncancel = (event) => {
+            console.groupCollapsed('[ApplePayService] oncancel');
             if (event.sessionError) {
                 console.error(event.sessionError);
                 switch (event.sessionError.code) {
@@ -291,9 +330,11 @@ export class ApplePayService {
                     message: 'User cancelled the Apple Pay session',
                 },
             });
+            console.groupEnd();
         };
         if ('onerror' in this.currentSession) {
             this.currentSession.onerror = (error) => {
+                console.groupCollapsed('[ApplePayService] onerror');
                 console.error('=== APPLE PAY SESSION ERROR ===');
                 console.error('Session error:', error);
                 this.currentSession = undefined;
@@ -305,6 +346,7 @@ export class ApplePayService {
                         message: 'Apple Pay session error occurred',
                     },
                 });
+                console.groupEnd();
             };
         }
     }

package/dist/collection/api/services/plaid.service.js

@@ -0,0 +1,20 @@
+import { Api } from "..";
+const api = Api();
+export class PlaidService {
+    async getLinkToken(authToken, accountId, checkoutId, signal) {
+        const endpoint = `plaid/${accountId}/link`;
+        const body = { checkout_id: checkoutId };
+        return api.post({ endpoint, body, authToken, signal });
+    }
+    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
+        const endpoint = `plaid/${accountId}/tokenize`;
+        const body = { public_token: publicToken };
+        if (linkTokenId) {
+            body.link_token_id = linkTokenId;
+        }
+        if (paymentMethodGroupId) {
+            body.payment_method_group_id = paymentMethodGroupId;
+        }
+        return api.post({ endpoint, body, authToken, signal });
+    }
+}

package/dist/collection/assets/plaid-icon.svg

@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 28 29" xmlns="http://www.w3.org/2000/svg" class="css-1rdaj8m"><g fill="#111" fill-rule="evenodd"><path d="M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z"></path></g></svg>

package/dist/collection/collection-manifest.json

@@ -50,6 +50,7 @@
     "components/modular-checkout/sub-components/card-billing-form-simple.js",
     "components/modular-checkout/sub-components/bank-account-billing-form-simple.js",
     "components/checkout/card-form/card-form.js",
+    "ui-components/form/form-control-checkbox.js",
     "components/checkouts-list/checkouts-list-core.js",
     "components/checkouts-list/checkouts-list-filters.js",
     "components/checkouts-list/checkouts-list.js",
@@ -77,6 +78,7 @@
     "components/modular-checkout/sub-components/bank-account.js",
     "components/modular-checkout/sub-components/card-form.js",
     "components/modular-checkout/sub-components/payment-method-option.js",
+    "components/modular-checkout/sub-components/plaid-payment-method.js",
     "components/modular-checkout/sub-components/saved-payment-methods.js",
     "components/modular-checkout/sub-components/sezzle-payment-method.js",
     "components/modular-checkout/sub-components/summary.js",
@@ -104,7 +106,6 @@
     "components/terminals-list/terminals-list.js",
     "components/tokenize-payment-method/tokenize-payment-method.js",
     "ui-components/custom-popper/custom-popper.js",
-    "ui-components/form/form-control-checkbox.js",
     "ui-components/form/form-control-file-v2.js",
     "ui-components/form/form-control-file.js",
     "ui-components/form/form-control-monetary.js",
@@ -124,7 +125,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.2",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class BankAccountForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -31,16 +33,17 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '843caa7d14d4694d78e477cb51d6caac387fdb23' }, h(BankAccountFormSkeleton, { key: 'f4381a71ef5831d159f51472744c7d7a85221464', isReady: this.isReady }), h("div", { key: '8de6e74f3559d94747d8ca942f777977325f16e5', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '7ee7c6e3c26ab1a90bdbf7215fe13f65aade1025' }, h(BankAccountFormSkeleton, { key: 'e4afc94a21b041972d031cfce88a102f763932d1', isReady: this.isReady }), h("div", { key: '8980e0dc0048dbd9cd93a4f93fab8c4cbfeef611', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '09e19bc320f2095c9148ddaa2105813071d5f9da', class: "row mb-3" }, h("iframe-input", { key: 'e6262b9fa09d8b30da046dc0c1a01a7bbac33a7d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '15b85f900ce89f440ecbfe62e61d36d15eff9c2b', class: "row" }, h("iframe-input", { key: '9b4cf61adfd4a5c68e07cc4eb49841727ce2c63d', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: 'd04bb6b18498de9646ba6e2ee32f223774a72cc7', class: "row mb-3" }, h("iframe-input", { key: '7eb29da8beff34cbe5d2b7c151fec433d17f8555', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'c6345cddc37cbe5627ca4581fb98be55b85550a6', class: "row" }, h("iframe-input", { key: '0bf71a22e9126e04f15f213d84953ccfd3388ef0', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/card-form/card-form.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import CardFormSkeleton from "./card-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
+import { generateTabId } from "../../../utils/utils";
 export class CardForm {
     constructor() {
         this.isReady = false;
@@ -8,6 +9,7 @@ export class CardForm {
     async componentWillLoad() {
         await waitForConfig();
         this.iframeOrigin = configState.iframeOrigin;
+        this.tabId = generateTabId();
     }
     componentDidRender() {
         const elements = [
@@ -35,16 +37,17 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'c43351c7ab1eb6bf413f162634f55007798bb076' }, h(CardFormSkeleton, { key: 'f0a29497de2270108868e892d666b552dea27a1e', isReady: this.isReady }), h("div", { key: '2734b111c1f2f2275435d2141445ac30482946be', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '8a6454e0a16e0a26762627f7a42527ab243c1c7a' }, h(CardFormSkeleton, { key: 'ed7386f746518e1ebb62d1bf9bc2e98778d9804e', isReady: this.isReady }), h("div", { key: 'f3092bcce1626f04a079ebcf64f0cdf06a7029a8', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '036c359caaf8fc36fa6ba56bbcad5d01de1fe9c9', class: "mb-3" }, h("iframe-input", { key: '9baf7dc76ff18f8dee6e6cd08b93e1ba155d5cf2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '080769719aa9b0d6abc9b18c46247eecd6428833', class: "d-flex align-items-start" }, h("div", { key: 'b3a825ed849ec0032d4a9018537f8ffab4b93ca3', class: "flex-fill me-3" }, h("iframe-input", { key: '5f60eb2d3b3e1303e1a0f6a3f0cd60270bb2d0b8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'cfd000502f10593b59608e13f5de7911c546d030', class: "flex-fill me-3" }, h("iframe-input", { key: 'ab2a45264fe5890c171d03000f30720eafe354b5', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '637516bfd8030e56c9b1e97edfd3a635edb95f20', class: "flex-fill" }, h("iframe-input", { key: 'e407cc2470841fe12b1bdb84bbc8ecfb0165c72d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '3e211e500bef824aff5b6bf6cdedc99435cacfd4', class: "mb-3" }, h("iframe-input", { key: '6ad14a317fd6cad6d6535ba661684e31c325c5ab', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '931e9f1b047ff57c2b37bb2947e29f6708f239d9', class: "d-flex align-items-start" }, h("div", { key: '5ca19fbf9047bd6595557890b0bdbbf0d2e65de9', class: "flex-fill me-3" }, h("iframe-input", { key: 'c99f426b77308b15fcb174e8adbe8c120abc58b5', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '677b8fb8f33a021afda90a8b4e13b5f44b5fe694', class: "flex-fill me-3" }, h("iframe-input", { key: '9bcf91464c5f2ca77b339f2fe299db6027aa9f8b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: '9b5c52d9cc5b30eedf522801c3f8f6c0530757ce', class: "flex-fill" }, h("iframe-input", { key: '3e73df1c7119193a239fcd2f5212967e109cff83', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {
         return {
             "isReady": {},
-            "iframeOrigin": {}
+            "iframeOrigin": {},
+            "tabId": {}
         };
     }
     static get methods() {

package/dist/collection/components/checkout/checkout.js

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import JustifiAnalytics from "../../api/Analytics";
+import { PaymentMethodTypes } from "../../api";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
 import { StyledHost } from "../../ui-components";
+import { PAYMENT_METHODS } from "../modular-checkout/ModularCheckout";
 export class Checkout {
     constructor() {
+        this.availablePaymentMethods = [];
         this.errorMessage = '';
         this.insuranceToggled = false;
         this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
@@ -36,23 +38,11 @@ export class Checkout {
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
-    checkoutError(event) {
+    checkoutError(_event) {
         this.isSubmitting = false;
-        console.error('checkout error', event.detail);
     }
-    async handleTokenizeSubmit(event) {
-        this.tokenizedPaymentMethod = event.detail.response;
-        if (event.detail.response.error) {
-            this.isSubmitting = false;
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
-            });
-            return;
-        }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
+    checkoutChanged(event) {
+        this.availablePaymentMethods = event.detail.availablePaymentMethodTypes;
     }
     async fillBillingForm(fields) {
         var _a;
@@ -60,12 +50,9 @@ export class Checkout {
         (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a, _b, _c;
-        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
-        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
-        return {
-            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
-        };
+        var _a;
+        const modularValidation = await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate());
+        return { isValid: modularValidation };
     }
     updateStore() {
         checkoutStore.checkoutId = this.checkoutId;
@@ -78,24 +65,15 @@ export class Checkout {
     async submit(_event) {
         var _a;
         this.isSubmitting = true;
-        // Trigger the tokenize payment method submission
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
-    }
-    async submitCheckoutWithToken() {
-        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
-            this.isSubmitting = false;
-            return;
-        }
-        // Set the payment token in the store for the modular checkout to use
-        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
-        // Submit the checkout
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
+        (_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.submitCheckout(checkoutStore.billingFormFields);
     }
     get showPaymentTypeHeader() {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
     render() {
-        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '61cab7c3b5ca01ea70f35d23df100c2e7bd0c03a' }, h("justifi-modular-checkout", { key: '67ed6c7b2a6bbbec0e24b47b24c2eb73b82abc43', ref: (el) => {
+                this.modularCheckoutRef = el;
+            }, authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'b02aaa188db4d619ab3f14a336fe33f4113f2799', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '2c8c019f86bc181d7d05848993ff3782f1fe3ed2', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '00eb81f75652c80108ad24620b72a977a09192d9', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '346d90b8cca657a1af0eea96244ef105d1274abe' }, h("justifi-checkout-summary", { key: '68784e0b3ef83b6a87d8084fe19dbce7d3348169' }))), h("div", { key: 'bb04ad56ed5074cc272c47e013c7647cc6cf5c2d', class: "col-12 mt-4" }, h("slot", { key: 'a0955737dc7af83b01608abe7818af666ac08d87', name: "insurance" })), h("div", { key: '7025fb6b7ad229879f2198f12a79e07871691b6a', class: "col-12 mt-4" }, h("justifi-header", { key: 'a7823342698429e7845cb341bba2de41f461f6c2', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'b579b51c7f6adec31c7e1d39981634328a22b0c2', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '496812c7404b914acc03052018b06b5ebedfd230', class: "d-flex flex-column" }, h("section", { key: '227d6e265d947a5035d8e072b6ea9a87e04faa97' }, h("div", { key: 'b06b49af43c4fce8251c7b227bcc2f2dce5b531a' }, h("justifi-saved-payment-methods", { key: 'd5629c6248d780c5ce8b69c88b4bf866baab2c53' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'dbaf7d54d8c26315faea5537eb821a4a9314d2c4', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.sezzle, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && (h("justifi-radio-list-item", { key: 'dad1c44a06f6e60d27d737d36ff68d536244776b', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.plaid, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '2bf37f35ae9cb51a6622d4e3f4244359fd40606d', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'a29f2e940b8c2970d09af0fdce278344cd70833a', class: "mt-4" }, h("justifi-button", { key: '6a076cff574520eaf3303cb4792227365eaf25ae', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -262,13 +240,13 @@ export class Checkout {
     }
     static get states() {
         return {
+            "availablePaymentMethods": {},
             "checkout": {},
             "complete": {},
             "errorMessage": {},
             "insuranceToggled": {},
             "isSubmitting": {},
-            "serverError": {},
-            "tokenizedPaymentMethod": {}
+            "serverError": {}
         };
     }
     static get events() {
@@ -419,8 +397,8 @@ export class Checkout {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "submit-event",
-                "method": "handleTokenizeSubmit",
+                "name": "checkout-changed",
+                "method": "checkoutChanged",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/checkout/save-new-payment-method.js

@@ -3,6 +3,7 @@ import { StyledHost } from "../../ui-components";
 import { checkoutStore } from "../../store/checkout.store";
 export class SaveNewPaymentMethod {
     constructor() {
+        this.label = 'Save New Payment Method';
         this.isChecked = false;
         this.handleCheckboxChange = (_name, value) => {
             this.isChecked = value;
@@ -11,10 +12,34 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: 'f23a4f992eef86df7ebfa86f4b46b232456016b2' }, h("form-control-checkbox", { key: 'aff52e51dac64207f95e439b26902c772d84963d', label: "Save New Payment Method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: 'c3808f4373067144ded9db353e48fe9cd3df59bc' }, h("form-control-checkbox", { key: '2f104a35497fdc1397c014c4c4ed646f7b389239', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Save New Payment Method'"
+            }
+        };
+    }
     static get states() {
         return {
             "isChecked": {}