@schematichq/schematic-components 1.6.2 → 1.7.0

package/dist/schematic-components.esm.js

@@ -1975,6 +1975,18 @@ function getEntitlementCost(entitlement, period = "month") {
     }
   }
 }
+function isBillingAddressRequiredForTax(financeData) {
+  if (!financeData) {
+    return false;
+  }
+  return financeData.taxRequireBillingDetails;
+}
+function shouldCollectBillingAddress(collectAddressSetting, financeData) {
+  if (collectAddressSetting) {
+    return true;
+  }
+  return isBillingAddressRequiredForTax(financeData);
+}
 
 // src/utils/api/credit.ts
 function getResetCadencePeriod(cadence) {
@@ -4221,7 +4233,8 @@ var initialContext = {
   setCheckoutState: stub,
   setData: stub,
   updateSettings: stub,
-  debug: stub
+  debug: stub,
+  finishCheckout: stub
 };
 var EmbedContext = createContext(initialContext);
 
@@ -6700,7 +6713,7 @@ var en_default = {
     "Add-ons Quantity": "Add-ons Quantity",
     Additional: "Additional",
     "After the trial, cancel no default": "After the trial, you will be lose access to {{planName}} plan and your subscription will be cancelled.",
-    "After the trial, cancel": "After the trial, you will be downgraded to the {{defaultPlanName}} plan and your subscription will be cancelled.",
+    "After the trial, cancel": "After the trial, you will be downgraded to the {{postTrialPlanName}} plan and your subscription will be cancelled.",
     "After the trial, subscribe": "After the trial, subscription starts and you will be billed.",
     "Amount off": "{{amount}} off",
     "An invoice is created when charges reach $X; the rest is billed monthly.": "An invoice is created when charges reach {{amount}}; the rest is billed monthly.",
@@ -6800,6 +6813,7 @@ var en_default = {
     "Subscription canceled": "Subscription canceled",
     Subscription: "Subscription",
     "Talk to support": "Talk to support",
+    "Tax (description):": "Tax ({{description}}):",
     "There was a problem retrieving your upcoming invoice.": "There was a problem retrieving your upcoming invoice.",
     "There was a problem retrieving your invoices.": "There was a problem retrieving your invoices.",
     "Tiers apply progressively as quantity increases.": "Tiers apply progressively as quantity increases.",
@@ -7493,11 +7507,15 @@ function BillingPlanCreditGrantResponseDataFromJSONTyped(json, ignoreDiscriminat
     creditName: json["credit_name"],
     creditPluralName: json["credit_plural_name"] == null ? void 0 : json["credit_plural_name"],
     creditSingularName: json["credit_singular_name"] == null ? void 0 : json["credit_singular_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"] == null ? void 0 : json["reset_type"],
     updatedAt: new Date(json["updated_at"])
   };
 }
@@ -7642,36 +7660,6 @@ function BillingSubscriptionDiscountViewFromJSONTyped(json, ignoreDiscriminator)
   };
 }
 
-// src/api/checkoutexternal/models/BillingSubscriptionResponseData.ts
-function BillingSubscriptionResponseDataFromJSON(json) {
-  return BillingSubscriptionResponseDataFromJSONTyped(json, false);
-}
-function BillingSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
-    cancelAtPeriodEnd: json["cancel_at_period_end"],
-    companyId: json["company_id"] == null ? void 0 : json["company_id"],
-    createdAt: new Date(json["created_at"]),
-    currency: json["currency"],
-    customerExternalId: json["customer_external_id"],
-    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
-    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
-    id: json["id"],
-    interval: json["interval"],
-    metadata: json["metadata"] == null ? void 0 : json["metadata"],
-    periodEnd: json["period_end"],
-    periodStart: json["period_start"],
-    status: json["status"],
-    subscriptionExternalId: json["subscription_external_id"],
-    totalPrice: json["total_price"],
-    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"],
-    trialEndSetting: json["trial_end_setting"] == null ? void 0 : json["trial_end_setting"]
-  };
-}
-
 // src/api/checkoutexternal/models/InvoiceResponseData.ts
 function InvoiceResponseDataFromJSON(json) {
   return InvoiceResponseDataFromJSONTyped(json, false);
@@ -7825,6 +7813,38 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
   };
 }
 
+// src/api/checkoutexternal/models/CheckoutResponseData.ts
+function CheckoutResponseDataFromJSON(json) {
+  return CheckoutResponseDataFromJSONTyped(json, false);
+}
+function CheckoutResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    cancelAt: json["cancel_at"] == null ? void 0 : json["cancel_at"],
+    cancelAtPeriodEnd: json["cancel_at_period_end"],
+    companyId: json["company_id"] == null ? void 0 : json["company_id"],
+    confirmPaymentIntentClientSecret: json["confirm_payment_intent_client_secret"] == null ? void 0 : json["confirm_payment_intent_client_secret"],
+    confirmPaymentIntentId: json["confirm_payment_intent_id"] == null ? void 0 : json["confirm_payment_intent_id"],
+    createdAt: new Date(json["created_at"]),
+    currency: json["currency"],
+    customerExternalId: json["customer_external_id"],
+    defaultPaymentMethodId: json["default_payment_method_id"] == null ? void 0 : json["default_payment_method_id"],
+    expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
+    id: json["id"],
+    interval: json["interval"],
+    metadata: json["metadata"] == null ? void 0 : json["metadata"],
+    periodEnd: json["period_end"],
+    periodStart: json["period_start"],
+    status: json["status"],
+    subscriptionExternalId: json["subscription_external_id"],
+    totalPrice: json["total_price"],
+    trialEnd: json["trial_end"] == null ? void 0 : json["trial_end"],
+    trialEndSetting: json["trial_end_setting"] == null ? void 0 : json["trial_end_setting"]
+  };
+}
+
 // src/api/checkoutexternal/models/CheckoutResponse.ts
 function CheckoutResponseFromJSON(json) {
   return CheckoutResponseFromJSONTyped(json, false);
@@ -7834,7 +7854,7 @@ function CheckoutResponseFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
-    data: BillingSubscriptionResponseDataFromJSON(json["data"]),
+    data: CheckoutResponseDataFromJSON(json["data"]),
     params: json["params"]
   };
 }
@@ -8072,6 +8092,24 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/CompanyOverrideNoteResponseData.ts
+function CompanyOverrideNoteResponseDataFromJSON(json) {
+  return CompanyOverrideNoteResponseDataFromJSONTyped(json, false);
+}
+function CompanyOverrideNoteResponseDataFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    externalUserId: json["external_user_id"],
+    externalUserName: json["external_user_name"],
+    id: json["id"],
+    note: json["note"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/checkoutexternal/models/FeatureResponseData.ts
 function FeatureResponseDataFromJSON(json) {
   return FeatureResponseDataFromJSONTyped(json, false);
@@ -8117,6 +8155,9 @@ function CompanyOverrideResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     id: json["id"],
     metricPeriod: json["metric_period"] == null ? void 0 : json["metric_period"],
     metricPeriodMonthReset: json["metric_period_month_reset"] == null ? void 0 : json["metric_period_month_reset"],
+    notes: json["notes"].map(
+      CompanyOverrideNoteResponseDataFromJSON
+    ),
     ruleId: json["rule_id"] == null ? void 0 : json["rule_id"],
     ruleIdUsageExceeded: json["rule_id_usage_exceeded"] == null ? void 0 : json["rule_id_usage_exceeded"],
     updatedAt: new Date(json["updated_at"]),
@@ -8333,12 +8374,16 @@ function PlanCreditGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditId: json["credit_id"],
     creditName: json["credit_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -8592,7 +8637,8 @@ function ComponentCheckoutSettingsFromJSONTyped(json, ignoreDiscriminator) {
   return {
     collectAddress: json["collect_address"],
     collectEmail: json["collect_email"],
-    collectPhone: json["collect_phone"]
+    collectPhone: json["collect_phone"],
+    taxCollectionEnabled: json["tax_collection_enabled"]
   };
 }
 
@@ -8779,6 +8825,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
+    postTrialPlan: json["post_trial_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["post_trial_plan"]),
+    showCredits: json["show_credits"],
     showPeriodToggle: json["show_period_toggle"],
     showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
@@ -8963,6 +9011,9 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
+    taxAmount: json["tax_amount"] == null ? void 0 : json["tax_amount"],
+    taxDisplayName: json["tax_display_name"] == null ? void 0 : json["tax_display_name"],
+    taxRequireBillingDetails: json["tax_require_billing_details"],
     trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"]),
     upcomingInvoiceLineItems: json["upcoming_invoice_line_items"].map(PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON)
   };
@@ -10202,12 +10253,16 @@ function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditId: json["credit_id"],
     creditName: json["credit_name"],
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     id: json["id"],
     planId: json["plan_id"],
     planName: json["plan_name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
     resetCadence: json["reset_cadence"],
     resetStart: json["reset_start"],
+    resetType: json["reset_type"],
     singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
     updatedAt: new Date(json["updated_at"])
   };
@@ -10333,6 +10388,7 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
+    showCredits: json["show_credits"],
     showPeriodToggle: json["show_period_toggle"],
     showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
@@ -10532,7 +10588,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.6.2",
+      "X-Schematic-Components-Version": "1.7.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10546,6 +10602,15 @@ var EmbedProvider = ({
     },
     [options.debug]
   );
+  const finishCheckout = useCallback3(
+    (checkoutData) => {
+      dispatch({
+        type: "CHECKOUT",
+        data: checkoutData
+      });
+    },
+    [dispatch]
+  );
   const hydratePublic = useCallback3(async () => {
     dispatch({ type: "HYDRATE_STARTED" });
     try {
@@ -10687,7 +10752,7 @@ var EmbedProvider = ({
       const response = await api.checkout?.checkout({
         changeSubscriptionRequestBody
       });
-      if (response) {
+      if (response && !response.data.confirmPaymentIntentClientSecret) {
         dispatch({
           type: "CHECKOUT",
           data: response.data
@@ -10898,6 +10963,7 @@ var EmbedProvider = ({
         getUpcomingInvoice: debouncedGetUpcomingInvoice,
         getCustomerBalance: debouncedGetCustomerBalance,
         listInvoices: debouncedListInvoices,
+        finishCheckout,
         setError,
         setAccessToken,
         setLayout,
@@ -10927,23 +10993,131 @@ function useIsLightBackground() {
   return isLightBackground;
 }
 
+// src/hooks/usePaymentConfirmation.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+var usePaymentConfirmation = ({
+  stripe,
+  clientSecret,
+  onSuccess,
+  onError: onError3,
+  autoConfirm = false
+}) => {
+  const [isConfirming, setIsConfirming] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [status, setStatus] = useState3("idle");
+  const confirmedSecrets = useRef3(/* @__PURE__ */ new Set());
+  const abortControllerRef = useRef3(null);
+  const confirmPayment = useCallback4(async () => {
+    if (!stripe || !clientSecret) {
+      const error2 = new Error(
+        "Missing required parameters: stripe instance or client secret"
+      );
+      setError(error2);
+      setStatus("failed");
+      onError3?.(error2);
+      return;
+    }
+    if (confirmedSecrets.current.has(clientSecret) || isConfirming) {
+      console.warn("Payment confirmation already attempted or in progress");
+      return;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const { signal } = abortControllerRef.current;
+    setIsConfirming(true);
+    setError(null);
+    setStatus("confirming");
+    try {
+      confirmedSecrets.current.add(clientSecret);
+      const stripeInstance = await stripe;
+      if (signal.aborted) {
+        throw new Error("Payment confirmation was cancelled");
+      }
+      if (!stripeInstance) {
+        throw new Error("Failed to load Stripe instance");
+      }
+      const result = await stripeInstance.confirmCardPayment(clientSecret);
+      if (signal.aborted) {
+        throw new Error("Payment confirmation was cancelled");
+      }
+      if (result.error) {
+        throw new Error(result.error.message || "Payment confirmation failed");
+      }
+      setStatus("succeeded");
+      onSuccess?.();
+    } catch (err2) {
+      if (!signal.aborted) {
+        const error2 = err2 instanceof Error ? err2 : new Error("Unknown error occurred");
+        setError(error2);
+        setStatus("failed");
+        onError3?.(error2);
+        confirmedSecrets.current.delete(clientSecret);
+      }
+    } finally {
+      if (!signal.aborted) {
+        setIsConfirming(false);
+      }
+      abortControllerRef.current = null;
+    }
+  }, [stripe, clientSecret, onSuccess, onError3, isConfirming]);
+  const reset = useCallback4(() => {
+    if (clientSecret) {
+      confirmedSecrets.current.delete(clientSecret);
+    }
+    setIsConfirming(false);
+    setError(null);
+    setStatus("idle");
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, [clientSecret]);
+  useEffect3(() => {
+    if (autoConfirm && status === "idle" && stripe && clientSecret) {
+      confirmPayment();
+    }
+  }, [autoConfirm, stripe, clientSecret]);
+  useEffect3(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
+  }, []);
+  useEffect3(() => {
+    if (clientSecret && status !== "idle") {
+      reset();
+    }
+  }, [clientSecret]);
+  return {
+    confirmPayment,
+    isConfirming,
+    error,
+    status,
+    reset
+  };
+};
+
 // src/hooks/usePrevious.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
 function usePrevious2(value) {
-  const ref = useRef3(void 0);
-  useEffect3(() => {
+  const ref = useRef4(void 0);
+  useEffect4(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 
 // src/hooks/useRequest.ts
-import { useCallback as useCallback4, useMemo as useMemo5, useState as useState3 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5, useState as useState4 } from "react";
 function useRequest(fn) {
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [data, setData] = useState3(void 0);
-  const request = useCallback4(async () => {
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [data, setData] = useState4(void 0);
+  const request = useCallback5(async () => {
     try {
       setError(null);
       setIsLoading(true);
@@ -11003,9 +11177,9 @@ function useTrialEnd() {
 }
 
 // src/hooks/useWrapChildren.ts
-import { useLayoutEffect, useState as useState4 } from "react";
+import { useLayoutEffect, useState as useState5 } from "react";
 function useWrapChildren(elements) {
-  const [shouldWrap, setShouldWrap] = useState4(
+  const [shouldWrap, setShouldWrap] = useState5(
     () => new Array(elements.length).fill(false)
   );
   useLayoutEffect(() => {
@@ -11529,7 +11703,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
 });
 
 // src/components/ui/modal/Modal.tsx
-import { useCallback as useCallback5, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+import { useCallback as useCallback6, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
 
 // src/components/ui/modal/styles.ts
 var Overlay = dt(Box)`
@@ -11594,8 +11768,8 @@ var Modal2 = ({
 }) => {
   const { setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const ref = useRef4(null);
-  const handleClose = useCallback5(() => {
+  const ref = useRef5(null);
+  const handleClose = useCallback6(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -11629,7 +11803,7 @@ var Modal2 = ({
 Modal2.displayName = "Modal";
 
 // src/components/ui/modal/ModalHeader.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var ModalHeader = ({
   children,
@@ -11638,7 +11812,7 @@ var ModalHeader = ({
 }) => {
   const { settings, setLayout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const handleClose = useCallback6(() => {
+  const handleClose = useCallback7(() => {
     setLayout("portal");
     onClose?.();
   }, [setLayout, onClose]);
@@ -11827,7 +12001,7 @@ var Text = dt.span.withConfig({
 
 // src/components/ui/tooltip/Tooltip.tsx
 var import_debounce2 = __toESM(require_debounce());
-import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/ui/tooltip/styles.ts
@@ -11984,10 +12158,10 @@ var Tooltip = ({
   fullWidth = false,
   ...rest
 }) => {
-  const ref = useRef5(null);
-  const [show, setShow] = useState5(false);
-  const [coords2, setCoords] = useState5({ x: 0, y: 0 });
-  const updateCoords = useCallback7(() => {
+  const ref = useRef6(null);
+  const [show, setShow] = useState6(false);
+  const [coords2, setCoords] = useState6({ x: 0, y: 0 });
+  const updateCoords = useCallback8(() => {
     if (ref.current) {
       const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
       const rect = ref.current.getBoundingClientRect();
@@ -12166,7 +12340,7 @@ Root.displayName = "Root";
 
 // src/components/layout/viewport/Viewport.tsx
 var import_debounce3 = __toESM(require_debounce());
-import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useState as useState12 } from "react";
+import { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo15, useState as useState13 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
@@ -12200,17 +12374,17 @@ var BillingThresholdTooltip = ({
 
 // src/components/shared/checkout-dialog/CheckoutDialog.tsx
 import {
-  useCallback as useCallback9,
-  useEffect as useEffect5,
+  useCallback as useCallback10,
+  useEffect as useEffect6,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo9,
-  useRef as useRef6,
-  useState as useState9
+  useRef as useRef7,
+  useState as useState10
 } from "react";
 
 // src/components/shared/sidebar/Sidebar.tsx
 import {
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useMemo as useMemo7
 } from "react";
 
@@ -12286,11 +12460,11 @@ var EntitlementRow = (entitlement) => {
 };
 
 // src/components/shared/sidebar/Proration.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var Proration = ({ currency, charges }) => {
   const { t: t2 } = useTranslation();
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const toggle = (e2) => {
     e2.preventDefault();
     e2.stopPropagation();
@@ -12606,10 +12780,19 @@ var Sidebar = ({
   updatePromoCode,
   showHeader = true,
   shouldTrial = false,
-  willTrialWithoutPaymentMethod = false
+  willTrialWithoutPaymentMethod = false,
+  setConfirmPaymentIntent
 }) => {
   const { t: t2 } = useTranslation();
-  const { data, settings, layout, setLayout, checkout, unsubscribe } = useEmbed();
+  const {
+    data,
+    settings,
+    layout,
+    setLayout,
+    checkout,
+    finishCheckout,
+    unsubscribe
+  } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const {
     currentPlan,
@@ -12697,14 +12880,25 @@ var Sidebar = ({
     total += payInAdvanceCost;
     return formatCurrency(total, currency);
   }, [selectedPlan, currentPlan, planPeriod, addOns, payInAdvanceEntitlements]);
-  const { amountOff, dueNow, newCharges, percentOff, periodStart, proration } = useMemo7(() => {
+  const {
+    amountOff,
+    dueNow,
+    newCharges,
+    percentOff,
+    periodStart,
+    proration,
+    taxAmount,
+    taxDescription
+  } = useMemo7(() => {
     return {
       amountOff: charges?.amountOff ?? 0,
       dueNow: charges?.dueNow ?? 0,
       newCharges: charges?.newCharges ?? 0,
       percentOff: charges?.percentOff ?? 0,
       periodStart: charges?.periodStart,
-      proration: charges?.proration ?? 0
+      proration: charges?.proration ?? 0,
+      taxAmount: charges?.taxAmount ?? 0,
+      taxDescription: charges?.taxDisplayName
     };
   }, [charges]);
   const updatedUsageBasedEntitlements = useMemo7(() => {
@@ -12770,7 +12964,7 @@ var Sidebar = ({
     () => promoCode && (amountOff > 0 || percentOff > 0),
     [promoCode, amountOff, percentOff]
   );
-  const handleCheckout = useCallback8(async () => {
+  const handleCheckout = useCallback9(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
     try {
@@ -12808,7 +13002,7 @@ var Sidebar = ({
         []
       );
       const allPayInAdvance = [...planPayInAdvance, ...addOnPayInAdvance];
-      await checkout({
+      const checkoutResponseFromBackend = await checkout({
         newPlanId: planId,
         newPriceId: priceId,
         addOnIds: addOns.reduce((acc, addOn) => {
@@ -12840,8 +13034,32 @@ var Sidebar = ({
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
-      setIsLoading(false);
-      setLayout("portal");
+      if (checkoutResponseFromBackend?.data.confirmPaymentIntentClientSecret) {
+        setConfirmPaymentIntent({
+          clientSecret: checkoutResponseFromBackend?.data.confirmPaymentIntentClientSecret,
+          callback: (confirmed) => {
+            if (typeof confirmed === "undefined") {
+              return;
+            }
+            console.log("Payment intent has confirmed. Result: ", confirmed);
+            setIsLoading(false);
+            if (!confirmed) {
+              setError(
+                t2(
+                  "Error processing payment. Please try a different payment method."
+                )
+              );
+              setLayout("checkout");
+            } else {
+              finishCheckout(checkoutResponseFromBackend?.data);
+              setLayout("portal");
+            }
+          }
+        });
+      } else {
+        setIsLoading(false);
+        setLayout("portal");
+      }
     } catch {
       setIsLoading(false);
       setLayout("checkout");
@@ -12852,6 +13070,7 @@ var Sidebar = ({
   }, [
     t2,
     checkout,
+    setConfirmPaymentIntent,
     paymentMethodId,
     planPeriod,
     selectedPlan,
@@ -12863,9 +13082,10 @@ var Sidebar = ({
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
     shouldTrial,
-    promoCode
+    promoCode,
+    finishCheckout
   ]);
-  const handleUnsubscribe = useCallback8(async () => {
+  const handleUnsubscribe = useCallback9(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -13337,6 +13557,20 @@ var Sidebar = ({
                   ]
                 }
               ),
+              taxAmount > 0 && /* @__PURE__ */ jsxs9(
+                Flex,
+                {
+                  $justifyContent: "space-between",
+                  $alignItems: "center",
+                  $gap: "1rem",
+                  children: [
+                    /* @__PURE__ */ jsx14(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx14(Text, { children: t2("Tax (description):", {
+                      description: taxDescription
+                    }) }) }),
+                    /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(Text, { children: formatCurrency(taxAmount, selectedPlanCurrency) }) })
+                  ]
+                }
+              ),
               charges && /* @__PURE__ */ jsxs9(
                 Flex,
                 {
@@ -13541,21 +13775,32 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
 };
 
 // src/components/shared/checkout-dialog/Checkout.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var Checkout = ({
   isPaymentMethodRequired,
   setPaymentMethodId,
-  updatePromoCode
+  updatePromoCode,
+  confirmPaymentIntentProps,
+  financeData,
+  onPaymentMethodSaved
 }) => {
   const { t: t2 } = useTranslation();
   const isLightBackground = useIsLightBackground();
-  const [discount, setDiscount] = useState7("");
+  const [discount, setDiscount] = useState8("");
   if (!isPaymentMethodRequired) {
     return null;
   }
   return /* @__PURE__ */ jsxs11(Fragment6, { children: [
-    /* @__PURE__ */ jsx16(PaymentMethodDetails, { setPaymentMethodId }),
+    /* @__PURE__ */ jsx16(
+      PaymentMethodDetails,
+      {
+        confirmPaymentIntentProps,
+        setPaymentMethodId,
+        financeData,
+        onPaymentMethodSaved
+      }
+    ),
     /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
       /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(Text, { display: "heading4", children: t2("Discount") }) }),
       /* @__PURE__ */ jsxs11(
@@ -13756,7 +14001,7 @@ var Navigation = ({
 };
 
 // src/components/shared/checkout-dialog/Plan.tsx
-import { useEffect as useEffect4, useMemo as useMemo8, useState as useState8 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo8, useState as useState9 } from "react";
 import { Fragment as Fragment8, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var Selected = ({ isCurrent = false, isTrial = false }) => {
   const { t: t2 } = useTranslation();
@@ -13908,7 +14153,7 @@ var Plan = ({
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [entitlementCounts, setEntitlementCounts] = useState8(
+  const [entitlementCounts, setEntitlementCounts] = useState9(
     () => plans.reduce(entitlementCountsReducer, {})
   );
   const { isTrialing, showZeroPriceAsFree } = useMemo8(() => {
@@ -13938,7 +14183,7 @@ var Plan = ({
       return prev2;
     });
   };
-  useEffect4(() => {
+  useEffect5(() => {
     setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
   }, [plans]);
   const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -14469,18 +14714,19 @@ var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const contentRef = useRef6(null);
-  const checkoutRef = useRef6(null);
-  const [charges, setCharges] = useState9();
-  const [paymentMethodId, setPaymentMethodId] = useState9(
+  const contentRef = useRef7(null);
+  const checkoutRef = useRef7(null);
+  const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = useState10(void 0);
+  const [charges, setCharges] = useState10();
+  const [paymentMethodId, setPaymentMethodId] = useState10(
     () => {
       if (isCheckoutData(data)) {
         return (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId;
       }
     }
   );
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9();
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10();
   const {
     currentPlanId,
     currentEntitlements,
@@ -14506,7 +14752,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
     [data, checkoutState?.period]
   );
-  const [planPeriod, setPlanPeriod] = useState9(currentPeriod);
+  const [planPeriod, setPlanPeriod] = useState10(currentPeriod);
   const {
     plans: availablePlans,
     addOns: availableAddOns,
@@ -14514,15 +14760,15 @@ var CheckoutDialog = ({ top = 0 }) => {
   } = useAvailablePlans(planPeriod, {
     useSelectedPeriod: showPeriodToggle
   });
-  const [selectedPlan, setSelectedPlan] = useState9(
+  const [selectedPlan, setSelectedPlan] = useState10(
     () => {
       return availablePlans.find(
         (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
       );
     }
   );
-  const [shouldTrial, setShouldTrial] = useState9(false);
-  const [addOns, setAddOns] = useState9(() => {
+  const [shouldTrial, setShouldTrial] = useState10(false);
+  const [addOns, setAddOns] = useState10(() => {
     if (isCheckoutData(data)) {
       return availableAddOns.map((addOn) => ({
         ...addOn,
@@ -14533,7 +14779,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
-  const [creditBundles, setCreditBundles] = useState9(() => {
+  const [creditBundles, setCreditBundles] = useState10(() => {
     if (isCheckoutData(data)) {
       return data.creditBundles.map((bundle) => ({
         ...bundle,
@@ -14542,7 +14788,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return [];
   });
-  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState9(
+  const [usageBasedEntitlements, setUsageBasedEntitlements] = useState10(
     () => (selectedPlan?.entitlements || []).reduce(
       createActiveUsageBasedEntitlementsReducer(
         currentEntitlements,
@@ -14551,7 +14797,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       []
     )
   );
-  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState9(() => {
+  const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = useState10(() => {
     if (!isCheckoutData(data)) return [];
     const currentAddOns = data.company?.addOns || [];
     return currentAddOns.flatMap((currentAddOn) => {
@@ -14580,8 +14826,8 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [addOnUsageBasedEntitlements]
   );
-  const [promoCode, setPromoCode] = useState9(null);
-  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState9(false);
+  const [promoCode, setPromoCode] = useState10(null);
+  const [isPaymentMethodRequired, setIsPaymentMethodRequired] = useState10(false);
   const willTrialWithoutPaymentMethod = useMemo9(
     () => shouldTrial && !trialPaymentMethodRequired,
     [shouldTrial, trialPaymentMethodRequired]
@@ -14654,7 +14900,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     creditBundles,
     isPaymentMethodRequired
   ]);
-  const [checkoutStage, setCheckoutStage] = useState9(() => {
+  const [checkoutStage, setCheckoutStage] = useState10(() => {
     if (checkoutState?.addOnId) {
       return "addons";
     }
@@ -14672,7 +14918,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     }
     return "plan";
   });
-  const handlePreviewCheckout = useCallback9(
+  const handlePreviewCheckout = useCallback10(
     async (updates) => {
       const period = updates.period || planPeriod;
       const plan = updates.plan || selectedPlan;
@@ -14796,7 +15042,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       promoCode
     ]
   );
-  const selectPlan = useCallback9(
+  const selectPlan = useCallback10(
     (updates) => {
       const plan = updates.plan;
       const period = updates.period || planPeriod;
@@ -14851,7 +15097,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       handlePreviewCheckout
     ]
   );
-  const changePlanPeriod = useCallback9(
+  const changePlanPeriod = useCallback10(
     (period) => {
       if (period !== planPeriod) {
         setPlanPeriod(period);
@@ -14860,7 +15106,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [planPeriod, setPlanPeriod, handlePreviewCheckout]
   );
-  const toggleAddOn = useCallback9(
+  const toggleAddOn = useCallback10(
     (id) => {
       setAddOns((prev2) => {
         const updated = prev2.map((addOn) => ({
@@ -14887,7 +15133,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateUsageBasedEntitlementQuantity = useCallback9(
+  const updateUsageBasedEntitlementQuantity = useCallback10(
     (id, updatedQuantity) => {
       setUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -14906,7 +15152,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateCreditBundleCount = useCallback9(
+  const updateCreditBundleCount = useCallback10(
     (id, updatedCount) => {
       setCreditBundles((prev2) => {
         const updated = prev2.map(
@@ -14921,7 +15167,7 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updateAddOnEntitlementQuantity = useCallback9(
+  const updateAddOnEntitlementQuantity = useCallback10(
     (id, updatedQuantity) => {
       setAddOnUsageBasedEntitlements((prev2) => {
         const updated = prev2.map(
@@ -14938,18 +15184,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     },
     [handlePreviewCheckout]
   );
-  const updatePromoCode = useCallback9(
+  const updatePromoCode = useCallback10(
     async (code) => {
       handlePreviewCheckout({ promoCode: code });
     },
     [handlePreviewCheckout]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (selectedPlan) {
       selectPlan({ plan: selectedPlan, period: currentPeriod });
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     setAddOns((prevAddOns) => {
       return availableAddOns.filter((availAddOn) => {
         if (!selectedPlan) {
@@ -14971,7 +15217,7 @@ var CheckoutDialog = ({ top = 0 }) => {
       });
     });
   }, [availableAddOns, data?.addOnCompatibilities, selectedPlan]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (charges) {
       checkoutRef.current?.scrollTo({
         top: 0,
@@ -15142,7 +15388,10 @@ var CheckoutDialog = ({ top = 0 }) => {
                   {
                     isPaymentMethodRequired,
                     setPaymentMethodId: (id) => setPaymentMethodId(id),
-                    updatePromoCode
+                    updatePromoCode,
+                    confirmPaymentIntentProps,
+                    financeData: charges,
+                    onPaymentMethodSaved: handlePreviewCheckout
                   }
                 )
               ]
@@ -15171,6 +15420,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               setIsLoading,
               updatePromoCode,
               shouldTrial,
+              setConfirmPaymentIntent: setConfirmPaymentIntentProps,
               willTrialWithoutPaymentMethod
             }
           )
@@ -15181,11 +15431,11 @@ var CheckoutDialog = ({ top = 0 }) => {
 };
 
 // src/components/shared/payment-dialog/PaymentDialog.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var PaymentDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const contentRef = useRef7(null);
+  const contentRef = useRef8(null);
   return /* @__PURE__ */ jsxs17(Modal2, { size: "md", top, contentRef, children: [
     /* @__PURE__ */ jsx22(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsx22(Text, { $size: 18, children: t2("Edit payment method") }) }),
     /* @__PURE__ */ jsx22(PaymentMethodDetails, {})
@@ -15199,7 +15449,7 @@ import {
   useElements,
   useStripe
 } from "@stripe/react-stripe-js";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 
 // src/components/shared/payment-form/styles.ts
 var Label = dt.label`
@@ -15256,19 +15506,26 @@ var Input2 = dt.input`
 
 // src/components/shared/payment-form/PaymentForm.tsx
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-var PaymentForm = ({ onConfirm }) => {
+var PaymentForm = ({ onConfirm, financeData }) => {
   const { t: t2 } = useTranslation();
   const stripe = useStripe();
   const elements = useElements();
   const { data } = useEmbed();
-  const [email, setEmail] = useState10("");
-  const [message, setMessage] = useState10();
-  const [isLoading, setIsLoading] = useState10(false);
-  const [isConfirmed, setIsConfirmed] = useState10(false);
-  const [isPaymentComplete, setIsPaymentComplete] = useState10(false);
-  const [isAddressComplete, setIsAddressComplete] = useState10(
-    () => !isCheckoutData(data) || !data.checkoutSettings.collectAddress
-  );
+  const [email, setEmail] = useState11("");
+  const [message, setMessage] = useState11();
+  const [isLoading, setIsLoading] = useState11(false);
+  const [isConfirmed, setIsConfirmed] = useState11(false);
+  const [isPaymentComplete, setIsPaymentComplete] = useState11(false);
+  const [isAddressComplete, setIsAddressComplete] = useState11(() => {
+    if (!isCheckoutData(data)) {
+      return true;
+    }
+    const shouldCollectAddress = shouldCollectBillingAddress(
+      data.checkoutSettings.collectAddress,
+      financeData
+    );
+    return !shouldCollectAddress;
+  });
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -15337,7 +15594,10 @@ var PaymentForm = ({ onConfirm }) => {
             }
           )
         ] }),
-        isCheckoutData(data) && (data.checkoutSettings.collectAddress || data.checkoutSettings.collectPhone) && /* @__PURE__ */ jsx23(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx23(
+        isCheckoutData(data) && (shouldCollectBillingAddress(
+          data.checkoutSettings.collectAddress,
+          financeData
+        ) || data.checkoutSettings.collectPhone) && /* @__PURE__ */ jsx23(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ jsx23(
           AddressElement,
           {
             options: {
@@ -15665,14 +15925,14 @@ var TieredPricingDetails = ({
 };
 
 // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
-import { useMemo as useMemo14, useRef as useRef8, useState as useState11 } from "react";
+import { useMemo as useMemo14, useRef as useRef9, useState as useState12 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var UnsubscribeDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
   const { data, setCheckoutState } = useEmbed();
-  const contentRef = useRef8(null);
-  const [error, setError] = useState11();
-  const [isLoading, setIsLoading] = useState11(false);
+  const contentRef = useRef9(null);
+  const [error, setError] = useState12();
+  const [isLoading, setIsLoading] = useState12(false);
   const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = useMemo14(() => {
     if (isCheckoutData(data)) {
       return {
@@ -15779,7 +16039,9 @@ var UnsubscribeDialog = ({ top = 0 }) => {
               isPaymentMethodRequired: false,
               showHeader: false,
               setError: (msg) => setError(msg),
-              setIsLoading
+              setIsLoading,
+              setConfirmPaymentIntent: () => {
+              }
             }
           )
         ]
@@ -15945,7 +16207,7 @@ import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-
 var Viewport = forwardRef5(
   ({ children, portal, ...props }, ref) => {
     const { data, layout, settings } = useEmbed();
-    const [top, setTop] = useState12(0);
+    const [top, setTop] = useState13(0);
     const { canCheckout, isBadgeVisible } = useMemo15(() => {
       return {
         canCheckout: data?.capabilities?.checkout ?? true,
@@ -16044,7 +16306,7 @@ var ButtonElement = forwardRef6(({ children, className, ...rest }, ref) => {
 ButtonElement.displayName = "Button";
 
 // src/components/elements/included-features/IncludedFeatures.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef9, useState as useState13 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo17, useRef as useRef10, useState as useState14 } from "react";
 
 // src/components/elements/included-features/UsageDetails.tsx
 import { Fragment as Fragment13, useMemo as useMemo16 } from "react";
@@ -16297,10 +16559,10 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
-  const elements = useRef9([]);
+  const elements = useRef10([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const [showCount, setShowCount] = useState13(VISIBLE_ENTITLEMENT_COUNT);
+  const [showCount, setShowCount] = useState14(VISIBLE_ENTITLEMENT_COUNT);
   const { plan, addOns, featureUsage } = useMemo17(() => {
     if (isCheckoutData(data)) {
       const orderedFeatureUsage = props.visibleFeatures?.reduce(
@@ -16437,7 +16699,7 @@ var IncludedFeatures = forwardRef7(({ className, ...rest }, ref) => {
 IncludedFeatures.displayName = "IncludedFeatures";
 
 // src/components/elements/invoices/Invoices.tsx
-import { forwardRef as forwardRef8, useCallback as useCallback10, useEffect as useEffect6, useState as useState14 } from "react";
+import { forwardRef as forwardRef8, useCallback as useCallback11, useEffect as useEffect7, useState as useState15 } from "react";
 import { Fragment as Fragment15, jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function resolveDesignProps3(props) {
   return {
@@ -16476,11 +16738,11 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps3(rest);
   const { t: t2 } = useTranslation();
   const { listInvoices, settings } = useEmbed();
-  const [isLoading, setIsLoading] = useState14(false);
-  const [error, setError] = useState14();
-  const [invoices, setInvoices] = useState14(() => formatInvoices(data));
-  const [listSize, setListSize] = useState14(props.limit.number);
-  const getInvoices = useCallback10(async () => {
+  const [isLoading, setIsLoading] = useState15(false);
+  const [error, setError] = useState15();
+  const [invoices, setInvoices] = useState15(() => formatInvoices(data));
+  const [listSize, setListSize] = useState15(props.limit.number);
+  const getInvoices = useCallback11(async () => {
     try {
       setError(void 0);
       setIsLoading(true);
@@ -16499,10 +16761,10 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
       (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
     );
   };
-  useEffect6(() => {
+  useEffect7(() => {
     getInvoices();
   }, [getInvoices]);
-  useEffect6(() => {
+  useEffect7(() => {
     setInvoices(formatInvoices(data));
   }, [data]);
   if (invoices.length === 0) {
@@ -16582,7 +16844,7 @@ var Invoices = forwardRef8(({ className, data, ...rest }, ref) => {
 Invoices.displayName = "Invoices";
 
 // src/components/elements/metered-features/MeteredFeatures.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback11, useMemo as useMemo18, useRef as useRef10, useState as useState15 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback12, useMemo as useMemo18, useRef as useRef11, useState as useState16 } from "react";
 
 // src/components/elements/metered-features/Meter.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -16782,7 +17044,7 @@ function resolveDesignProps4(props) {
 }
 var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
   const props = resolveDesignProps4(rest);
-  const elements = useRef10([]);
+  const elements = useRef11([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const { t: t2 } = useTranslation();
   const { data, settings, setCheckoutState } = useEmbed();
@@ -16821,10 +17083,10 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       creditGroups: []
     };
   }, [props.visibleFeatures, data]);
-  const [creditVisibility, setCreditVisibility] = useState15(
+  const [creditVisibility, setCreditVisibility] = useState16(
     creditGroups.map(({ id }) => ({ id, isExpanded: false }))
   );
-  const toggleBalanceDetails = useCallback11((id) => {
+  const toggleBalanceDetails = useCallback12((id) => {
     setCreditVisibility(
       (prev2) => prev2.map(
         (item) => item.id === id ? { ...item, isExpanded: !item.isExpanded } : item
@@ -17497,7 +17759,7 @@ var loadStripe = function loadStripe2() {
 };
 
 // src/components/elements/payment-method/PaymentMethodDetails.tsx
-import { useCallback as useCallback12, useEffect as useEffect7, useMemo as useMemo21, useState as useState16 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect8, useMemo as useMemo21, useState as useState17 } from "react";
 import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var resolveDesignProps6 = () => {
   return {
@@ -17512,7 +17774,10 @@ var resolveDesignProps6 = () => {
   };
 };
 var PaymentMethodDetails = ({
-  setPaymentMethodId
+  setPaymentMethodId,
+  confirmPaymentIntentProps,
+  financeData,
+  onPaymentMethodSaved
 }) => {
   const props = resolveDesignProps6();
   const { t: t2 } = useTranslation();
@@ -17538,13 +17803,25 @@ var PaymentMethodDetails = ({
     };
   }, [data]);
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState16(false);
-  const [error, setError] = useState16();
-  const [showPaymentForm, setShowPaymentForm] = useState16(false);
-  const [stripe, setStripe] = useState16(null);
-  const [setupIntent, setSetupIntent] = useState16();
-  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState16(false);
-  const [currentPaymentMethod, setCurrentPaymentMethod] = useState16(subscription?.paymentMethod || defaultPaymentMethod);
+  const [isLoading, setIsLoading] = useState17(false);
+  const [error, setError] = useState17();
+  const [showPaymentForm, setShowPaymentForm] = useState17(false);
+  const [stripe, setStripe] = useState17(null);
+  const [setupIntent, setSetupIntent] = useState17();
+  const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = useState17(false);
+  const [currentPaymentMethod, setCurrentPaymentMethod] = useState17(subscription?.paymentMethod || defaultPaymentMethod);
+  const { isConfirming: isConfirmingPayment } = usePaymentConfirmation({
+    stripe,
+    clientSecret: confirmPaymentIntentProps?.clientSecret,
+    onSuccess: () => {
+      confirmPaymentIntentProps?.callback(true);
+    },
+    onError: (error2) => {
+      console.error("Payment confirmation error:", error2);
+      confirmPaymentIntentProps?.callback(false);
+    },
+    autoConfirm: true
+  });
   const monthsToExpiration = useMemo21(() => {
     let expiration;
     if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
@@ -17568,7 +17845,7 @@ var PaymentMethodDetails = ({
   const toggleShowPaymentMethods = () => {
     setShowDifferentPaymentMethods((prev2) => !prev2);
   };
-  const initializePaymentMethod = useCallback12(async () => {
+  const initializePaymentMethod = useCallback13(async () => {
     try {
       setIsLoading(true);
       const response = await createSetupIntent();
@@ -17584,7 +17861,7 @@ var PaymentMethodDetails = ({
       setIsLoading(false);
     }
   }, [t2, createSetupIntent]);
-  const handleUpdatePaymentMethod = useCallback12(
+  const handleUpdatePaymentMethod = useCallback13(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -17594,6 +17871,9 @@ var PaymentMethodDetails = ({
           if (setPaymentMethodId) {
             setPaymentMethodId(response.data.externalId);
           }
+          if (onPaymentMethodSaved) {
+            onPaymentMethodSaved({});
+          }
         }
       } catch {
         setError(t2("Error updating payment method. Please try again."));
@@ -17601,9 +17881,9 @@ var PaymentMethodDetails = ({
         setIsLoading(false);
       }
     },
-    [t2, setPaymentMethodId, updatePaymentMethod]
+    [t2, setPaymentMethodId, updatePaymentMethod, onPaymentMethodSaved]
   );
-  const handleDeletePaymentMethod = useCallback12(
+  const handleDeletePaymentMethod = useCallback13(
     async (paymentMethodId) => {
       try {
         setIsLoading(true);
@@ -17616,7 +17896,7 @@ var PaymentMethodDetails = ({
     },
     [t2, deletePaymentMethod]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!stripe && setupIntent) {
       let publishableKey = setupIntent.publishableKey || setupIntent.schematicPublishableKey;
       const stripeOptions = {};
@@ -17624,10 +17904,11 @@ var PaymentMethodDetails = ({
         publishableKey = setupIntent.schematicPublishableKey;
         stripeOptions.stripeAccount = setupIntent.accountId;
       }
-      setStripe(loadStripe(publishableKey, stripeOptions));
+      const stripePromise2 = loadStripe(publishableKey, stripeOptions);
+      setStripe(stripePromise2);
     }
   }, [stripe, setupIntent]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
       initializePaymentMethod();
     }
@@ -17642,7 +17923,7 @@ var PaymentMethodDetails = ({
       Flex,
       {
         $position: "absolute",
-        $zIndex: isLoading ? 1 : 0,
+        $zIndex: isLoading || isConfirmingPayment ? 1 : 0,
         $justifyContent: "center",
         $alignItems: "center",
         $width: "100%",
@@ -17652,7 +17933,7 @@ var PaymentMethodDetails = ({
           {
             $color: settings.theme.primary,
             $size: "2xl",
-            $isLoading: isLoading
+            $isLoading: isLoading || isConfirmingPayment
           }
         )
       }
@@ -17661,16 +17942,16 @@ var PaymentMethodDetails = ({
       Flex,
       {
         $position: "relative",
-        $zIndex: isLoading ? 0 : 1,
+        $zIndex: isLoading || isConfirmingPayment ? 0 : 1,
         $flexDirection: "column",
         $flexGrow: 1,
         $gap: "1rem",
         $overflow: "auto",
         $padding: "2rem 2.5rem 2rem 2.5rem",
-        $visibility: isLoading ? "hidden" : "visible",
+        $visibility: isLoading || isConfirmingPayment ? "hidden" : "visible",
         $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
         children: [
-          setupIntent && showPaymentForm ? /* @__PURE__ */ jsxs31(
+          setupIntent && showPaymentForm && stripe ? /* @__PURE__ */ jsxs31(
             Elements,
             {
               stripe,
@@ -17703,6 +17984,7 @@ var PaymentMethodDetails = ({
                 /* @__PURE__ */ jsx40(
                   PaymentForm,
                   {
+                    financeData,
                     onConfirm: async (paymentMethodId) => {
                       await handleUpdatePaymentMethod(paymentMethodId);
                       setShowPaymentForm(false);
@@ -17984,7 +18266,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     creditGroups,
     billingSubscription,
     canCheckout,
-    defaultPlan,
+    postTrialPlan,
     featureUsage,
     showZeroPriceAsFree,
     trialPaymentMethodRequired
@@ -17995,7 +18277,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         creditBundles: creditBundles2,
         creditGrants,
         capabilities,
-        defaultPlan: defaultPlan2,
+        postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2,
         showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
@@ -18025,7 +18307,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         creditGroups: creditGroups2,
         billingSubscription: company?.billingSubscription,
         canCheckout: capabilities?.checkout ?? true,
-        defaultPlan: defaultPlan2,
+        postTrialPlan: postTrialPlan2,
         featureUsage: featureUsage2?.features || [],
         showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
@@ -18038,7 +18320,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       creditGroups: { plan: [], bundles: [], promotional: [] },
       billingSubscription: void 0,
       canCheckout: false,
-      defaultPlan: void 0,
+      postTrialPlan: void 0,
       featureUsage: [],
       showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
@@ -18079,8 +18361,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         $backgroundColor: isLightBackground ? darken(settings.theme.card.background, 0.04) : lighten(settings.theme.card.background, 0.04),
         children: [
           typeof trialEnd.formatted !== "undefined" && /* @__PURE__ */ jsx43(Text, { as: "h3", display: "heading3", children: trialEnd.formatted }),
-          /* @__PURE__ */ jsx43(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : defaultPlan ? t2("After the trial, cancel", {
-            defaultPlanName: defaultPlan?.name
+          /* @__PURE__ */ jsx43(Text, { as: "p", $size: 0.8125 * settings.theme.typography.text.fontSize, children: trialPaymentMethodRequired ? t2("After the trial, subscribe") : postTrialPlan ? t2("After the trial, cancel", {
+            postTrialPlanName: postTrialPlan?.name
           }) : t2("After the trial, cancel no default", {
             planName: currentPlan?.name
           }) })
@@ -18368,9 +18650,9 @@ PlanManager.displayName = "PlanManager";
 import {
   Fragment as Fragment24,
   forwardRef as forwardRef12,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo26,
-  useState as useState17
+  useState as useState18
 } from "react";
 
 // src/components/elements/pricing-table/AddOn.tsx
@@ -19081,11 +19363,11 @@ var PricingTable = forwardRef12(
         isStandalone: true
       };
     }, [props.showPeriodToggle, data]);
-    const [selectedPeriod, setSelectedPeriod] = useState17(currentPeriod);
+    const [selectedPeriod, setSelectedPeriod] = useState18(currentPeriod);
     const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
       useSelectedPeriod: showPeriodToggle
     });
-    const [entitlementCounts, setEntitlementCounts] = useState17(
+    const [entitlementCounts, setEntitlementCounts] = useState18(
       () => plans.reduce(entitlementCountsReducer, {})
     );
     const handleToggleShowAll = (id) => {
@@ -19103,12 +19385,12 @@ var PricingTable = forwardRef12(
         return prev2;
       });
     };
-    useEffect8(() => {
+    useEffect9(() => {
       if (isStandalone) {
         hydratePublic();
       }
     }, [isStandalone, hydratePublic]);
-    useEffect8(() => {
+    useEffect9(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
     if (isPending) {
@@ -19332,7 +19614,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
 UnsubscribeButton.displayName = "UnsubscribeButton";
 
 // src/components/elements/upcoming-bill/UpcomingBill.tsx
-import { forwardRef as forwardRef15, useCallback as useCallback13, useEffect as useEffect9, useMemo as useMemo28, useState as useState18 } from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback14, useEffect as useEffect10, useMemo as useMemo28, useState as useState19 } from "react";
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function resolveDesignProps11(props) {
   return {
@@ -19357,10 +19639,10 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
   const { t: t2 } = useTranslation();
   const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const [isLoading, setIsLoading] = useState18(false);
-  const [error, setError] = useState18();
-  const [upcomingInvoice, setUpcomingInvoice] = useState18();
-  const [balances, setBalances] = useState18([]);
+  const [isLoading, setIsLoading] = useState19(false);
+  const [error, setError] = useState19();
+  const [upcomingInvoice, setUpcomingInvoice] = useState19();
+  const [balances, setBalances] = useState19([]);
   const discounts = useMemo28(() => {
     return (isCheckoutData(data) && data.subscription?.discounts || []).map(
       (discount) => ({
@@ -19373,7 +19655,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       })
     );
   }, [data]);
-  const getInvoice = useCallback13(async () => {
+  const getInvoice = useCallback14(async () => {
     if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
       try {
         setError(void 0);
@@ -19389,7 +19671,7 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       }
     }
   }, [data, getUpcomingInvoice]);
-  const getBalances = useCallback13(async () => {
+  const getBalances = useCallback14(async () => {
     try {
       const response = await getCustomerBalance();
       if (response) {
@@ -19399,10 +19681,10 @@ var UpcomingBill = forwardRef15(({ className, ...rest }, ref) => {
       debug("Failed to fetch customer balance.", err2);
     }
   }, [debug, getCustomerBalance]);
-  useEffect9(() => {
+  useEffect10(() => {
     getInvoice();
   }, [getInvoice]);
-  useEffect9(() => {
+  useEffect10(() => {
     getBalances();
   }, [getBalances]);
   if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
@@ -23714,7 +23996,7 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
 var inflate_1 = inflate;
 
 // src/components/embed/Embed.tsx
-import { useContext as useContext5, useEffect as useEffect10, useState as useState19 } from "react";
+import { useContext as useContext5, useEffect as useEffect11, useState as useState20 } from "react";
 
 // src/components/embed/renderer.ts
 import { createElement as createElement5 } from "react";
@@ -23829,7 +24111,7 @@ var Error2 = ({ message }) => {
   );
 };
 var SchematicEmbed = ({ id, accessToken }) => {
-  const [children, setChildren] = useState19(/* @__PURE__ */ jsx51(Loading, {}));
+  const [children, setChildren] = useState20(/* @__PURE__ */ jsx51(Loading, {}));
   const theme = useContext5(et);
   const {
     data,
@@ -23841,17 +24123,17 @@ var SchematicEmbed = ({ id, accessToken }) => {
     setAccessToken,
     updateSettings
   } = useEmbed();
-  useEffect10(() => {
+  useEffect11(() => {
     if (accessToken) {
       setAccessToken(accessToken);
     }
   }, [accessToken, setAccessToken]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (id && stale) {
       hydrateComponent(id);
     }
   }, [id, hydrateComponent, stale]);
-  useEffect10(() => {
+  useEffect11(() => {
     const renderer = createRenderer();
     try {
       if (isCheckoutData(data) && data.component?.ast) {
@@ -23948,6 +24230,7 @@ export {
   useAvailablePlans,
   useEmbed,
   useIsLightBackground,
+  usePaymentConfirmation,
   usePrevious2 as usePrevious,
   useRequest,
   useTrialEnd,