@blocklet/payment-react 1.24.3 → 1.25.0

package/es/payment/form/index.js

@@ -11,11 +11,12 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
-import { fromUnitToToken } from "@ocap/util";
+import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
 import { HelpOutline, OpenInNew } from "@mui/icons-material";
 import { ReactGA } from "@arcblock/ux/lib/withTracker";
+import trim from "lodash/trim";
 import FormInput from "../../components/input.js";
 import FormLabel from "../../components/label.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -29,7 +30,13 @@ import {
   getQueryParams,
   getStatementDescriptor,
   getTokenBalanceLink,
-  isCrossOrigin
+  isCrossOrigin,
+  getCheckoutAmount,
+  formatNumber,
+  formatUsdAmount,
+  getUsdAmountFromBaseAmount,
+  getUsdAmountFromTokenUnits,
+  formatAmount
 } from "../../libs/util.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
@@ -41,7 +48,11 @@ import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 import { saveCurrencyPreference } from "../../libs/currency.js";
 import ConfirmDialog from "../../components/confirm.js";
+import PriceChangeConfirm from "../../components/price-change-confirm.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
+const generateIdempotencyKey = (sessionId, currencyId) => {
+  return `${sessionId}-${currencyId}-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`;
+};
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -110,10 +121,13 @@ export default function PaymentForm({
   customer,
   onPaid,
   onError,
+  onQuoteUpdated = void 0,
+  onPaymentIntentUpdate = void 0,
   // mode,
   action,
   onlyShowBtn = false,
-  isDonation = false
+  isDonation = false,
+  rateUnavailable = false
 }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -151,7 +165,8 @@ export default function PaymentForm({
     stripePaying: false,
     fastCheckoutInfo: null,
     creditInsufficientInfo: null,
-    showEditForm: false
+    showEditForm: false,
+    priceChangeConfirm: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const searchParams = getQueryParams(window.location.href);
@@ -260,7 +275,166 @@ export default function PaymentForm({
   const method = paymentMethods.find((x) => x.id === paymentMethod);
   const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
+  const hasDynamicPricing = useMemo(
+    () => (checkoutSession.line_items || []).some((item) => {
+      const price = item.upsell_price || item.price;
+      return price && price?.pricing_type === "dynamic";
+    }),
+    [checkoutSession.line_items]
+  );
+  const rateUnavailableForDynamic = hasDynamicPricing && rateUnavailable;
+  const canPay = payable && !rateUnavailableForDynamic;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
+  const [priceUpdateInfo, setPriceUpdateInfo] = useSetState({
+    open: false,
+    total: "",
+    usd: null,
+    hasQuotes: false,
+    baseCurrency: "USD",
+    oldTotal: "",
+    reason: "recalculated"
+  });
+  const normalizeExchangeRate = useMemoizedFn((rate) => {
+    if (!rate) {
+      return null;
+    }
+    const value = Number(rate);
+    if (!Number.isFinite(value)) {
+      return null;
+    }
+    return value.toFixed(8);
+  });
+  const getExchangeRateFromSession = useMemoizedFn((sessionData) => {
+    if (!sessionData?.line_items?.length) {
+      return null;
+    }
+    for (const item of sessionData.line_items) {
+      const rate = item?.exchange_rate;
+      if (rate) {
+        return rate;
+      }
+    }
+    return null;
+  });
+  const quoteAutoRetryRef = useRef(false);
+  const lastRetryKeyRef = useRef("");
+  const buildRetryKey = useMemoizedFn((sessionData) => {
+    if (!sessionData?.line_items?.length) {
+      return "";
+    }
+    return sessionData.line_items.map((item) => {
+      const priceId = item.price_id || item.price?.id || "";
+      const quoteId = item?.quote_id || "";
+      const quotedAmount = item?.quoted_amount || "";
+      const exchangeRate = item?.exchange_rate || "";
+      return `${priceId}:${quoteId}:${quotedAmount}:${exchangeRate}`;
+    }).join("|");
+  });
+  const buildPriceUpdateSummary = useMemoizedFn((sessionData) => {
+    if (!paymentCurrency) {
+      return { total: "", usd: null, hasQuotes: false, baseCurrency: "USD", totalUnit: null };
+    }
+    const lineItems = sessionData.line_items || [];
+    let baseCurrency = "USD";
+    for (const item of lineItems) {
+      const price = item.upsell_price || item.price;
+      const base = price?.base_currency;
+      if (base) {
+        baseCurrency = base;
+        break;
+      }
+    }
+    const hasQuotes = lineItems.some((item) => item?.quoted_amount && item?.exchange_rate);
+    if (!hasQuotes) {
+      return { total: "", usd: null, hasQuotes: false, baseCurrency, totalUnit: null };
+    }
+    let trialInDays = Number(sessionData?.subscription_data?.trial_period_days || 0);
+    const trialCurrencyIds = (sessionData?.subscription_data?.trial_currency || "").split(",").map(trim).filter(Boolean);
+    if (trialCurrencyIds.length > 0 && paymentCurrencyId && trialCurrencyIds.includes(paymentCurrencyId) === false) {
+      trialInDays = 0;
+    }
+    const { total } = getCheckoutAmount(lineItems, paymentCurrency, trialInDays > 0);
+    const discountAmount = new BN(sessionData.total_details?.amount_discount || "0");
+    const totalUnit = new BN(total).sub(discountAmount);
+    const normalizedTotalUnit = totalUnit.isNeg() ? new BN(0) : totalUnit;
+    const totalDisplay = `${formatNumber(
+      fromUnitToToken(normalizedTotalUnit.toString(), paymentCurrency.decimal),
+      6
+    )} ${paymentCurrency.symbol}`;
+    const itemUsdReferences = lineItems.map((item) => {
+      const price = item.upsell_price || item.price;
+      const baseAmount = price?.base_amount;
+      const hasBaseAmount = baseAmount !== void 0 && baseAmount !== null;
+      if (hasBaseAmount) {
+        return getUsdAmountFromBaseAmount(baseAmount, item.quantity || 0);
+      }
+      const exchangeRate = item?.exchange_rate;
+      const quotedAmount = item?.quoted_amount;
+      if (!exchangeRate || !quotedAmount) {
+        return null;
+      }
+      return getUsdAmountFromTokenUnits(new BN(quotedAmount), paymentCurrency.decimal, exchangeRate);
+    });
+    const usdValues = itemUsdReferences.filter((value) => Boolean(value));
+    if (!usdValues.length) {
+      return { total: totalDisplay, usd: null, hasQuotes, baseCurrency, totalUnit: normalizedTotalUnit };
+    }
+    const sumUnit = usdValues.reduce((acc, value) => acc.add(new BN(fromTokenToUnit(value, 8))), new BN(0));
+    const totalUsdReference = fromUnitToToken(sumUnit.toString(), 8);
+    return {
+      total: totalDisplay,
+      usd: formatUsdAmount(totalUsdReference, locale),
+      hasQuotes,
+      baseCurrency,
+      totalUnit: normalizedTotalUnit
+    };
+  });
+  const compareTotals = useMemoizedFn((prevSession, nextSession) => {
+    const prev = buildPriceUpdateSummary(prevSession);
+    const next = buildPriceUpdateSummary(nextSession);
+    if (!prev.totalUnit || !next.totalUnit) {
+      return { changed: false, prev, next };
+    }
+    const diff = next.totalUnit.sub(prev.totalUnit).abs();
+    const epsilon = new BN(1);
+    return { changed: diff.gt(epsilon), prev, next };
+  });
+  const applyQuoteUpdate = useMemoizedFn(
+    (payload, options = {}) => {
+      if (!payload?.checkoutSession) {
+        return;
+      }
+      onQuoteUpdated?.({
+        checkoutSession: payload.checkoutSession,
+        quotes: payload.quotes,
+        rateUnavailable: payload.rateUnavailable,
+        rateError: payload.rateError
+      });
+      const { changed, prev, next } = compareTotals(checkoutSession, payload.checkoutSession);
+      const previousRate = normalizeExchangeRate(getExchangeRateFromSession(checkoutSession));
+      const nextRate = normalizeExchangeRate(getExchangeRateFromSession(payload.checkoutSession));
+      const rateChanged = !!(previousRate && nextRate && previousRate !== nextRate);
+      const shouldShowModal = (options.forceConfirm || changed) && next.hasQuotes;
+      if (shouldShowModal) {
+        setPriceUpdateInfo({
+          open: true,
+          total: next.total,
+          usd: next.usd,
+          hasQuotes: next.hasQuotes,
+          baseCurrency: next.baseCurrency,
+          oldTotal: prev.total,
+          reason: options.reason || (rateChanged ? "rateChanged" : "recalculated")
+        });
+        return;
+      }
+      setPriceUpdateInfo({ open: false });
+      const retryKey = buildRetryKey(payload.checkoutSession);
+      if (retryKey && retryKey !== lastRetryKeyRef.current) {
+        lastRetryKeyRef.current = retryKey;
+        quoteAutoRetryRef.current = true;
+      }
+    }
+  );
   const validateUserInfo = (values) => {
     if (!values) {
       return false;
@@ -350,6 +524,16 @@ export default function PaymentForm({
   const customerPhone = useWatch({ control, name: "customer_phone" });
   const billingAddress = useWatch({ control, name: "billing_address" });
   const showForm = session?.user ? state.showEditForm : false;
+  useEffect(() => {
+    if (!quoteAutoRetryRef.current) {
+      return;
+    }
+    if (state.submitting || state.paying) {
+      return;
+    }
+    quoteAutoRetryRef.current = false;
+    onAction();
+  }, [state.submitting, state.paying]);
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -407,7 +591,10 @@ export default function PaymentForm({
       }
     });
     try {
-      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`, {});
+      if (result.data.paymentIntent) {
+        onPaymentIntentUpdate?.(result.data.paymentIntent);
+      }
       if (result.data.fastPaid) {
         setState({
           fastCheckoutInfo: null,
@@ -424,6 +611,51 @@ export default function PaymentForm({
       }
     } catch (err) {
       console.error(err);
+      const errorCode = err?.response?.data?.code;
+      if ([
+        "QUOTE_LOCK_EXPIRED",
+        "QUOTE_AMOUNT_MISMATCH",
+        "QUOTE_EXPIRED_OR_USED",
+        "QUOTE_NOT_FOUND",
+        "QUOTE_REQUIRED"
+      ].includes(errorCode)) {
+        try {
+          const { data: refreshed } = await api.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+            params: { forceRefresh: "1" }
+          });
+          if (refreshed?.checkoutSession) {
+            applyQuoteUpdate(refreshed, { reason: "rateChanged" });
+            Toast.info(t("payment.checkout.quote.updated.pleaseRetry") || "Price updated, please resubmit");
+          }
+        } catch (refreshError) {
+          console.error(refreshError);
+          Toast.error(formatError(refreshError));
+        } finally {
+          setState({ fastCheckoutInfo: null });
+        }
+        return;
+      }
+      if (errorCode === "QUOTE_UPDATED") {
+        const payload = err?.response?.data;
+        if (payload?.checkoutSession) {
+          applyQuoteUpdate(payload);
+        }
+        setState({ fastCheckoutInfo: null });
+        return;
+      }
+      if (errorCode === "RATE_UNAVAILABLE") {
+        const payload = err?.response?.data;
+        if (payload?.checkoutSession) {
+          onQuoteUpdated?.({
+            checkoutSession: payload.checkoutSession,
+            quotes: payload.quotes,
+            rateUnavailable: payload.rateUnavailable,
+            rateError: payload.rateError
+          });
+        }
+        setState({ fastCheckoutInfo: null });
+        return;
+      }
       Toast.error(formatError(err));
       setState({
         fastCheckoutInfo: null
@@ -436,6 +668,23 @@ export default function PaymentForm({
   const handleCreditInsufficientClose = () => {
     setState({ creditInsufficientInfo: null });
   };
+  const handlePriceUpdateConfirm = () => {
+    setPriceUpdateInfo({ open: false });
+    quoteAutoRetryRef.current = true;
+  };
+  const handlePriceUpdateCancel = () => {
+    setPriceUpdateInfo({ open: false });
+  };
+  const handlePriceChangeConfirm = () => {
+    const formData = state.priceChangeConfirm?.formData;
+    setState({ priceChangeConfirm: null });
+    if (formData) {
+      onFormSubmit(formData);
+    }
+  };
+  const handlePriceChangeCancel = () => {
+    setState({ priceChangeConfirm: null });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -475,6 +724,9 @@ export default function PaymentForm({
     }
   };
   const onFormSubmit = async (data) => {
+    if (state.submitting) {
+      return;
+    }
     const userInfo = session.user;
     if (!userInfo.sourceAppPid) {
       const hasVendorConfig = checkoutSession.line_items?.some(
@@ -488,10 +740,18 @@ export default function PaymentForm({
     setState({ submitting: true });
     try {
       let result;
+      const previewRate = checkoutSession.line_items?.find((item) => item?.exchange_rate)?.exchange_rate || void 0;
+      const payload = {
+        ...data,
+        // Final Freeze: Include these for new quote creation at submit
+        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ""),
+        preview_rate: previewRate || void 0,
+        price_confirmed: state.priceChangeConfirm?.formData ? true : void 0
+      };
       if (isDonationMode) {
-        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, payload);
       } else {
-        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, payload);
       }
       setState({
         paymentIntent: result.data.paymentIntent,
@@ -500,7 +760,31 @@ export default function PaymentForm({
         submitting: false,
         customerLimited: false
       });
+      if (result.data.paymentIntent) {
+        onPaymentIntentUpdate?.(result.data.paymentIntent);
+      }
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
+        if (result.data.noPaymentRequired) {
+          try {
+            const confirmResult = await api.post(
+              `/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`,
+              {}
+            );
+            if (confirmResult.data.paymentIntent) {
+              onPaymentIntentUpdate?.(confirmResult.data.paymentIntent);
+            }
+            if (confirmResult.data.fastPaid || confirmResult.data.checkoutSession?.status === "complete") {
+              setState({ paying: true });
+              await handleConnected();
+            } else {
+              openConnect();
+            }
+          } catch (confirmErr) {
+            console.error("noPaymentRequired confirm failed", confirmErr);
+            openConnect();
+          }
+          return;
+        }
         if (paymentCurrency?.type === "credit") {
           if (result.data.creditSufficient === true) {
             setState({
@@ -547,13 +831,95 @@ export default function PaymentForm({
     } catch (err) {
       console.error(err);
       let shouldToast = true;
-      if (err.response?.data?.code) {
-        dispatch(`error.${err.response?.data?.code}`);
-        if (err.response?.data?.code === "UNIFIED_APP_REQUIRED") {
+      const errorCode = err.response?.data?.code;
+      if (errorCode) {
+        if (![
+          "QUOTE_UPDATED",
+          "RATE_UNAVAILABLE",
+          "QUOTE_LOCK_EXPIRED",
+          "QUOTE_AMOUNT_MISMATCH",
+          "QUOTE_EXPIRED_OR_USED",
+          "QUOTE_NOT_FOUND",
+          "QUOTE_REQUIRED",
+          "QUOTE_MAX_PAYABLE_EXCEEDED"
+        ].includes(errorCode)) {
+          dispatch(`error.${errorCode}`);
+        }
+        if ([
+          "QUOTE_LOCK_EXPIRED",
+          "QUOTE_AMOUNT_MISMATCH",
+          "QUOTE_EXPIRED_OR_USED",
+          "QUOTE_NOT_FOUND",
+          "QUOTE_REQUIRED",
+          "QUOTE_MAX_PAYABLE_EXCEEDED",
+          "quote_validation_failed"
+        ].includes(errorCode)) {
+          shouldToast = false;
+          try {
+            const { data: refreshed } = await api.get(`/api/checkout-sessions/retrieve/${checkoutSession.id}`, {
+              params: { forceRefresh: "1" }
+            });
+            if (refreshed?.checkoutSession) {
+              applyQuoteUpdate(refreshed, { reason: "rateChanged" });
+              Toast.info(t("payment.checkout.quote.updated.pleaseRetry") || "Price updated, please resubmit");
+            }
+          } catch (refreshError) {
+            console.error(refreshError);
+            Toast.error(formatError(refreshError));
+          }
+        }
+        if (errorCode === "QUOTE_UPDATED") {
+          shouldToast = false;
+          const payload = err.response?.data;
+          if (payload?.checkoutSession) {
+            applyQuoteUpdate(payload);
+          }
+        }
+        if (errorCode === "RATE_UNAVAILABLE") {
+          shouldToast = false;
+          const payload = err.response?.data;
+          if (payload?.checkoutSession) {
+            onQuoteUpdated?.({
+              checkoutSession: payload.checkoutSession,
+              quotes: payload.quotes,
+              rateUnavailable: payload.rateUnavailable,
+              rateError: payload.rateError
+            });
+          }
+        }
+        if (errorCode === "PRICE_UNAVAILABLE") {
+          shouldToast = false;
+          Toast.error(
+            t("payment.checkout.priceChange.unavailable", {
+              fallback: "Unable to fetch exchange rate. Please try again later."
+            })
+          );
+        }
+        if (errorCode === "PRICE_UNSTABLE") {
+          shouldToast = false;
+          Toast.error(
+            t("payment.checkout.priceChange.unstable", {
+              fallback: "Price is volatile. Please try again later."
+            })
+          );
+        }
+        if (errorCode === "PRICE_CHANGED") {
+          shouldToast = false;
+          const errorData = err.response?.data;
+          setState({
+            priceChangeConfirm: {
+              open: true,
+              changePercent: errorData?.change_percent || 0,
+              formData: data
+              // Save form data for retry
+            }
+          });
+        }
+        if (errorCode === "UNIFIED_APP_REQUIRED") {
           shouldToast = false;
           Toast.error(t("payment.checkout.vendor.accountRequired"));
         }
-        if (err.response.data.code === "CUSTOMER_LIMITED") {
+        if (errorCode === "CUSTOMER_LIMITED") {
           shouldToast = false;
           setState({ customerLimited: true });
         }
@@ -572,7 +938,7 @@ export default function PaymentForm({
     setState({ submitting: false });
   };
   const onAction = () => {
-    if (state.submitting || state.paying) {
+    if (state.submitting || state.paying || !canPay) {
       return;
     }
     if (errorRef.current && !isEmpty(errors) && isMobile) {
@@ -610,7 +976,7 @@ export default function PaymentForm({
   };
   useEffect(() => {
     const handleKeyDown = (e) => {
-      if (e.key === "Enter" && !state.submitting && !state.paying && !state.stripePaying && quantityInventoryStatus && payable) {
+      if (e.key === "Enter" && !state.submitting && !state.paying && !state.stripePaying && quantityInventoryStatus && canPay) {
         onAction();
       }
     };
@@ -618,7 +984,7 @@ export default function PaymentForm({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, canPay]);
   const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || "");
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */ jsx(
     ConfirmDialog,
@@ -627,7 +993,7 @@ export default function PaymentForm({
       onCancel: handleFastCheckoutCancel,
       title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
       message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
-        available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+        available: `${formatAmount(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18)} ${paymentCurrency?.symbol}`
       }) }) : /* @__PURE__ */ jsxs(Stack, { children: [
         /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
         /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
@@ -690,7 +1056,7 @@ export default function PaymentForm({
                   }
                 ),
                 /* @__PURE__ */ jsxs(Typography, { children: [
-                  fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(),
+                  formatAmount(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18),
                   " ",
                   paymentCurrency?.symbol
                 ] })
@@ -713,6 +1079,33 @@ export default function PaymentForm({
       confirm: t("common.confirm")
     }
   );
+  const PriceUpdatedDialog = priceUpdateInfo.open && /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      onConfirm: handlePriceUpdateConfirm,
+      onCancel: handlePriceUpdateCancel,
+      title: t("payment.checkout.quote.priceUpdatedTitle"),
+      message: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsx(Typography, { children: t(
+          priceUpdateInfo.reason === "rateChanged" ? "payment.checkout.quote.priceUpdatedDescriptionRate" : "payment.checkout.quote.priceUpdatedDescriptionRecalc"
+        ) }),
+        priceUpdateInfo.hasQuotes && /* @__PURE__ */ jsxs(Stack, { spacing: 0.25, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: "0.7875rem" }, children: t("payment.checkout.quote.priceUpdatedNewTotalLabel") }),
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600 }, children: priceUpdateInfo.total }),
+          priceUpdateInfo.usd && /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.secondary" }, children: [
+            "\u2248 ",
+            priceUpdateInfo.usd,
+            " ",
+            priceUpdateInfo.baseCurrency
+          ] }),
+          priceUpdateInfo.oldTotal && /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: "0.75rem" }, children: t("payment.checkout.quote.priceUpdatedOldTotal", { total: priceUpdateInfo.oldTotal }) })
+        ] })
+      ] }),
+      confirm: t("payment.checkout.quote.priceUpdatedConfirm"),
+      cancel: t("common.cancel"),
+      color: "primary"
+    }
+  );
   const getRedirectUrl = () => {
     if (searchParams.redirect) {
       return decodeURIComponent(searchParams.redirect);
@@ -735,13 +1128,13 @@ export default function PaymentForm({
           size: "large",
           className: "cko-submit-button",
           onClick: () => {
-            if (state.submitting || state.paying) {
+            if (state.submitting || state.paying || !canPay) {
               return;
             }
             onAction();
           },
           fullWidth: true,
-          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          disabled: state.stripePaying || !quantityInventoryStatus || !canPay,
           children: [
             (state.submitting || state.paying) && /* @__PURE__ */ jsx(CircularProgress, { size: 16, sx: { mr: 0.5, color: "primary.contrastText" } }),
             state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
@@ -778,7 +1171,18 @@ export default function PaymentForm({
         }
       ),
       FastCheckoutConfirmDialog,
-      CreditInsufficientDialog
+      CreditInsufficientDialog,
+      PriceUpdatedDialog,
+      state.priceChangeConfirm?.open && /* @__PURE__ */ jsx(
+        PriceChangeConfirm,
+        {
+          open: true,
+          changePercent: state.priceChangeConfirm.changePercent,
+          onConfirm: handlePriceChangeConfirm,
+          onCancel: handlePriceChangeCancel,
+          loading: state.submitting
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -819,10 +1223,27 @@ export default function PaymentForm({
                   {
                     value: field.value,
                     currencies,
-                    onChange: (id, methodId) => {
+                    onChange: async (id, methodId) => {
+                      const oldCurrencyId = field.value;
                       field.onChange(id);
                       setValue("payment_method", methodId);
                       saveCurrencyPreference(id, session?.user?.did);
+                      if (oldCurrencyId && oldCurrencyId !== id) {
+                        try {
+                          const { data } = await api.put(
+                            `/api/checkout-sessions/${checkoutSession.id}/switch-currency`,
+                            {
+                              currency_id: id,
+                              payment_method_id: methodId
+                            }
+                          );
+                          if (data.currency_changed && onQuoteUpdated) {
+                            onQuoteUpdated({ checkoutSession: data, quotes: data.quotes });
+                          }
+                        } catch (err) {
+                          console.error("Failed to switch currency:", err);
+                        }
+                      }
                     }
                   }
                 )
@@ -978,7 +1399,7 @@ export default function PaymentForm({
           },
           fullWidth: true,
           loading: state.submitting || state.paying,
-          disabled: state.stripePaying || !quantityInventoryStatus || !payable,
+          disabled: state.stripePaying || !quantityInventoryStatus || !canPay,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ) }),
@@ -1015,6 +1436,17 @@ export default function PaymentForm({
       }
     ),
     FastCheckoutConfirmDialog,
-    CreditInsufficientDialog
+    CreditInsufficientDialog,
+    PriceUpdatedDialog,
+    state.priceChangeConfirm?.open && /* @__PURE__ */ jsx(
+      PriceChangeConfirm,
+      {
+        open: true,
+        changePercent: state.priceChangeConfirm.changePercent,
+        onConfirm: handlePriceChangeConfirm,
+        onCancel: handlePriceChangeCancel,
+        loading: state.submitting
+      }
+    )
   ] });
 }

package/es/payment/index.d.ts

@@ -6,7 +6,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     error?: any;
     showCheckoutSummary?: boolean;
 };
-export default function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
+export default function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, quotes, rateUnavailable, rateError, }: Props): import("react").JSX.Element;
 type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 } & BoxProps;