@asteby/storefront-react 0.16.1 → 0.18.0

package/dist/payments.cjs

@@ -193,6 +193,13 @@ function mercadoPagoBricksAdapter(options = {}) {
           const device = getDevice();
           return { provider_data, ...typeof device === "string" && device ? { device_session_id: device } : {} };
         },
+        async update(next) {
+          if (gone) throw new Error("payment form is unmounted");
+          if (typeof controller.update !== "function") throw new Error("payment form: update not supported");
+          const value = Number.parseFloat(next.amount.amount);
+          if (!Number.isFinite(value) || value <= 0) throw new Error("payment form: invalid amount");
+          await controller.update({ amount: value });
+        },
         async unmount() {
           gone = true;
           try {
@@ -204,6 +211,341 @@ function mercadoPagoBricksAdapter(options = {}) {
     }
   };
 }
+
+// src/payments/mount-queue.ts
+var PaymentMountCancelled = class extends Error {
+  name = "PaymentMountCancelled";
+  constructor(message = "payment form: mount cancelled") {
+    super(message);
+  }
+};
+var PaymentMountTimeout = class extends Error {
+  name = "PaymentMountTimeout";
+  constructor(ms) {
+    super(`payment form: create timeout after ${ms}ms`);
+  }
+};
+var chains = /* @__PURE__ */ new WeakMap();
+var seq = 0;
+function withTimeout(p, ms) {
+  return new Promise((resolve, reject) => {
+    const t = setTimeout(() => reject(new PaymentMountTimeout(ms)), ms);
+    p.then(
+      (v) => {
+        clearTimeout(t);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(t);
+        reject(e);
+      }
+    );
+  });
+}
+async function mountQueued(base, opts, queue = {}) {
+  const container = opts.container;
+  const createTimeoutMs = queue.createTimeoutMs ?? 1e4;
+  let chain = chains.get(container);
+  if (!chain) {
+    chain = { tail: Promise.resolve(), active: null, ticket: 0 };
+    chains.set(container, chain);
+  }
+  const me = chain;
+  let release;
+  const done = new Promise((r) => release = r);
+  const previous = me.tail;
+  const ticket = ++me.ticket;
+  me.tail = done;
+  let released = false;
+  const finish = () => {
+    if (!released) {
+      released = true;
+      release();
+    }
+  };
+  const cancelled = () => opts.signal?.aborted === true || !container.isConnected || me.ticket !== ticket;
+  let slot = null;
+  try {
+    if (me.active) await me.active.teardown();
+    await previous;
+    if (cancelled()) throw new PaymentMountCancelled();
+    slot = container.ownerDocument.createElement("div");
+    slot.id = `${container.id || "sf-pay"}-m${++seq}`;
+    container.replaceChildren(slot);
+    const node = slot;
+    const pending2 = base.mount({ ...opts, container: node });
+    let handle;
+    try {
+      handle = await withTimeout(pending2, createTimeoutMs);
+    } catch (err) {
+      void pending2.then((h) => Promise.resolve(h.unmount()).catch(() => {
+      }), () => {
+      });
+      throw err;
+    }
+    let torn = null;
+    const teardown = () => torn ??= (async () => {
+      try {
+        await handle.unmount();
+      } catch {
+      }
+      node.remove();
+      if (me.active === entry) me.active = null;
+      finish();
+    })();
+    const entry = { teardown };
+    me.active = entry;
+    if (cancelled() || !node.isConnected) {
+      await teardown();
+      throw new PaymentMountCancelled();
+    }
+    return {
+      collect: () => handle.collect(),
+      ...handle.update ? { update: (next) => handle.update(next) } : {},
+      unmount: teardown
+    };
+  } catch (err) {
+    slot?.remove();
+    finish();
+    throw err;
+  }
+}
+function withMountQueue(adapter, queue = {}) {
+  return { kind: adapter.kind, load: (client, options) => adapter.load(client, options), mount: (opts) => mountQueued(adapter, opts, queue) };
+}
+
+// src/payments/adapter.ts
+var PaymentHttpError = class extends Error {
+  constructor(status, code, message, details, extra) {
+    super(message ?? code);
+    this.status = status;
+    this.code = code;
+    this.details = details;
+    this.retryable = extra?.retryable;
+    this.kind = extra?.kind;
+  }
+  status;
+  code;
+  details;
+  name = "PaymentHttpError";
+  /** `error.retryable` of the shop body: `true` repeat with the SAME key; `false` it is an answer. `undefined`: not said. */
+  retryable;
+  /** `error.kind` of the shop body (`classifyPaymentError`). */
+  kind;
+};
+async function parse(res) {
+  const text = await res.text();
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+function createFetchTransport(url, options = {}) {
+  const doFetch = (u, init) => (options.fetch ?? globalThis.fetch.bind(globalThis))(u, init);
+  async function call(u, init) {
+    const res = await doFetch(u, { credentials: options.credentials ?? "same-origin", ...init });
+    const body = await parse(res);
+    if (!res.ok) {
+      const e = body?.error;
+      throw new PaymentHttpError(res.status, e?.code ?? "server_error", e?.message, e?.details, {
+        retryable: typeof e?.retryable === "boolean" ? e.retryable : void 0,
+        kind: typeof e?.kind === "string" ? e.kind : void 0
+      });
+    }
+    const result = body;
+    if (!result || typeof result !== "object" || !result.payment || typeof result.payment.status !== "string") {
+      throw new PaymentHttpError(502, "invalid_response", "Unexpected payment response");
+    }
+    return result;
+  }
+  return {
+    submit: (request, { signal }) => call(url, {
+      method: "POST",
+      signal,
+      headers: { "Content-Type": "application/json", Accept: "application/json", "Idempotency-Key": request.idempotencyKey, ...options.headers },
+      body: JSON.stringify(options.buildBody ? options.buildBody(request) : request)
+    }),
+    ...options.refreshUrl ? {
+      refresh: ({ signal }) => call(options.refreshUrl, { method: "POST", signal, headers: { Accept: "application/json", ...options.headers } })
+    } : {}
+  };
+}
+
+// src/payments/recovery-messages.ts
+var ES = {
+  "error.transient": "Estamos verificando tu pago. Si el cargo se hizo, lo veremos aqu\xED; no te cobraremos dos veces.",
+  "error.in_progress": "Ya hay un pago en proceso para este pedido. Estamos verific\xE1ndolo; no vuelvas a pagar.",
+  "error.rate_limited": "Hiciste varios intentos seguidos. Espera unos minutos e int\xE9ntalo de nuevo.",
+  "error.merchant_config": "Por ahora no podemos procesar pagos con tarjeta. No es un problema con tu tarjeta: puedes pagar de otra forma.",
+  "error.provider_declined": "No pudimos procesar tu pago con esa tarjeta. Revisa los datos o prueba con otro m\xE9todo; no se hizo ning\xFAn cobro.",
+  "error.stale_checkout": "Este pedido ya qued\xF3 registrado y no se pudo reabrir el pago. Actualiza para ver c\xF3mo va tu pedido.",
+  "error.expired": "Tu carrito venci\xF3. Vuelve a armarlo para pagar.",
+  "error.price_mismatch": "El total cambi\xF3. Revisa el nuevo total y vuelve a pagar.",
+  "error.store_closed": "Esta tienda a\xFAn no est\xE1 abierta para compras. Vuelve pronto.",
+  "error.validation": "Completa los campos marcados.",
+  "error.other": "No pudimos procesar tu pago. Intenta de nuevo.",
+  "notice.confirming.title": "Estamos confirmando tu pago\u2026",
+  "notice.confirming.body": "No cierres esta p\xE1gina ni vuelvas a pagar. Si el cargo ya se hizo, lo ver\xE1s reflejado aqu\xED.",
+  "notice.form_failed.title": "No pudimos cargar el formulario de tarjeta",
+  "notice.form_failed.body": "Suele resolverse al intentar de nuevo. Tambi\xE9n puedes pagar de otra forma.",
+  "notice.rejected.title": "El cargo no se complet\xF3",
+  "notice.rejected.body": "No se hizo ning\xFAn cobro. Puedes intentar con otra tarjeta o elegir otra forma de pago.",
+  "notice.provider_declined.title": "No pudimos procesar tu pago con esa tarjeta",
+  "notice.provider_declined.body": "No se hizo ning\xFAn cobro. Revisa los datos o prueba con otra tarjeta u otro m\xE9todo de pago.",
+  "notice.merchant_config.title": "Por ahora no podemos cobrar con tarjeta",
+  "notice.merchant_config.body": "No es un problema con tu tarjeta: es un tema de nuestro lado. Puedes pagar de otra forma.",
+  "notice.stale_checkout.title": "Tu pedido ya qued\xF3 registrado",
+  "notice.stale_checkout.body": "No pudimos reabrir el pago de este pedido. Actualiza para ver c\xF3mo va tu pedido; no se cobr\xF3 de nuevo.",
+  "notice.other.title": "No pudimos procesar tu pago",
+  "notice.other.body": "Intenta de nuevo; si sigue igual, puedes pagar de otra forma.",
+  "action.retry": "Reintentar pago",
+  "action.retry_form": "Reintentar",
+  "action.refresh": "Actualizar mi pedido",
+  "action.alternative": "Pagar con {label}"
+};
+var EN = {
+  "error.transient": "We're verifying your payment. If the charge went through we'll show it here; you won't be charged twice.",
+  "error.in_progress": "A payment is already in progress for this order. We're verifying it; don't pay again.",
+  "error.rate_limited": "Too many attempts in a row. Wait a few minutes and try again.",
+  "error.merchant_config": "We can't take card payments right now. It isn't a problem with your card: you can pay another way.",
+  "error.provider_declined": "We couldn't process your payment with that card. Check the details or try another method; you were not charged.",
+  "error.stale_checkout": "This order is already registered and the payment couldn't be reopened. Refresh to see how it's going.",
+  "error.expired": "Your cart expired. Rebuild it to pay.",
+  "error.price_mismatch": "The total changed. Check the new total and pay again.",
+  "error.store_closed": "This store isn't open for purchases yet. Come back soon.",
+  "error.validation": "Complete the marked fields.",
+  "error.other": "We couldn't process your payment. Try again.",
+  "notice.confirming.title": "We're confirming your payment\u2026",
+  "notice.confirming.body": "Don't close this page or pay again. If the charge already went through you'll see it here.",
+  "notice.form_failed.title": "We couldn't load the card form",
+  "notice.form_failed.body": "Trying again usually fixes it. You can also pay another way.",
+  "notice.rejected.title": "The charge didn't go through",
+  "notice.rejected.body": "You were not charged. Try another card or choose another way to pay.",
+  "notice.provider_declined.title": "We couldn't process your payment with that card",
+  "notice.provider_declined.body": "You were not charged. Check the details or try another card or method.",
+  "notice.merchant_config.title": "We can't charge cards right now",
+  "notice.merchant_config.body": "It isn't a problem with your card: it's on our side. You can pay another way.",
+  "notice.stale_checkout.title": "Your order is already registered",
+  "notice.stale_checkout.body": "We couldn't reopen the payment for this order. Refresh to see how it's going; you were not charged again.",
+  "notice.other.title": "We couldn't process your payment",
+  "notice.other.body": "Try again; if it keeps failing you can pay another way.",
+  "action.retry": "Retry payment",
+  "action.retry_form": "Retry",
+  "action.refresh": "Refresh my order",
+  "action.alternative": "Pay with {label}"
+};
+function paymentRecoveryMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
+  return overrides ? { ...base, ...overrides } : base;
+}
+
+// src/payments/resilient-transport.ts
+var realSleep = (ms) => new Promise((r) => setTimeout(r, ms));
+function isResolvedAttempt(result) {
+  const p = result.payment;
+  if (p.status === "paid" || p.status === "failed" || p.status === "expired" || p.status === "cancelled") return true;
+  const type = p.action?.type;
+  return type === "voucher" || type === "challenge" || type === "redirect";
+}
+async function readJson(res) {
+  const text = await res.text().catch(() => "");
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+function createResilientTransport(opts) {
+  const doFetch = opts.fetch ?? ((u, i) => globalThis.fetch(u, i));
+  const sleep2 = opts.sleep ?? realSleep;
+  const retries = opts.retries ?? 2;
+  const backoff = opts.backoffMs ?? [800, 2e3];
+  const polls = opts.statusPolls ?? 3;
+  const pollMs = opts.statusPollMs ?? 2e3;
+  const msgs = paymentRecoveryMessages(opts.locale, opts.messages);
+  const text = (k) => msgs[`error.${k}`];
+  const issue = (i) => opts.onIssue?.(i);
+  const confirming = msgs["notice.confirming.title"];
+  async function call(url, init) {
+    let res;
+    try {
+      res = await doFetch(url, { credentials: "same-origin", ...init, headers: { ...opts.headers, ...init.headers } });
+    } catch (err) {
+      if (err?.name === "AbortError") throw err;
+      return { fail: { kind: "transient", status: 0, code: "network", message: text("transient"), retryable: true } };
+    }
+    const body = await readJson(res);
+    if (res.ok) {
+      const r = body;
+      if (r && typeof r === "object" && r.payment && typeof r.payment.status === "string") return { ok: r };
+      return { fail: { kind: "transient", status: 502, code: "invalid_response", message: text("transient"), retryable: true } };
+    }
+    const e = body?.error;
+    if (!e) {
+      const info2 = storefront.classifyPaymentError({ status: res.status >= 500 || res.status === 0 ? 503 : res.status });
+      return { fail: { kind: info2.kind, status: res.status, code: "server_error", message: text(info2.kind), retryable: info2.retryable } };
+    }
+    const byCode = storefront.classifyPaymentError({ status: res.status, code: e.code ?? null, field: e.field ?? null, retryable: typeof e.retryable === "boolean" ? e.retryable : null, checkoutId: e.checkout_id ?? null, details: e.details });
+    const info = e.kind && !(e.kind === "transient" && !byCode.retryable) ? { kind: e.kind, retryable: e.retryable === true || byCode.retryable } : byCode;
+    return { fail: { kind: info.kind, status: res.status, code: e.code ?? "server_error", message: e.message || text(info.kind), retryable: info.retryable, details: e.details } };
+  }
+  const toError = (f) => f.kind === "transient" ? new PaymentHttpError(503, "network", f.message, f.details, { retryable: true, kind: "transient" }) : new PaymentHttpError(f.status || 500, f.code, f.message, f.details, { retryable: f.retryable, kind: f.kind });
+  async function resolveByStatus(signal) {
+    for (let i = 0; i < polls; i++) {
+      const r = await call(opts.statusUrl, { method: "POST", signal, headers: { Accept: "application/json" } });
+      if ("ok" in r) {
+        if (isResolvedAttempt(r.ok)) return r.ok;
+      } else if (!r.fail.retryable) {
+        return null;
+      }
+      if (i < polls - 1) await sleep2(pollMs);
+    }
+    return null;
+  }
+  return {
+    async submit(request, { signal }) {
+      const init = {
+        method: "POST",
+        signal,
+        headers: { "Content-Type": "application/json", Accept: "application/json", "Idempotency-Key": request.idempotencyKey },
+        body: JSON.stringify({ ...request, fields: opts.fields() })
+      };
+      issue(null);
+      let last = null;
+      for (let n = 0; n <= retries; n++) {
+        const r = await call(opts.payUrl, init);
+        if ("ok" in r) {
+          issue(null);
+          return r.ok;
+        }
+        last = r.fail;
+        const waitable = last.retryable && (last.kind === "transient" || last.kind === "in_progress");
+        if (!waitable || n === retries) break;
+        issue({ kind: "confirming", message: confirming });
+        await sleep2(backoff[Math.min(n, backoff.length - 1)] ?? 800);
+      }
+      const failure = last;
+      if (failure.retryable && (failure.kind === "transient" || failure.kind === "in_progress") || failure.kind === "stale_checkout") {
+        issue({ kind: "verifying", message: confirming });
+        const resolved = await resolveByStatus(signal);
+        if (resolved) {
+          issue(null);
+          return resolved;
+        }
+      }
+      issue({ kind: failure.kind, message: failure.message, retryable: failure.retryable, status: failure.status, code: failure.code });
+      throw toError(failure);
+    },
+    refresh: async ({ signal }) => {
+      const r = await call(opts.statusUrl, { method: "POST", signal, headers: { Accept: "application/json" } });
+      if ("ok" in r) return r.ok;
+      throw toError(r.fail);
+    }
+  };
+}
 function isSafeCssValue(value) {
   if (!value || value.length > 200) return false;
   if (/[;{}<>\\]/.test(value)) return false;
@@ -279,7 +621,9 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
+    verifyTimeoutMs = 12e4,
+    verifyIntervalMs = 2e3,
     scope = "default"
   } = options;
   const msgs = react.useMemo(() => storefront.paymentMessages(locale, options.messages), [locale, options.messages]);
@@ -293,15 +637,28 @@ function useEmbeddedPayment(options) {
   const [attemptId, setAttemptId] = react.useState(null);
   const [container, setContainer] = react.useState(null);
   const [mountKey, setMountKey] = react.useState(0);
+  const [verifying, setVerifying] = react.useState(false);
   const live = react.useRef({ ...options, msgs });
   live.current = { ...options, msgs };
   const form = react.useRef(null);
   const inFlight = react.useRef(null);
   const pendingData = react.useRef(null);
+  const memAttempt = react.useRef(null);
+  const memOnly = react.useRef(false);
+  const errorRef = react.useRef(null);
+  const retryRef = react.useRef(() => Promise.resolve());
   const alive = react.useRef(true);
   const generation = react.useRef(0);
   const statusRef = react.useRef("idle");
+  const leftChallenge = react.useRef(false);
   statusRef.current = status;
+  errorRef.current = error;
+  const amountKey = `${amount.amount}|${amount.currency_code}`;
+  const amountKeyRef = react.useRef(amountKey);
+  amountKeyRef.current = amountKey;
+  const appliedAmount = react.useRef(null);
+  const updating = react.useRef(null);
+  const remountRequested = react.useRef(false);
   react.useEffect(() => {
     alive.current = true;
     return () => {
@@ -312,19 +669,33 @@ function useEmbeddedPayment(options) {
   const store = options.storage === void 0 ? safeStorage() : options.storage;
   const emit = react.useCallback((e) => live.current.onEvent?.(e), []);
   const readAttempt = react.useCallback(() => {
-    try {
-      const saved = store?.getItem(storageKey);
-      if (saved) return saved;
-    } catch {
+    if (!memOnly.current) {
+      try {
+        const saved = store?.getItem(storageKey);
+        if (saved) {
+          memAttempt.current = saved;
+          return saved;
+        }
+      } catch {
+        memOnly.current = true;
+      }
+    }
+    if (memOnly.current && memAttempt.current) return memAttempt.current;
+    if (!store) {
+      if (memAttempt.current) return memAttempt.current;
     }
     const fresh = (live.current.newAttemptId ?? storefront.generateIdempotencyKey)();
+    memAttempt.current = fresh;
     try {
       store?.setItem(storageKey, fresh);
+      if (store && store.getItem(storageKey) !== fresh) memOnly.current = true;
     } catch {
+      memOnly.current = true;
     }
     return fresh;
   }, [store, storageKey]);
   const rotateAttempt = react.useCallback(() => {
+    memAttempt.current = null;
     try {
       store?.removeItem(storageKey);
     } catch {
@@ -340,7 +711,32 @@ function useEmbeddedPayment(options) {
     },
     [emit]
   );
-  const amountKey = `${amount.amount}|${amount.currency_code}`;
+  const syncAmount = react.useCallback(() => {
+    const m = form.current;
+    if (!m || inFlight.current || updating.current || remountRequested.current) return;
+    if (statusRef.current === "network_error" || statusRef.current === "blocked" && errorRef.current?.kind === "payment_in_progress") return;
+    if (appliedAmount.current === amountKeyRef.current) return;
+    const run = (async () => {
+      while (form.current === m && alive.current && appliedAmount.current !== amountKeyRef.current) {
+        const key = amountKeyRef.current;
+        try {
+          if (!m.update) throw new Error("payment form: update not supported");
+          await m.update({ amount: live.current.amount });
+          appliedAmount.current = key;
+        } catch {
+          if (form.current === m && alive.current) {
+            remountRequested.current = true;
+            setMountKey((k) => k + 1);
+          }
+          return;
+        }
+      }
+    })().finally(() => {
+      updating.current = null;
+      if (alive.current) syncAmount();
+    });
+    updating.current = run;
+  }, []);
   const kind = client?.kind;
   const publicKey = client?.public_key;
   react.useEffect(() => {
@@ -354,18 +750,22 @@ function useEmbeddedPayment(options) {
       return;
     }
     if (!container) return;
+    remountRequested.current = false;
     const my = ++generation.current;
     const started = Date.now();
+    const abort = new AbortController();
     let mounted = null;
     setStatus("loading");
     const stale = () => my !== generation.current || !alive.current;
     const fail = (reason) => {
       if (stale()) return;
       generation.current++;
+      abort.abort();
       clearTimeout(timer);
       const m = mounted ?? form.current;
       mounted = null;
       form.current = null;
+      appliedAmount.current = null;
       if (m) void Promise.resolve(m.unmount());
       fallback(reason);
     };
@@ -379,31 +779,39 @@ function useEmbeddedPayment(options) {
         if (stale()) return;
         const theme = live.current.theme ?? readPaymentTheme(container);
         const colorScheme = live.current.colorScheme ?? readPaymentScheme(container);
-        const m = await adapter.mount({
-          container,
-          client,
-          amount: live.current.amount,
-          ...live.current.email ? { email: live.current.email } : {},
-          ...live.current.locale ? { locale: live.current.locale } : {},
-          theme,
-          ...colorScheme ? { colorScheme } : {},
-          onReady: () => {
-            if (stale()) return;
-            clearTimeout(timer);
-            setStatus((s) => s === "loading" ? "ready" : s);
-            emit({ type: "form_ready", ms: Date.now() - started });
+        const createdWith = amountKeyRef.current;
+        const m = await mountQueued(
+          adapter,
+          {
+            container,
+            client,
+            amount: live.current.amount,
+            ...live.current.email ? { email: live.current.email } : {},
+            ...live.current.locale ? { locale: live.current.locale } : {},
+            theme,
+            ...colorScheme ? { colorScheme } : {},
+            signal: abort.signal,
+            onReady: () => {
+              if (stale()) return;
+              clearTimeout(timer);
+              setStatus((s) => s === "loading" ? "ready" : s);
+              emit({ type: "form_ready", ms: Date.now() - started });
+            },
+            onError: (e) => {
+              if (stale()) return;
+              if (e.critical) fail("form_error");
+            }
           },
-          onError: (e) => {
-            if (stale()) return;
-            if (e.critical) fail("form_error");
-          }
-        });
+          { createTimeoutMs: live.current.createTimeoutMs ?? sdkTimeoutMs }
+        );
         if (stale()) {
           void Promise.resolve(m.unmount());
           return;
         }
         mounted = m;
         form.current = m;
+        appliedAmount.current = createdWith;
+        syncAmount();
       } catch (err) {
         fail(err instanceof Error && /timeout/i.test(err.message) ? "sdk_timeout" : "sdk_error");
       }
@@ -411,16 +819,22 @@ function useEmbeddedPayment(options) {
     return () => {
       clearTimeout(timer);
       generation.current++;
+      abort.abort();
       const m = mounted ?? form.current;
       mounted = null;
       form.current = null;
+      appliedAmount.current = null;
       if (m) void Promise.resolve(m.unmount());
     };
-  }, [enabled, container, kind, publicKey, amountKey, mountKey, sdkTimeoutMs, containerId]);
+  }, [enabled, container, kind, publicKey, mountKey, sdkTimeoutMs, containerId]);
+  react.useEffect(() => {
+    syncAmount();
+  }, [amountKey, syncAmount]);
   const finish = react.useCallback(
     (result) => {
       const o = storefront.paymentOutcome(result, live.current.locale, live.current.messages);
       pendingData.current = null;
+      leftChallenge.current = false;
       setOutcome(o);
       setError(null);
       setAttemptsLeft(o.attempts_left);
@@ -440,7 +854,7 @@ function useEmbeddedPayment(options) {
     [emit, rotateAttempt]
   );
   const send = react.useCallback(
-    async (data, attempt) => {
+    async (data, attempt, total) => {
       const ctl = new AbortController();
       const maxRetries = live.current.autoRetries ?? autoRetries;
       for (let n = 0; ; n++) {
@@ -452,7 +866,7 @@ function useEmbeddedPayment(options) {
               idempotencyKey: attempt,
               provider_data: data.provider_data,
               ...data.device_session_id ? { device_session_id: data.device_session_id } : {},
-              expected_total: live.current.amount
+              expected_total: total
             },
             { signal: ctl.signal }
           );
@@ -470,7 +884,7 @@ function useEmbeddedPayment(options) {
           emit({ type: "error", kind: view.kind });
           setError(view);
           if (view.kind === "network") {
-            pendingData.current = data;
+            pendingData.current = { data, total };
             setStatus("network_error");
           } else if (view.kind === "price_mismatch") {
             pendingData.current = null;
@@ -496,7 +910,11 @@ function useEmbeddedPayment(options) {
     if (inFlight.current) return inFlight.current;
     const m = form.current;
     if (!m || statusRef.current !== "ready" && statusRef.current !== "network_error") return Promise.resolve();
+    if (statusRef.current === "network_error" && pendingData.current) return retryRef.current();
+    const total = live.current.amount;
     const run = (async () => {
+      if (updating.current) await updating.current.catch(() => {
+      });
       setStatus("processing");
       setError(null);
       setOutcome(null);
@@ -512,30 +930,33 @@ function useEmbeddedPayment(options) {
       }
       const attempt = readAttempt();
       setAttemptId(attempt);
-      await send(data, attempt);
+      await send(data, attempt, total);
     })().finally(() => {
       inFlight.current = null;
+      syncAmount();
     });
     inFlight.current = run;
     return run;
-  }, [emit, readAttempt, send]);
+  }, [emit, readAttempt, send, syncAmount]);
   const retry = react.useCallback(() => {
     if (inFlight.current) return inFlight.current;
-    const data = pendingData.current;
-    if (!data) return submit();
+    const pending2 = pendingData.current;
+    if (!pending2) return submit();
     emit({ type: "retry" });
     const run = (async () => {
       setStatus("processing");
       setError(null);
       const attempt = readAttempt();
       setAttemptId(attempt);
-      await send(data, attempt);
+      await send(pending2.data, attempt, pending2.total);
     })().finally(() => {
       inFlight.current = null;
+      syncAmount();
     });
     inFlight.current = run;
     return run;
-  }, [emit, readAttempt, send, submit]);
+  }, [emit, readAttempt, send, submit, syncAmount]);
+  retryRef.current = retry;
   react.useEffect(() => {
     if (status !== "challenge" && status !== "in_review" || !transport.refresh) return;
     let stop = false;
@@ -548,6 +969,7 @@ function useEmbeddedPayment(options) {
         try {
           const r = await transport.refresh({ signal: ctl.signal });
           if (stop || !alive.current) return;
+          if (r.payment.status === "none") continue;
           const o = storefront.paymentOutcome(r, live.current.locale, live.current.messages);
           if (o.kind !== status) {
             finish(r);
@@ -562,10 +984,57 @@ function useEmbeddedPayment(options) {
       ctl.abort();
     };
   }, [status, transport, pollIntervalMs, pollTimeoutMs, finish]);
+  const unknownOutcome = status === "network_error" || status === "blocked" && error?.kind === "payment_in_progress";
+  react.useEffect(() => {
+    if (!unknownOutcome) syncAmount();
+  }, [unknownOutcome, syncAmount]);
+  react.useEffect(() => {
+    if (!unknownOutcome || !transport.refresh) {
+      setVerifying(false);
+      return;
+    }
+    let stop = false;
+    const ctl = new AbortController();
+    const until = Date.now() + (leftChallenge.current ? Math.max(verifyTimeoutMs, pollTimeoutMs) : verifyTimeoutMs);
+    setVerifying(true);
+    (async () => {
+      let wait = verifyIntervalMs;
+      while (!stop && Date.now() < until) {
+        await sleep(wait);
+        wait = Math.min(wait * 2, 15e3);
+        if (stop || !alive.current) return;
+        try {
+          const r = await transport.refresh({ signal: ctl.signal });
+          if (stop || !alive.current) return;
+          if (isResolvedAttempt(r)) {
+            const settled = r.payment.status === "paid" || r.payment.status === "failed" || r.payment.status === "expired" || r.payment.status === "cancelled";
+            if (leftChallenge.current && !settled && r.payment.action?.type === "challenge") continue;
+            setVerifying(false);
+            finish(r);
+            return;
+          }
+        } catch {
+        }
+      }
+      if (!stop && alive.current) setVerifying(false);
+    })();
+    return () => {
+      stop = true;
+      ctl.abort();
+      setVerifying(false);
+    };
+  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, pollTimeoutMs, finish]);
   const dismiss = react.useCallback(() => {
     setError(null);
     setOutcome((o) => o?.kind === "rejected" ? null : o);
   }, []);
+  const cancelChallenge = react.useCallback(() => {
+    if (statusRef.current !== "challenge") return;
+    leftChallenge.current = true;
+    setOutcome(null);
+    setError({ kind: "payment_in_progress", message: live.current.msgs["challenge.left"], retrySameAttempt: false, canRetry: false });
+    setStatus("blocked");
+  }, []);
   const message = status === "processing" ? msgs["state.processing"] : status === "fallback" ? msgs["state.fallback"] : error?.message ?? outcome?.message ?? (status === "loading" ? msgs["state.loading"] : null);
   return {
     status,
@@ -576,11 +1045,13 @@ function useEmbeddedPayment(options) {
     attemptsLeft,
     attemptId,
     busy: status === "loading" || status === "processing",
+    verifying,
     containerRef: setContainer,
     containerId,
     submit,
     retry,
-    dismiss
+    dismiss,
+    cancelChallenge
   };
 }
 function VoucherCard({ outcome, locale, messages, className }) {
@@ -617,15 +1088,55 @@ function VoucherCard({ outcome, locale, messages, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["voucher.email"] })
   ] });
 }
-function PaymentChallenge({ outcome, locale, messages, render, onCancel }) {
+function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs = 12e4 }) {
   const m = storefront.paymentMessages(locale, messages);
-  const { ref } = useModalDialog({ open: true, onClose: () => onCancel?.() });
+  const { ref } = useModalDialog({ open: true, onClose: () => {
+  } });
+  const [canEscape, setCanEscape] = react.useState(false);
+  const [closed, setClosed] = react.useState(false);
+  const cancelRef = react.useRef(onCancel);
+  cancelRef.current = onCancel;
+  const hasCancel = !!onCancel;
+  react.useEffect(() => {
+    if (!hasCancel) return;
+    const t = setTimeout(() => setCanEscape(true), escapeAfterMs);
+    return () => clearTimeout(t);
+  }, [hasCancel, escapeAfterMs]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onClosed = () => setClosed(true);
+    el.addEventListener("close", onClosed);
+    return () => el.removeEventListener("close", onClosed);
+  }, [ref]);
+  const reopen = () => {
+    const el = ref.current;
+    if (!el) return;
+    try {
+      if (typeof el.showModal === "function") el.showModal();
+      else el.setAttribute("open", "");
+    } catch {
+      el.setAttribute("open", "");
+    }
+    setClosed(false);
+    el.querySelector("[data-sf-autofocus]")?.focus({ preventScroll: true });
+  };
   const url = outcome.challenge?.url;
-  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
-    render ? render(outcome) : url ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: m["challenge.title"], style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["state.challenge"] }),
-    onCancel && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onCancel, style: { minWidth: 44, minHeight: 44 }, children: m["action.cancel"] })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    closed && /* @__PURE__ */ jsxRuntime.jsxs("p", { role: "status", "data-sf-challenge-closed": true, children: [
+      m["state.challenge"],
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: reopen, "data-sf-challenge-reopen": true, style: { minWidth: 44, minHeight: 44 }, children: m["challenge.title"] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-sf-challenge-body": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
+      render ? render(outcome) : url ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: m["challenge.title"], "data-sf-challenge-frame": true, style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["state.challenge"] }),
+      hasCancel && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-challenge-escape": true, "aria-live": "polite", children: canEscape && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["challenge.escape_hint"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => cancelRef.current?.(), style: { minWidth: 44, minHeight: 44 }, children: m["challenge.escape"] })
+      ] }) })
+    ] }) })
+  ] });
 }
 var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
   const { submitLabel, hideAmountInButton, renderVoucher, renderChallenge, minHeight = 360, className, style, ...hookOptions } = props;
@@ -663,7 +1174,7 @@ var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
       state.status === "network_error" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void state.retry(), style: { minHeight: 44 }, children: m["action.retry"] })
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", "data-sf-pay-message": true, children: state.message }),
     outcome?.kind === "voucher" && (renderVoucher ? renderVoucher(outcome) : /* @__PURE__ */ jsxRuntime.jsx(VoucherCard, { outcome, locale, ...props.messages ? { messages: props.messages } : {} })),
-    outcome?.kind === "challenge" && /* @__PURE__ */ jsxRuntime.jsx(PaymentChallenge, { outcome, locale, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
+    outcome?.kind === "challenge" && /* @__PURE__ */ jsxRuntime.jsx(PaymentChallenge, { outcome, locale, onCancel: state.cancelChallenge, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
     submitLabel !== void 0 && showForm && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -685,53 +1196,195 @@ var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
   ] });
 });
 
-// src/payments/adapter.ts
-var PaymentHttpError = class extends Error {
-  constructor(status, code, message, details) {
-    super(message ?? code);
-    this.status = status;
-    this.code = code;
-    this.details = details;
+// src/payments/payment-method.messages.ts
+var ES2 = {
+  legend: "M\xE9todo de pago",
+  pay: "Pagar",
+  placeOrder: "Realizar el pedido",
+  placeOrderCash: "Generar ficha de pago",
+  chooseDelivery: "Elige la entrega para continuar",
+  payRedirect: "Continuar al pago",
+  continue: "Continuar",
+  retryAddress: "Guardar direcci\xF3n y continuar",
+  processing: "Procesando\u2026",
+  redirectNote: "Te llevamos a la p\xE1gina del proveedor para terminar el pago y regresas aqu\xED.",
+  cashPoints: "Elige d\xF3nde pagar en efectivo",
+  cashMore: "Ver m\xE1s puntos de pago",
+  cashNote: "Al hacer el pedido te damos una ficha con la referencia y la fecha l\xEDmite. El pedido se confirma cuando pagas.",
+  secureCard: "Tus datos de tarjeta los captura directamente nuestro proveedor de pagos; la tienda nunca los ve.",
+  pickDeliveryFirst: "Elige primero la entrega para ver el total y pagar con tarjeta.",
+  updatingTotal: "Actualizando el total\u2026",
+  syncFailed: "No pudimos actualizar el total con tu entrega. Puedes continuar al sitio del proveedor para pagar con tarjeta.",
+  quoteChanged: "Las tarifas de env\xEDo se actualizaron. Revisa tu env\xEDo para ver el total.",
+  rebuildCart: "Volver a armar mi carrito",
+  noPaymentTitle: "Por ahora no hay formas de pago disponibles",
+  noPayment: "Intenta de nuevo en unos minutos o escr\xEDbenos para completar tu pedido.",
+  paymentNote: "El pago se procesa de forma segura con nuestro proveedor de pagos.",
+  options: {
+    card: "Tarjeta de cr\xE9dito o d\xE9bito",
+    cash: "Efectivo",
+    wallet: "Cuenta del proveedor de pagos",
+    credits: "Pagos sin tarjeta"
   }
-  status;
-  code;
-  details;
-  name = "PaymentHttpError";
 };
-async function parse(res) {
-  const text = await res.text();
-  if (!text) return null;
+var EN2 = {
+  legend: "Payment method",
+  pay: "Pay",
+  placeOrder: "Place order",
+  placeOrderCash: "Get payment slip",
+  chooseDelivery: "Choose delivery to continue",
+  payRedirect: "Continue to payment",
+  continue: "Continue",
+  retryAddress: "Save address and continue",
+  processing: "Processing\u2026",
+  redirectNote: "We'll take you to the provider's page to finish paying, then bring you back here.",
+  cashPoints: "Choose where to pay in cash",
+  cashMore: "Show more payment points",
+  cashNote: "When you place the order you get a slip with the reference and the deadline. The order is confirmed once you pay.",
+  secureCard: "Your card details are captured directly by our payment provider; the shop never sees them.",
+  pickDeliveryFirst: "Choose delivery first to see the total and pay by card.",
+  updatingTotal: "Updating the total\u2026",
+  syncFailed: "We couldn't update the total with your delivery. You can continue to the provider's site to pay by card.",
+  quoteChanged: "Shipping rates were updated. Check your delivery to see the total.",
+  rebuildCart: "Rebuild my cart",
+  noPaymentTitle: "No payment methods are available right now",
+  noPayment: "Try again in a few minutes or contact us to complete your order.",
+  paymentNote: "Payment is processed securely by our payment provider.",
+  options: {
+    card: "Credit or debit card",
+    cash: "Cash",
+    wallet: "Payment provider account",
+    credits: "Pay without a card"
+  }
+};
+function paymentMethodMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN2 : ES2;
+  if (!overrides) return base;
+  const { options, ...rest } = overrides;
+  return { ...base, ...rest, options: { ...base.options, ...options } };
+}
+function alternativeChoices(choices) {
+  return choices.filter((c) => c.mode !== "card");
+}
+function pickChoice(form, value) {
+  const input = Array.from(form?.querySelectorAll('input[name="payment_choice"]') ?? []).find((i) => i.value === value);
+  if (!input) return;
+  input.click();
+  input.scrollIntoView?.({ block: "center", behavior: "smooth" });
+}
+var INDETERMINATE = /* @__PURE__ */ new Set(["confirming", "verifying", "transient", "in_progress"]);
+function safeStorage2() {
   try {
-    return JSON.parse(text);
+    return typeof sessionStorage !== "undefined" ? sessionStorage : null;
   } catch {
     return null;
   }
 }
-function createFetchTransport(url, options = {}) {
-  const doFetch = (u, init) => (options.fetch ?? globalThis.fetch.bind(globalThis))(u, init);
-  async function call(u, init) {
-    const res = await doFetch(u, { credentials: options.credentials ?? "same-origin", ...init });
-    const body = await parse(res);
-    if (!res.ok) {
-      const e = body?.error;
-      throw new PaymentHttpError(res.status, e?.code ?? "server_error", e?.message, e?.details);
+function usePaymentRecovery(options = {}) {
+  const { scope = "default", formAutoRetries = 2 } = options;
+  const [notice, setNotice] = react.useState(null);
+  const [sectionKey, setSectionKey] = react.useState(0);
+  const formFailures = react.useRef(0);
+  const lastIssue = react.useRef(null);
+  const unknownByEvent = react.useRef(false);
+  const live = react.useRef(options);
+  live.current = options;
+  const onIssue = react.useCallback((issue) => {
+    lastIssue.current = issue;
+    if (!issue) return setNotice((n) => n?.kind === "confirming" ? null : n);
+    if (issue.kind === "confirming" || issue.kind === "verifying") return setNotice({ kind: "confirming" });
+    if (issue.kind === "merchant_config" || issue.kind === "stale_checkout" || issue.kind === "provider_declined") return setNotice({ kind: issue.kind });
+    if (issue.kind === "other") return setNotice({ kind: "other" });
+    setNotice((n) => n?.kind === "confirming" ? null : n);
+  }, []);
+  const retry = react.useCallback(() => {
+    const issue = lastIssue.current;
+    if (unknownByEvent.current || issue && INDETERMINATE.has(issue.kind)) return false;
+    const store = live.current.storage === void 0 ? safeStorage2() : live.current.storage;
+    try {
+      store?.removeItem(`sf:pay:attempt:${live.current.scope ?? "default"}`);
+    } catch {
     }
-    const result = body;
-    if (!result || typeof result !== "object" || !result.payment || typeof result.payment.status !== "string") {
-      throw new PaymentHttpError(502, "invalid_response", "Unexpected payment response");
+    formFailures.current = 0;
+    lastIssue.current = null;
+    unknownByEvent.current = false;
+    setNotice(null);
+    setSectionKey((k) => k + 1);
+    return true;
+  }, []);
+  const onEvent = react.useCallback(
+    (e) => {
+      if (e.type === "form_ready") {
+        formFailures.current = 0;
+        setNotice((n) => n?.kind === "form_failed" ? null : n);
+      }
+      if (e.type === "form_failed") {
+        if (formFailures.current < formAutoRetries) {
+          formFailures.current += 1;
+          setSectionKey((k) => k + 1);
+        } else {
+          setNotice({ kind: "form_failed" });
+        }
+      }
+      if (e.type === "error") unknownByEvent.current = e.kind === "network" || e.kind === "payment_in_progress";
+      if (e.type === "result") {
+        unknownByEvent.current = false;
+        lastIssue.current = null;
+      }
+      if (e.type === "result" && e.status === "rejected") setNotice({ kind: "rejected" });
+      if (e.type === "error" && lastIssue.current?.kind === "store_closed") live.current.onRevalidate?.();
+    },
+    [formAutoRetries]
+  );
+  return react.useMemo(() => ({ notice, setNotice, sectionKey, onIssue, onEvent, lastIssue, retry, clear: () => setNotice(null) }), [notice, sectionKey, onIssue, onEvent, retry]);
+}
+function PaymentRecovery(props) {
+  const { notice, alternatives = [], onRetry, onPick, onRefresh, alternativeLabel, classNames: cx = {}, testIds = {}, children } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = react.useMemo(() => paymentRecoveryMessages(locale, props.messages), [locale, props.messages]);
+  const rowNames = react.useMemo(() => paymentMethodMessages(locale).options, [locale]);
+  const ref = react.useRef(null);
+  const kind = notice?.kind;
+  react.useEffect(() => {
+    if (kind && kind !== "confirming") {
+      ref.current?.focus();
+      ref.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
     }
-    return result;
-  }
-  return {
-    submit: (request, { signal }) => call(url, {
-      method: "POST",
-      signal,
-      headers: { "Content-Type": "application/json", Accept: "application/json", "Idempotency-Key": request.idempotencyKey, ...options.headers },
-      body: JSON.stringify(options.buildBody ? options.buildBody(request) : request)
-    }),
-    ...options.refreshUrl ? {
-      refresh: ({ signal }) => call(options.refreshUrl, { method: "POST", signal, headers: { Accept: "application/json", ...options.headers } })
-    } : {}
+  }, [kind]);
+  if (!notice) return null;
+  const confirming = notice.kind === "confirming";
+  const canRetry = notice.kind !== "confirming" && notice.kind !== "stale_checkout";
+  const showAlternatives = notice.kind !== "stale_checkout" && !confirming && alternatives.length > 0;
+  const alternativesFirst = notice.kind === "merchant_config";
+  const nameOf = (c) => c.label ?? (c.option ? rowNames[c.option] : void 0) ?? c.option ?? c.methodKey;
+  const labelOf = (c) => alternativeLabel?.(c) ?? m["action.alternative"].replace("{label}", nameOf(c));
+  const retryButton = canRetry ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: alternativesFirst ? cx.secondary : cx.primary, onClick: onRetry, style: { minHeight: 44 }, "data-sf-pay-retry": true, ...testIds.retry ? { "data-testid": testIds.retry } : {}, children: notice.kind === "form_failed" ? m["action.retry_form"] : m["action.retry"] }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, tabIndex: -1, role: confirming ? "status" : "alert", "aria-live": confirming ? "polite" : void 0, className: cx.root, "data-sf-pay-recovery": notice.kind, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.title, children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m[`notice.${notice.kind}.title`] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.body, children: m[`notice.${notice.kind}.body`] }),
+    !confirming ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.actions, children: [
+      alternativesFirst ? null : retryButton,
+      notice.kind === "stale_checkout" ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx.primary, onClick: onRefresh, style: { minHeight: 44 }, "data-sf-pay-refresh": true, ...testIds.refresh ? { "data-testid": testIds.refresh } : {}, children: m["action.refresh"] }) : null,
+      showAlternatives ? alternatives.map((c) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: alternativesFirst ? cx.primary : cx.secondary, onClick: () => onPick(c), style: { minHeight: 44 }, "data-sf-pay-alternative": c.value, children: labelOf(c) }, c.value)) : null,
+      alternativesFirst ? retryButton : null
+    ] }) : null,
+    children
+  ] });
+}
+
+// src/payments/revalidate.ts
+function checkoutShouldRevalidate(options) {
+  const paths = options.paths.map((p) => p.replace(/\/+$/, "") || "/");
+  return (args) => {
+    const method = args.formMethod?.toUpperCase();
+    if (!method || method === "GET" || !args.formAction) return args.defaultShouldRevalidate;
+    let pathname = args.formAction;
+    try {
+      pathname = new URL(args.formAction, "http://sf.local").pathname;
+    } catch {
+    }
+    pathname = pathname.replace(/\/+$/, "") || "/";
+    return paths.includes(pathname) ? false : args.defaultShouldRevalidate;
   };
 }
 
@@ -794,74 +1447,6 @@ function paymentNonceFromHeaders(headers) {
   return /'nonce-([A-Za-z0-9+/=_-]+)'/.exec(csp)?.[1];
 }
 
-// src/payments/payment-method.messages.ts
-var ES = {
-  legend: "M\xE9todo de pago",
-  pay: "Pagar",
-  placeOrder: "Realizar el pedido",
-  placeOrderCash: "Generar ficha de pago",
-  chooseDelivery: "Elige la entrega para continuar",
-  payRedirect: "Continuar al pago",
-  continue: "Continuar",
-  retryAddress: "Guardar direcci\xF3n y continuar",
-  processing: "Procesando\u2026",
-  redirectNote: "Te llevamos a la p\xE1gina del proveedor para terminar el pago y regresas aqu\xED.",
-  cashPoints: "Elige d\xF3nde pagar en efectivo",
-  cashMore: "Ver m\xE1s puntos de pago",
-  cashNote: "Al hacer el pedido te damos una ficha con la referencia y la fecha l\xEDmite. El pedido se confirma cuando pagas.",
-  secureCard: "Tus datos de tarjeta los captura directamente nuestro proveedor de pagos; la tienda nunca los ve.",
-  pickDeliveryFirst: "Elige primero la entrega para ver el total y pagar con tarjeta.",
-  updatingTotal: "Actualizando el total\u2026",
-  syncFailed: "No pudimos actualizar el total con tu entrega. Puedes continuar al sitio del proveedor para pagar con tarjeta.",
-  quoteChanged: "Las tarifas de env\xEDo se actualizaron. Revisa tu env\xEDo para ver el total.",
-  rebuildCart: "Volver a armar mi carrito",
-  noPaymentTitle: "Por ahora no hay formas de pago disponibles",
-  noPayment: "Intenta de nuevo en unos minutos o escr\xEDbenos para completar tu pedido.",
-  paymentNote: "El pago se procesa de forma segura con nuestro proveedor de pagos.",
-  options: {
-    card: "Tarjeta de cr\xE9dito o d\xE9bito",
-    cash: "Efectivo",
-    wallet: "Cuenta del proveedor de pagos",
-    credits: "Pagos sin tarjeta"
-  }
-};
-var EN = {
-  legend: "Payment method",
-  pay: "Pay",
-  placeOrder: "Place order",
-  placeOrderCash: "Get payment slip",
-  chooseDelivery: "Choose delivery to continue",
-  payRedirect: "Continue to payment",
-  continue: "Continue",
-  retryAddress: "Save address and continue",
-  processing: "Processing\u2026",
-  redirectNote: "We'll take you to the provider's page to finish paying, then bring you back here.",
-  cashPoints: "Choose where to pay in cash",
-  cashMore: "Show more payment points",
-  cashNote: "When you place the order you get a slip with the reference and the deadline. The order is confirmed once you pay.",
-  secureCard: "Your card details are captured directly by our payment provider; the shop never sees them.",
-  pickDeliveryFirst: "Choose delivery first to see the total and pay by card.",
-  updatingTotal: "Updating the total\u2026",
-  syncFailed: "We couldn't update the total with your delivery. You can continue to the provider's site to pay by card.",
-  quoteChanged: "Shipping rates were updated. Check your delivery to see the total.",
-  rebuildCart: "Rebuild my cart",
-  noPaymentTitle: "No payment methods are available right now",
-  noPayment: "Try again in a few minutes or contact us to complete your order.",
-  paymentNote: "Payment is processed securely by our payment provider.",
-  options: {
-    card: "Credit or debit card",
-    cash: "Cash",
-    wallet: "Payment provider account",
-    credits: "Pay without a card"
-  }
-};
-function paymentMethodMessages(locale, overrides) {
-  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
-  if (!overrides) return base;
-  const { options, ...rest } = overrides;
-  return { ...base, ...rest, options: { ...base.options, ...options } };
-}
-
 // src/checkout/brands/logos.generated.ts
 var LOGOS = {
   "7eleven": { src: "data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 xml:space=%22preserve%22 viewBox=%220 0 45 59.89%22%3E%3Cdefs%3E%3Cpath id=%22a%22 d=%22M0 0h45v59.9H0z%22/%3E%3C/defs%3E%3CclipPath id=%22b%22%3E%3Cuse xlink:href=%22%23a%22 style=%22overflow:visible%22/%3E%3C/clipPath%3E%3Cpath d=%22M34.2 45c.9 0 1.7.8 1.7 1.7s-.7 1.7-1.7 1.7c-.9 0-1.6-.8-1.6-1.7s.7-1.7 1.6-1.7m0 3c.7 0 1.3-.6 1.3-1.3 0-.8-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .8.6 1.3 1.3 1.3m-.2-.4h-.3v-1.8h.6q.6 0 .6.6c0 .3-.2.5-.4.5l.4.7h-.4l-.4-.7H34zm.2-1q.3 0 .3-.3t-.3-.3H34v.5h.2zm8-14.3c-.9 0-1.5.4-2.1.9l-.4.6-.1-.1.5-.8v-.5h-3.2V43h2.9v-6.7c0-1.1.7-1.4 1.2-1.5s1.1.2 1.1.8V43H45v-7.3c0-2.3-1-3.4-2.8-3.4M9.9 40.6h3v2.3H7V32.3h2.9zM0 42.9h5.9v-2.1h-3v-2.3h3v-2h-3v-2h3v-2.2H0zm13.9 0h6v-2.1h-3.1v-2.3h3.1v-2h-3.1v-2h3.1v-2.2h-6zm16 0h6v-2.1h-3.1v-2.3h3.1v-2h-3.1v-2h3.1v-2.2h-6zm-3.8-10.6L25 39l-.1 1.2v.1h-.1v-.1l-.1-1.2-1.1-6.7h-2.9l2.4 10.6h3.6l2.4-10.6z%22 style=%22clip-path:url(%23b);fill:%23147350%22/%3E%3Cpath d=%22M37.7 0H0v15h19.9C24.4 8.5 30.5 3.3 37.7 0%22 style=%22clip-path:url(%23b);fill:%23ff6c00%22/%3E%3Cpath d=%22M15 59.9h15v-15H15zM45 15V0a40.7 40.7 0 0 0-28.9 30h15.3A25.8 25.8 0 0 1 45 15%22 style=%22clip-path:url(%23b);fill:%23eb0f2a%22/%3E%3C/svg%3E", ar: 0.751, mono: false },
@@ -1255,6 +1840,15 @@ function PaymentMethodSection(props) {
   const requote = wantSync && settled && sync.requote === true;
   const syncFailed = wantSync && settled && !sync.ok && !requote;
   const brickReady = cardActive && deliveryReady && synced && !syncFailed;
+  const [formLatched, setFormLatched] = react.useState(false);
+  react.useEffect(() => {
+    if (brickReady) setFormLatched(true);
+  }, [brickReady]);
+  react.useEffect(() => {
+    if (!cardActive) setFormLatched(false);
+  }, [cardActive]);
+  const showBrick = cardActive && !syncFailed && (formLatched || brickReady);
+  const totalUpdating = showBrick && !brickReady;
   const transport = react.useMemo(
     () => props.transport ?? createFetchTransport(payUrl, {
       ...statusUrl ? { refreshUrl: statusUrl } : {},
@@ -1368,9 +1962,9 @@ function PaymentMethodSection(props) {
           marks.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.brands, "data-sf-pay-brands": choice.option ?? "plain", "aria-hidden": "true", children: marks.map((mk) => /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: mk.key, logoUrl: mk.logoUrl ?? null, size: 20 }, mk.key)) }) : null
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked, marks: brandMarks, visible: cashPointsVisible, openMore: storedPoint, onPointChange }),
-        choice.mode === "card" && checked && cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.brickWrap, "data-sf-pay-card": true, ...tid("card"), children: [
+        choice.mode === "card" && checked && cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.brickWrap, "data-sf-pay-card": true, ...totalUpdating ? { "data-sf-pay-updating": "" } : {}, "aria-busy": totalUpdating || void 0, ...tid("card"), children: [
           fallback ? null : !deliveryReady ? cardNotice("pickDelivery", m.pickDeliveryFirst) : syncFailed ? cardNotice("syncFailed", m.syncFailed) : requote ? cardNotice("requote", m.quoteChanged) : !synced ? cardNotice("syncing", m.updatingTotal) : null,
-          brickReady || fallback ? /* @__PURE__ */ jsxRuntime.jsx(
+          showBrick || fallback ? /* @__PURE__ */ jsxRuntime.jsx(
             PaymentBrick,
             {
               ...brickProps,
@@ -1382,15 +1976,14 @@ function PaymentMethodSection(props) {
               locale,
               ...scope ? { scope } : {},
               ...payerEmail && !brickProps?.email ? { email: payerEmail } : {},
-              enabled: brickReady,
+              enabled: showBrick,
               ...cx.brick ? { className: cx.brick } : {},
               onEvent: handleEvent,
               onFallback: () => setFallback(true),
               onResult: (o) => {
                 if (o.kind === "approved" || o.kind === "in_review" || o.kind === "voucher") onDone(o);
               }
-            },
-            payerEmail || brickProps?.email ? "with-email" : "without-email"
+            }
           ) : null,
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.secureCard }),
           expired && rebuildHref ? Link({ href: rebuildHref, ...cx.rebuild ? { className: cx.rebuild } : {}, children: m.rebuildCart, ...testIds.rebuild ? { testId: testIds.rebuild } : {} }) : null
@@ -1409,7 +2002,7 @@ function PaymentMethodSection(props) {
         onClick: onPayClick,
         className: cx.submit,
         disabled: busy || blocked,
-        "aria-disabled": blocked || brickReady && (!ready || processing) || void 0,
+        "aria-disabled": blocked || cardActive && !syncFailed && deliveryReady && (!brickReady || !ready || processing) || void 0,
         "aria-busy": processing || void 0,
         "data-sf-pay-method-submit": true,
         ...tid("submit"),
@@ -1499,8 +2092,6 @@ function rowMarks(choice, cardBrands) {
   }
   return [];
 }
-
-// src/payments/choices.ts
 var SEP = "|";
 function choiceValue(methodKey, option) {
   return option ? `${methodKey}${SEP}${option}` : methodKey;
@@ -1574,13 +2165,33 @@ function checkoutToAttempt(result) {
   if (action?.type === "challenge") return { ...base, payment: { provider: payment.provider, status: "requires_action", outcome: "challenge", action } };
   return { ...base, payment: { provider: payment.provider, status: "pending", outcome: "pending", action: action ?? { type: "none" } } };
 }
-function payErrorResponse(err) {
+function safeHttpStatus(status) {
+  return status === 502 || status === 503 || status === 504 ? 500 : status;
+}
+function payErrorResponse(err, options = {}) {
   const status = typeof err.status === "number" && err.status >= 400 ? err.status : 503;
-  let code = err.code ?? "server_error";
+  const { kind: classified, retryable } = storefront.classifyPaymentError({ ...err, status, checkoutId: err.checkoutId ?? null });
+  const kind = options.kind ?? classified;
+  let code = err.code ?? (kind === "transient" ? "unavailable" : "server_error");
   if (status === 409 && err.field === "payment_in_progress") code = "payment_in_progress";
   if (status === 429) code = "too_many_attempts";
   if (status === 422 && err.field === "expected_total") code = "price_mismatch";
-  return { status, body: { error: { code, message: err.message ?? "", ...err.details !== void 0 ? { details: err.details } : {} } } };
+  const own = (options.ownMessage || kind === "validation" || kind === "expired" || kind === "price_mismatch" || kind === "other" && status < 500) && err.message;
+  const message = own || paymentRecoveryMessages(options.locale, options.messages)[`error.${kind}`];
+  return {
+    status: safeHttpStatus(status),
+    body: {
+      error: {
+        code,
+        message,
+        retryable: options.kind ? options.kind === "transient" || options.kind === "in_progress" || options.kind === "rate_limited" : retryable,
+        kind,
+        ...err.field ? { field: err.field } : {},
+        ...err.retryAfter ? { retry_after: err.retryAfter } : {},
+        ...err.details !== void 0 ? { details: err.details } : {}
+      }
+    }
+  };
 }
 function voucherRows(voucher, labels, locale) {
   if (!voucher) return [];
@@ -1606,15 +2217,23 @@ exports.PaymentBrick = PaymentBrick;
 exports.PaymentChallenge = PaymentChallenge;
 exports.PaymentHttpError = PaymentHttpError;
 exports.PaymentMethodSection = PaymentMethodSection;
+exports.PaymentMountCancelled = PaymentMountCancelled;
+exports.PaymentMountTimeout = PaymentMountTimeout;
+exports.PaymentRecovery = PaymentRecovery;
 exports.VoucherCard = VoucherCard;
+exports.alternativeChoices = alternativeChoices;
 exports.buildPayChoices = buildPayChoices;
 exports.cashProviderData = cashProviderData;
+exports.checkoutShouldRevalidate = checkoutShouldRevalidate;
 exports.checkoutToAttempt = checkoutToAttempt;
 exports.choiceValue = choiceValue;
 exports.createFetchTransport = createFetchTransport;
+exports.createResilientTransport = createResilientTransport;
 exports.formFields = formFields;
+exports.isResolvedAttempt = isResolvedAttempt;
 exports.loadPaymentSdk = loadPaymentSdk;
 exports.mercadoPagoBricksAdapter = mercadoPagoBricksAdapter;
+exports.mountQueued = mountQueued;
 exports.parseChoice = parseChoice;
 exports.payErrorResponse = payErrorResponse;
 exports.paymentCsp = paymentCsp;
@@ -1624,11 +2243,16 @@ exports.paymentCspMode = paymentCspMode;
 exports.paymentMethodMessages = paymentMethodMessages;
 exports.paymentNonce = paymentNonce;
 exports.paymentNonceFromHeaders = paymentNonceFromHeaders;
+exports.paymentRecoveryMessages = paymentRecoveryMessages;
+exports.pickChoice = pickChoice;
 exports.readPaymentScheme = readPaymentScheme;
 exports.readPaymentTheme = readPaymentTheme;
 exports.resetPaymentSdkCache = resetPaymentSdkCache;
+exports.safeHttpStatus = safeHttpStatus;
 exports.sanitizeMercadoPagoFormData = sanitizeMercadoPagoFormData;
 exports.useEmbeddedPayment = useEmbeddedPayment;
+exports.usePaymentRecovery = usePaymentRecovery;
 exports.voucherRows = voucherRows;
+exports.withMountQueue = withMountQueue;
 //# sourceMappingURL=payments.cjs.map
 //# sourceMappingURL=payments.cjs.map