@asteby/storefront-react 0.16.1 → 0.18.0

package/dist/payments.js

@@ -3,9 +3,10 @@ import { useModalDialog } from './chunk-ZBH7JYU4.js';
 import { findBrand, BrandMark } from './chunk-JNUJGPJC.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
 import './chunk-DQBL2DFJ.js';
-export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, voucherRows } from './chunk-ISEOCKIR.js';
+import { paymentRecoveryMessages } from './chunk-MNLROALF.js';
+export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, paymentRecoveryMessages, safeHttpStatus, voucherRows } from './chunk-MNLROALF.js';
 import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback, useSyncExternalStore } from 'react';
-import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry } from '@asteby/storefront';
+import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry, classifyPaymentError } from '@asteby/storefront';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/payments/sdk-loader.ts
@@ -130,6 +131,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 {
@@ -142,6 +150,273 @@ 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/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 = 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 = 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);
+    }
+  };
+}
+
 // src/payments/theme.ts
 var PAYMENT_THEME_TOKENS = {
   "--sf-pay-text": "textPrimaryColor",
@@ -210,7 +485,9 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
+    verifyTimeoutMs = 12e4,
+    verifyIntervalMs = 2e3,
     scope = "default"
   } = options;
   const msgs = useMemo(() => paymentMessages(locale, options.messages), [locale, options.messages]);
@@ -224,15 +501,28 @@ function useEmbeddedPayment(options) {
   const [attemptId, setAttemptId] = useState(null);
   const [container, setContainer] = useState(null);
   const [mountKey, setMountKey] = useState(0);
+  const [verifying, setVerifying] = useState(false);
   const live = useRef({ ...options, msgs });
   live.current = { ...options, msgs };
   const form = useRef(null);
   const inFlight = useRef(null);
   const pendingData = useRef(null);
+  const memAttempt = useRef(null);
+  const memOnly = useRef(false);
+  const errorRef = useRef(null);
+  const retryRef = useRef(() => Promise.resolve());
   const alive = useRef(true);
   const generation = useRef(0);
   const statusRef = useRef("idle");
+  const leftChallenge = useRef(false);
   statusRef.current = status;
+  errorRef.current = error;
+  const amountKey = `${amount.amount}|${amount.currency_code}`;
+  const amountKeyRef = useRef(amountKey);
+  amountKeyRef.current = amountKey;
+  const appliedAmount = useRef(null);
+  const updating = useRef(null);
+  const remountRequested = useRef(false);
   useEffect(() => {
     alive.current = true;
     return () => {
@@ -243,19 +533,33 @@ function useEmbeddedPayment(options) {
   const store = options.storage === void 0 ? safeStorage() : options.storage;
   const emit = useCallback((e) => live.current.onEvent?.(e), []);
   const readAttempt = 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 ?? 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 = useCallback(() => {
+    memAttempt.current = null;
     try {
       store?.removeItem(storageKey);
     } catch {
@@ -271,7 +575,32 @@ function useEmbeddedPayment(options) {
     },
     [emit]
   );
-  const amountKey = `${amount.amount}|${amount.currency_code}`;
+  const syncAmount = 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;
   useEffect(() => {
@@ -285,18 +614,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);
     };
@@ -310,31 +643,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");
       }
@@ -342,16 +683,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]);
+  useEffect(() => {
+    syncAmount();
+  }, [amountKey, syncAmount]);
   const finish = useCallback(
     (result) => {
       const o = paymentOutcome(result, live.current.locale, live.current.messages);
       pendingData.current = null;
+      leftChallenge.current = false;
       setOutcome(o);
       setError(null);
       setAttemptsLeft(o.attempts_left);
@@ -371,7 +718,7 @@ function useEmbeddedPayment(options) {
     [emit, rotateAttempt]
   );
   const send = useCallback(
-    async (data, attempt) => {
+    async (data, attempt, total) => {
       const ctl = new AbortController();
       const maxRetries = live.current.autoRetries ?? autoRetries;
       for (let n = 0; ; n++) {
@@ -383,7 +730,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 }
           );
@@ -401,7 +748,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;
@@ -427,7 +774,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);
@@ -443,30 +794,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 = 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;
   useEffect(() => {
     if (status !== "challenge" && status !== "in_review" || !transport.refresh) return;
     let stop = false;
@@ -479,6 +833,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 = paymentOutcome(r, live.current.locale, live.current.messages);
           if (o.kind !== status) {
             finish(r);
@@ -493,10 +848,57 @@ function useEmbeddedPayment(options) {
       ctl.abort();
     };
   }, [status, transport, pollIntervalMs, pollTimeoutMs, finish]);
+  const unknownOutcome = status === "network_error" || status === "blocked" && error?.kind === "payment_in_progress";
+  useEffect(() => {
+    if (!unknownOutcome) syncAmount();
+  }, [unknownOutcome, syncAmount]);
+  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 = useCallback(() => {
     setError(null);
     setOutcome((o) => o?.kind === "rejected" ? null : o);
   }, []);
+  const cancelChallenge = 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,
@@ -507,11 +909,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 }) {
@@ -548,15 +952,55 @@ function VoucherCard({ outcome, locale, messages, className }) {
     /* @__PURE__ */ jsx("p", { children: m["voucher.email"] })
   ] });
 }
-function PaymentChallenge({ outcome, locale, messages, render, onCancel }) {
+function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs = 12e4 }) {
   const m = paymentMessages(locale, messages);
-  const { ref } = useModalDialog({ open: true, onClose: () => onCancel?.() });
+  const { ref } = useModalDialog({ open: true, onClose: () => {
+  } });
+  const [canEscape, setCanEscape] = useState(false);
+  const [closed, setClosed] = useState(false);
+  const cancelRef = useRef(onCancel);
+  cancelRef.current = onCancel;
+  const hasCancel = !!onCancel;
+  useEffect(() => {
+    if (!hasCancel) return;
+    const t = setTimeout(() => setCanEscape(true), escapeAfterMs);
+    return () => clearTimeout(t);
+  }, [hasCancel, escapeAfterMs]);
+  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__ */ jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
-    render ? render(outcome) : url ? /* @__PURE__ */ jsx("iframe", { src: url, title: m["challenge.title"], style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsx("p", { children: m["state.challenge"] }),
-    onCancel && /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, style: { minWidth: 44, minHeight: 44 }, children: m["action.cancel"] })
-  ] }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    closed && /* @__PURE__ */ jsxs("p", { role: "status", "data-sf-challenge-closed": true, children: [
+      m["state.challenge"],
+      " ",
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: reopen, "data-sf-challenge-reopen": true, style: { minWidth: 44, minHeight: 44 }, children: m["challenge.title"] })
+    ] }),
+    /* @__PURE__ */ jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxs("div", { "data-sf-challenge-body": true, children: [
+      /* @__PURE__ */ jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
+      render ? render(outcome) : url ? /* @__PURE__ */ jsx("iframe", { src: url, title: m["challenge.title"], "data-sf-challenge-frame": true, style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsx("p", { children: m["state.challenge"] }),
+      hasCancel && /* @__PURE__ */ jsx("div", { "data-sf-challenge-escape": true, "aria-live": "polite", children: canEscape && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { children: m["challenge.escape_hint"] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => cancelRef.current?.(), style: { minWidth: 44, minHeight: 44 }, children: m["challenge.escape"] })
+      ] }) })
+    ] }) })
+  ] });
 }
 var PaymentBrick = forwardRef(function PaymentBrick2(props, ref) {
   const { submitLabel, hideAmountInButton, renderVoucher, renderChallenge, minHeight = 360, className, style, ...hookOptions } = props;
@@ -594,7 +1038,7 @@ var PaymentBrick = forwardRef(function PaymentBrick2(props, ref) {
       state.status === "network_error" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void state.retry(), style: { minHeight: 44 }, children: m["action.retry"] })
     ] }) : /* @__PURE__ */ jsx("p", { role: "status", "aria-live": "polite", "data-sf-pay-message": true, children: state.message }),
     outcome?.kind === "voucher" && (renderVoucher ? renderVoucher(outcome) : /* @__PURE__ */ jsx(VoucherCard, { outcome, locale, ...props.messages ? { messages: props.messages } : {} })),
-    outcome?.kind === "challenge" && /* @__PURE__ */ jsx(PaymentChallenge, { outcome, locale, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
+    outcome?.kind === "challenge" && /* @__PURE__ */ jsx(PaymentChallenge, { outcome, locale, onCancel: state.cancelChallenge, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
     submitLabel !== void 0 && showForm && /* @__PURE__ */ jsxs(
       "button",
       {
@@ -616,56 +1060,6 @@ var PaymentBrick = 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;
-  }
-  status;
-  code;
-  details;
-  name = "PaymentHttpError";
-};
-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);
-    }
-    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/payment-method.messages.ts
 var ES = {
   legend: "M\xE9todo de pago",
@@ -733,6 +1127,130 @@ function paymentMethodMessages(locale, overrides) {
   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 typeof sessionStorage !== "undefined" ? sessionStorage : null;
+  } catch {
+    return null;
+  }
+}
+function usePaymentRecovery(options = {}) {
+  const { scope = "default", formAutoRetries = 2 } = options;
+  const [notice, setNotice] = useState(null);
+  const [sectionKey, setSectionKey] = useState(0);
+  const formFailures = useRef(0);
+  const lastIssue = useRef(null);
+  const unknownByEvent = useRef(false);
+  const live = useRef(options);
+  live.current = options;
+  const onIssue = 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 = 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 {
+    }
+    formFailures.current = 0;
+    lastIssue.current = null;
+    unknownByEvent.current = false;
+    setNotice(null);
+    setSectionKey((k) => k + 1);
+    return true;
+  }, []);
+  const onEvent = 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 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 = useMemo(() => paymentRecoveryMessages(locale, props.messages), [locale, props.messages]);
+  const rowNames = useMemo(() => paymentMethodMessages(locale).options, [locale]);
+  const ref = useRef(null);
+  const kind = notice?.kind;
+  useEffect(() => {
+    if (kind && kind !== "confirming") {
+      ref.current?.focus();
+      ref.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
+    }
+  }, [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__ */ 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__ */ 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__ */ jsx("p", { className: cx.title, children: /* @__PURE__ */ jsx("strong", { children: m[`notice.${notice.kind}.title`] }) }),
+    /* @__PURE__ */ jsx("p", { className: cx.body, children: m[`notice.${notice.kind}.body`] }),
+    !confirming ? /* @__PURE__ */ jsxs("div", { className: cx.actions, children: [
+      alternativesFirst ? null : retryButton,
+      notice.kind === "stale_checkout" ? /* @__PURE__ */ 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__ */ 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;
+  };
+}
 var PAYMENT_CHOICE_FIELD = "payment_choice";
 var CASH_POINT_FIELD = "cash_point";
 function formFields(form) {
@@ -859,6 +1377,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] = useState(false);
+  useEffect(() => {
+    if (brickReady) setFormLatched(true);
+  }, [brickReady]);
+  useEffect(() => {
+    if (!cardActive) setFormLatched(false);
+  }, [cardActive]);
+  const showBrick = cardActive && !syncFailed && (formLatched || brickReady);
+  const totalUpdating = showBrick && !brickReady;
   const transport = useMemo(
     () => props.transport ?? createFetchTransport(payUrl, {
       ...statusUrl ? { refreshUrl: statusUrl } : {},
@@ -972,9 +1499,9 @@ function PaymentMethodSection(props) {
           marks.length ? /* @__PURE__ */ jsx("span", { className: cx.brands, "data-sf-pay-brands": choice.option ?? "plain", "aria-hidden": "true", children: marks.map((mk) => /* @__PURE__ */ jsx(BrandMark, { brand: mk.key, logoUrl: mk.logoUrl ?? null, size: 20 }, mk.key)) }) : null
         ] }),
         /* @__PURE__ */ 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__ */ jsxs("div", { className: cx.brickWrap, "data-sf-pay-card": true, ...tid("card"), children: [
+        choice.mode === "card" && checked && cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ 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__ */ jsx(
+          showBrick || fallback ? /* @__PURE__ */ jsx(
             PaymentBrick,
             {
               ...brickProps,
@@ -986,15 +1513,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__ */ 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
@@ -1013,7 +1539,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"),
@@ -1104,6 +1630,6 @@ function rowMarks(choice, cardBrands) {
   return [];
 }
 
-export { CASH_POINT_FIELD, MERCADOPAGO_BRICKS_KIND, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PaymentBrick, PaymentChallenge, PaymentHttpError, PaymentMethodSection, VoucherCard, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentScheme, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+export { CASH_POINT_FIELD, MERCADOPAGO_BRICKS_KIND, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PaymentBrick, PaymentChallenge, PaymentHttpError, PaymentMethodSection, PaymentMountCancelled, PaymentMountTimeout, PaymentRecovery, VoucherCard, alternativeChoices, checkoutShouldRevalidate, createFetchTransport, createResilientTransport, formFields, isResolvedAttempt, loadPaymentSdk, mercadoPagoBricksAdapter, mountQueued, paymentMethodMessages, pickChoice, readPaymentScheme, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment, usePaymentRecovery, withMountQueue };
 //# sourceMappingURL=payments.js.map
 //# sourceMappingURL=payments.js.map