@asteby/storefront-react 0.17.0 → 0.19.0

package/dist/payments.css

@@ -87,3 +87,68 @@
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+
+/*
+ * 3DS challenge (`<PaymentChallenge>`): a near full-screen modal. Colors are fixed on purpose: the bank page inside
+ * the iframe is always white, and the dialog often lives in a themed (dark) panel. Override with a more specific rule.
+ */
+dialog[data-sf-challenge] {
+  margin: auto;
+  box-sizing: border-box;
+  width: min(60rem, calc(100% - 2rem));
+  max-width: none;
+  max-height: 94dvh;
+  overflow: auto;
+  border: 1px solid #c9d2ee;
+  border-radius: 0.75rem;
+  background: #ffffff;
+  color: #0b1220;
+  /* Claro aunque la página esté en oscuro: barras de desplazamiento y controles del navegador sobre fondo blanco. */
+  color-scheme: light;
+  padding: 1.25rem;
+}
+dialog[data-sf-challenge]::backdrop {
+  background: rgb(0 8 31 / 0.72);
+}
+dialog[data-sf-challenge] h2 {
+  margin: 0 0 0.75rem;
+  font-weight: 800;
+  color: #001963;
+}
+dialog[data-sf-challenge] h2:focus {
+  outline: none;
+}
+dialog[data-sf-challenge] [data-sf-challenge-frame] {
+  display: block;
+  height: min(70dvh, 40rem);
+  background: #ffffff;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape] {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape]:empty {
+  margin: 0;
+}
+dialog[data-sf-challenge] [data-sf-challenge-escape] button {
+  margin-top: 0.5rem;
+  padding: 0 1rem;
+  background: #ffffff;
+  color: #0b1220;
+  border: 1px solid #8a94b3;
+  border-radius: 0.5rem;
+  font-weight: 600;
+}
+@media (max-width: 40rem) {
+  dialog[data-sf-challenge] {
+    width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: 0;
+    padding: 1rem;
+  }
+  dialog[data-sf-challenge] [data-sf-challenge-frame] {
+    height: calc(100dvh - 8rem);
+  }
+}

package/dist/payments.d.cts

@@ -226,6 +226,14 @@ type EmbeddedPaymentState = {
     retry: () => Promise<void>;
     /** After a rejection: clears the message (the form is remounted by the hook). */
     dismiss: () => void;
+    /**
+     * Leaves a pending 3DS challenge (the buyer's emergency exit). The outcome is UNKNOWN (the bank may still approve the
+     * attempt the buyer just verified), so the attempt key is kept and no new payment can start: the hook verifies the
+     * payment state through `transport.refresh` (status `blocked`, `error.kind = 'payment_in_progress'`, `verifying`).
+     * Only a definitive answer settles it: approved, or rejected / expired / cancelled, which gives a new attempt and a
+     * fresh form. A still-pending challenge does not reopen the dialog.
+     */
+    cancelChallenge: () => void;
 };
 /**
  * Embedded payment state machine for one card form.
@@ -256,10 +264,20 @@ type PaymentChallengeProps = {
     messages?: Partial<PaymentMessages>;
     /** Replace the default iframe (e.g. mount the provider's status screen). */
     render?: (outcome: PaymentOutcome) => ReactNode;
+    /**
+     * The buyer's emergency exit. The dialog is NOT dismissible (no Esc, no backdrop click) while the payment is in
+     * progress; this button only appears after `escapeAfterMs`, so a stuck bank page never traps the buyer (WCAG 2.2.1).
+     */
     onCancel?: () => void;
+    /** How long the dialog stays locked before the exit shows. Default 120000. */
+    escapeAfterMs?: number;
 };
-/** 3DS inside the page: a modal dialog with title and focus trap. Default content is the bank's https iframe. */
-declare function PaymentChallenge({ outcome, locale, messages, render, onCancel }: PaymentChallengeProps): react.JSX.Element;
+/**
+ * 3DS inside the page: a near full-screen modal dialog (`showModal()`: focus trap, inert page) with an accessible title.
+ * Esc and backdrop clicks do nothing until the payment ends (the owner unmounts it). Default content is the bank's
+ * https iframe. Layout comes from `payments.css` (`dialog[data-sf-challenge]`), overridable with your own CSS.
+ */
+declare function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs }: PaymentChallengeProps): react.JSX.Element;
 type PaymentBrickHandle = EmbeddedPaymentState;
 type PaymentBrickProps = Omit<UseEmbeddedPaymentOptions, 'amount'> & {
     /** The server's total. Shown on the button and passed to the provider widget. */
@@ -494,6 +512,8 @@ type MercadoPagoAdapterOptions = {
     getSdk?: () => MercadoPagoCtor | undefined;
     /** Reads the anti-fraud device id. Default: `window.MP_DEVICE_SESSION_ID`. */
     getDeviceSessionId?: () => string | undefined;
+    /** Wait before the single internal re-read of the form data (see `collect`). Default 400. */
+    collectRetryDelayMs?: number;
 };
 /**
  * The only fields that may leave the browser, and the only place that decides it. Anything else the SDK returns
@@ -502,7 +522,8 @@ type MercadoPagoAdapterOptions = {
 declare function sanitizeMercadoPagoFormData(data: Record<string, unknown> | null | undefined): Record<string, unknown>;
 /**
  * Card Payment Brick adapter. The payment button is hidden: the shop's own button calls `collect()` (MP's
- * `getFormData()`), which tokenises inside MP's iframes. Card data never touches this code.
+ * `getFormData()`), which tokenises inside MP's iframes. Card data never touches this code. `collect()` re-reads the
+ * form once if the first read fails, before anything is sent to the shop's server.
  */
 declare function mercadoPagoBricksAdapter(options?: MercadoPagoAdapterOptions): PaymentFormAdapter;
 

package/dist/payments.d.ts

@@ -226,6 +226,14 @@ type EmbeddedPaymentState = {
     retry: () => Promise<void>;
     /** After a rejection: clears the message (the form is remounted by the hook). */
     dismiss: () => void;
+    /**
+     * Leaves a pending 3DS challenge (the buyer's emergency exit). The outcome is UNKNOWN (the bank may still approve the
+     * attempt the buyer just verified), so the attempt key is kept and no new payment can start: the hook verifies the
+     * payment state through `transport.refresh` (status `blocked`, `error.kind = 'payment_in_progress'`, `verifying`).
+     * Only a definitive answer settles it: approved, or rejected / expired / cancelled, which gives a new attempt and a
+     * fresh form. A still-pending challenge does not reopen the dialog.
+     */
+    cancelChallenge: () => void;
 };
 /**
  * Embedded payment state machine for one card form.
@@ -256,10 +264,20 @@ type PaymentChallengeProps = {
     messages?: Partial<PaymentMessages>;
     /** Replace the default iframe (e.g. mount the provider's status screen). */
     render?: (outcome: PaymentOutcome) => ReactNode;
+    /**
+     * The buyer's emergency exit. The dialog is NOT dismissible (no Esc, no backdrop click) while the payment is in
+     * progress; this button only appears after `escapeAfterMs`, so a stuck bank page never traps the buyer (WCAG 2.2.1).
+     */
     onCancel?: () => void;
+    /** How long the dialog stays locked before the exit shows. Default 120000. */
+    escapeAfterMs?: number;
 };
-/** 3DS inside the page: a modal dialog with title and focus trap. Default content is the bank's https iframe. */
-declare function PaymentChallenge({ outcome, locale, messages, render, onCancel }: PaymentChallengeProps): react.JSX.Element;
+/**
+ * 3DS inside the page: a near full-screen modal dialog (`showModal()`: focus trap, inert page) with an accessible title.
+ * Esc and backdrop clicks do nothing until the payment ends (the owner unmounts it). Default content is the bank's
+ * https iframe. Layout comes from `payments.css` (`dialog[data-sf-challenge]`), overridable with your own CSS.
+ */
+declare function PaymentChallenge({ outcome, locale, messages, render, onCancel, escapeAfterMs }: PaymentChallengeProps): react.JSX.Element;
 type PaymentBrickHandle = EmbeddedPaymentState;
 type PaymentBrickProps = Omit<UseEmbeddedPaymentOptions, 'amount'> & {
     /** The server's total. Shown on the button and passed to the provider widget. */
@@ -494,6 +512,8 @@ type MercadoPagoAdapterOptions = {
     getSdk?: () => MercadoPagoCtor | undefined;
     /** Reads the anti-fraud device id. Default: `window.MP_DEVICE_SESSION_ID`. */
     getDeviceSessionId?: () => string | undefined;
+    /** Wait before the single internal re-read of the form data (see `collect`). Default 400. */
+    collectRetryDelayMs?: number;
 };
 /**
  * The only fields that may leave the browser, and the only place that decides it. Anything else the SDK returns
@@ -502,7 +522,8 @@ type MercadoPagoAdapterOptions = {
 declare function sanitizeMercadoPagoFormData(data: Record<string, unknown> | null | undefined): Record<string, unknown>;
 /**
  * Card Payment Brick adapter. The payment button is hidden: the shop's own button calls `collect()` (MP's
- * `getFormData()`), which tokenises inside MP's iframes. Card data never touches this code.
+ * `getFormData()`), which tokenises inside MP's iframes. Card data never touches this code. `collect()` re-reads the
+ * form once if the first read fails, before anything is sent to the shop's server.
  */
 declare function mercadoPagoBricksAdapter(options?: MercadoPagoAdapterOptions): PaymentFormAdapter;
 

package/dist/payments.js

@@ -84,6 +84,7 @@ function sanitizeMercadoPagoFormData(data) {
 function mercadoPagoBricksAdapter(options = {}) {
   const allowed = options.allowedSdkOrigins ?? ["https://sdk.mercadopago.com"];
   const getSdk = options.getSdk ?? (() => typeof window !== "undefined" ? window.MercadoPago : void 0);
+  const retryDelay = options.collectRetryDelayMs ?? 400;
   const getDevice = options.getDeviceSessionId ?? (() => typeof window !== "undefined" ? window.MP_DEVICE_SESSION_ID : void 0);
   return {
     kind: MERCADOPAGO_BRICKS_KIND,
@@ -125,9 +126,21 @@ function mercadoPagoBricksAdapter(options = {}) {
       return {
         async collect() {
           if (gone) throw new Error("payment form is unmounted");
-          const raw = await controller.getFormData();
-          const provider_data = sanitizeMercadoPagoFormData(raw);
-          if (!provider_data.token) throw new Error("payment form incomplete");
+          const read = async () => {
+            const raw = await controller.getFormData();
+            const data = sanitizeMercadoPagoFormData(raw);
+            if (!data.token) throw new Error("payment form incomplete");
+            return data;
+          };
+          let provider_data;
+          try {
+            provider_data = await read();
+          } catch (first) {
+            if (gone) throw first;
+            await new Promise((r) => setTimeout(r, retryDelay));
+            if (gone) throw first;
+            provider_data = await read();
+          }
           const device = getDevice();
           return { provider_data, ...typeof device === "string" && device ? { device_session_id: device } : {} };
         },
@@ -485,7 +498,7 @@ function useEmbeddedPayment(options) {
     autoRetries = 2,
     retryDelayMs = 600,
     pollIntervalMs = 2e3,
-    pollTimeoutMs = 6e4,
+    pollTimeoutMs = 3e5,
     verifyTimeoutMs = 12e4,
     verifyIntervalMs = 2e3,
     scope = "default"
@@ -514,6 +527,7 @@ function useEmbeddedPayment(options) {
   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}`;
@@ -697,6 +711,7 @@ function useEmbeddedPayment(options) {
     (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);
@@ -781,15 +796,21 @@ function useEmbeddedPayment(options) {
       setError(null);
       setOutcome(null);
       emit({ type: "submit" });
+      const withdrawn = () => !alive.current || form.current !== m;
+      const settle = () => {
+        if (alive.current) setStatus((s) => s === "processing" ? "idle" : s);
+      };
       let data;
       try {
         data = await m.collect();
       } catch {
+        if (withdrawn()) return settle();
         emit({ type: "tokenize_error" });
         setError({ kind: "generic", message: live.current.msgs["error.card_data"], retrySameAttempt: false, canRetry: true });
         setStatus("ready");
         return;
       }
+      if (withdrawn()) return settle();
       const attempt = readAttempt();
       setAttemptId(attempt);
       await send(data, attempt, total);
@@ -857,7 +878,7 @@ function useEmbeddedPayment(options) {
     }
     let stop = false;
     const ctl = new AbortController();
-    const until = Date.now() + verifyTimeoutMs;
+    const until = Date.now() + (leftChallenge.current ? Math.max(verifyTimeoutMs, pollTimeoutMs) : verifyTimeoutMs);
     setVerifying(true);
     (async () => {
       let wait = verifyIntervalMs;
@@ -869,6 +890,8 @@ function useEmbeddedPayment(options) {
           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;
@@ -883,11 +906,18 @@ function useEmbeddedPayment(options) {
       ctl.abort();
       setVerifying(false);
     };
-  }, [unknownOutcome, transport, verifyTimeoutMs, verifyIntervalMs, finish]);
+  }, [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,
@@ -903,7 +933,8 @@ function useEmbeddedPayment(options) {
     containerId,
     submit,
     retry,
-    dismiss
+    dismiss,
+    cancelChallenge
   };
 }
 function VoucherCard({ outcome, locale, messages, className }) {
@@ -940,15 +971,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;
@@ -986,7 +1057,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",
       {