@asteby/storefront-react 0.18.0 → 0.20.0

package/dist/payments.css

@@ -89,16 +89,20 @@
 }
 
 /*
- * 3DS challenge (`<PaymentChallenge>`): a near full-screen modal. Colors are fixed on purpose: the bank page inside
+ * 3DS challenge (`<PaymentChallenge>`): a square-ish centered modal (36rem wide, max min(90dvh, 40rem) tall). 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));
+  inset: 0;
+  width: min(36rem, 100% - 2rem);
   max-width: none;
-  max-height: 94dvh;
-  overflow: auto;
+  max-height: min(90dvh, 40rem);
+  display: flex;
+  flex-direction: column;
+  /* Solo el cuerpo (el iframe) scrollea; el diálogo no. */
+  overflow: hidden;
   border: 1px solid #c9d2ee;
   border-radius: 0.75rem;
   background: #ffffff;
@@ -120,7 +124,10 @@ dialog[data-sf-challenge] h2:focus {
 }
 dialog[data-sf-challenge] [data-sf-challenge-frame] {
   display: block;
-  height: min(70dvh, 40rem);
+  flex: 1 1 auto;
+  min-height: 16rem;
+  width: 100%;
+  overflow: auto;
   background: #ffffff;
 }
 dialog[data-sf-challenge] [data-sf-challenge-escape] {
@@ -139,16 +146,10 @@ dialog[data-sf-challenge] [data-sf-challenge-escape] button {
   border-radius: 0.5rem;
   font-weight: 600;
 }
-@media (max-width: 40rem) {
+@media (max-width: 30rem) {
   dialog[data-sf-challenge] {
-    width: 100%;
-    height: 100dvh;
-    max-height: 100dvh;
-    border-radius: 0;
-    border: 0;
+    width: calc(100% - 2rem);
+    max-height: calc(100dvh - 2rem);
     padding: 1rem;
   }
-  dialog[data-sf-challenge] [data-sf-challenge-frame] {
-    height: calc(100dvh - 8rem);
-  }
 }

package/dist/payments.d.cts

@@ -512,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
@@ -520,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

@@ -512,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
@@ -520,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

@@ -1,10 +1,10 @@
 import { isSafeCssValue } from './chunk-672OTUM2.js';
 import { useModalDialog } from './chunk-ZBH7JYU4.js';
 import { findBrand, BrandMark } from './chunk-JNUJGPJC.js';
-import { useResolvedLocale } from './chunk-T52H5HL3.js';
-import './chunk-DQBL2DFJ.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 { useResolvedLocale } from './chunk-T52H5HL3.js';
+import './chunk-DQBL2DFJ.js';
 import { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, useId, useState, useCallback, useSyncExternalStore } from 'react';
 import { paymentMessages, formatMoney, generateIdempotencyKey, paymentOutcome, paymentErrorView, formatVoucherExpiry, classifyPaymentError } from '@asteby/storefront';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -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 } : {} };
         },
@@ -783,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);