@asteby/storefront-react 0.11.0 → 0.12.0

package/dist/payments.css

@@ -45,13 +45,26 @@
   display: inline-block;
   vertical-align: middle;
 }
+/* The mark of a provider row (Mercado Pago…) is as wide as its logo: in line between the radio and the text, never over them. */
+[data-sf-pay-method] [data-sf-pay-icon='mark'] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  width: auto;
+  height: auto;
+}
 /* The open cash row already lists every point with its mark: the preview would repeat them. */
 [data-sf-pay-method] [data-sf-pay-choice]:has(input[name='payment_choice']:checked) [data-sf-pay-brands='cash'] {
   display: none;
 }
+/* The card form opens inside its row: a little air between the row and the provider form. */
+[data-sf-pay-method] [data-sf-pay-card] [data-sf-pay-container] {
+  margin-block: 0.25rem;
+}
 @media (max-width: 24rem) {
   /* Narrow phones: the row text wins over the preview marks. */
+  /* !important: the logo plate sets its own inline `display`. */
   [data-sf-pay-method] [data-sf-pay-choice] [data-sf-pay-brands] [data-sf-brand-mark]:nth-child(n + 3) {
-    display: none;
+    display: none !important;
   }
 }

package/dist/payments.d.cts

@@ -33,6 +33,8 @@ type PaymentFormMountOptions = {
     locale?: string;
     /** Visual tokens read from CSS variables (see `readPaymentTheme`). */
     theme?: Record<string, string>;
+    /** Light or dark page (see `readPaymentScheme`): the adapter picks the provider's matching base theme. */
+    colorScheme?: 'light' | 'dark';
     onReady: () => void;
     onError: (error: PaymentFormError) => void;
 };
@@ -168,6 +170,8 @@ type UseEmbeddedPaymentOptions = {
     onEvent?: (event: PaymentEvent) => void;
     /** Overrides the theme read from `--sf-pay-*` tokens. */
     theme?: Record<string, string>;
+    /** Overrides the light / dark scheme read from the page (`--sf-pay-scheme` or `color-scheme`). */
+    colorScheme?: 'light' | 'dark';
     /** Test hooks. */
     newAttemptId?: () => string;
 };
@@ -326,6 +330,10 @@ type PaymentMethodMessages = {
     pay: string;
     /** Button label for card and cash, before the total. */
     placeOrder: string;
+    /** Button label for cash (the buyer gets a payment slip and pays later), before the total. */
+    placeOrderCash: string;
+    /** Button label while no delivery is chosen yet. */
+    chooseDelivery: string;
     /** Button label when the buyer leaves for the provider's page. */
     payRedirect: string;
     /** Button label for the first step (address) of a two-step checkout. */
@@ -443,6 +451,22 @@ type PaymentMethodSectionProps = {
     transport?: PaymentTransport;
     /** Extra props for the card form (`adapter`, `adapters`, `messages`, `minHeight`, `storage`, timeouts...). */
     brickProps?: Partial<Omit<PaymentBrickProps, 'client' | 'amount' | 'transport' | 'onResult' | 'onEvent' | 'onFallback'>>;
+    /**
+     * Remember the chosen row (and cash point) for this `scope` in `sessionStorage`, so a reload, the "back" button from
+     * the provider or the address step does not ask to choose again. Used only while that row is still published.
+     * Default true (needs `scope`); `false` turns it off. Nothing personal is stored: only the row value.
+     */
+    rememberChoice?: boolean;
+    /**
+     * Cash points shown before "more payment points". Default: every point the provider marks `main`. With a number, the
+     * first N `main` points show and the rest join the "more" list (a remembered point inside it opens the list).
+     */
+    cashPointsVisible?: number;
+    /**
+     * Name of the page form field with the buyer's e-mail. Its value is handed to the card form, so the provider does not
+     * ask for the e-mail again. Default `email`; `null` to never pass it. `brickProps.email` wins.
+     */
+    payerEmailField?: string | null;
 };
 /**
  * "Payment method", hybrid. Card: the provider's secure form INSIDE the page (`PaymentBrick`) with the shop's own
@@ -470,11 +494,23 @@ declare const PAYMENT_THEME_TOKENS: {
     readonly '--sf-pay-success': "successColor";
     readonly '--sf-pay-outline': "outlinePrimaryColor";
     readonly '--sf-pay-radius': "borderRadiusMedium";
+    readonly '--sf-pay-radius-small': "borderRadiusSmall";
+    readonly '--sf-pay-radius-large': "borderRadiusLarge";
+    readonly '--sf-pay-outline-secondary': "outlineSecondaryColor";
+    readonly '--sf-pay-primary-variant': "baseColorFirstVariant";
+    readonly '--sf-pay-input-border-width': "inputBorderWidth";
+    readonly '--sf-pay-form-padding': "formPadding";
 };
 /**
  * Reads the `--sf-pay-*` tokens from an element's computed style, so the provider form follows the shop's
  * theme without the shop copying colors into JavaScript. Unsafe or empty values are skipped.
  */
 declare function readPaymentTheme(el: Element | null | undefined, tokens?: Record<string, string>): Record<string, string>;
+/**
+ * Light or dark for the provider form, so it does not paint a white card inside a dark page. Order: the
+ * `--sf-pay-scheme` token (`light` / `dark`), then the element's `color-scheme` (`light dark` follows the system
+ * preference). `null` when nothing says it (the provider default).
+ */
+declare function readPaymentScheme(el: Element | null | undefined): 'light' | 'dark' | null;
 
-export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentScheme, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };

package/dist/payments.d.ts

@@ -33,6 +33,8 @@ type PaymentFormMountOptions = {
     locale?: string;
     /** Visual tokens read from CSS variables (see `readPaymentTheme`). */
     theme?: Record<string, string>;
+    /** Light or dark page (see `readPaymentScheme`): the adapter picks the provider's matching base theme. */
+    colorScheme?: 'light' | 'dark';
     onReady: () => void;
     onError: (error: PaymentFormError) => void;
 };
@@ -168,6 +170,8 @@ type UseEmbeddedPaymentOptions = {
     onEvent?: (event: PaymentEvent) => void;
     /** Overrides the theme read from `--sf-pay-*` tokens. */
     theme?: Record<string, string>;
+    /** Overrides the light / dark scheme read from the page (`--sf-pay-scheme` or `color-scheme`). */
+    colorScheme?: 'light' | 'dark';
     /** Test hooks. */
     newAttemptId?: () => string;
 };
@@ -326,6 +330,10 @@ type PaymentMethodMessages = {
     pay: string;
     /** Button label for card and cash, before the total. */
     placeOrder: string;
+    /** Button label for cash (the buyer gets a payment slip and pays later), before the total. */
+    placeOrderCash: string;
+    /** Button label while no delivery is chosen yet. */
+    chooseDelivery: string;
     /** Button label when the buyer leaves for the provider's page. */
     payRedirect: string;
     /** Button label for the first step (address) of a two-step checkout. */
@@ -443,6 +451,22 @@ type PaymentMethodSectionProps = {
     transport?: PaymentTransport;
     /** Extra props for the card form (`adapter`, `adapters`, `messages`, `minHeight`, `storage`, timeouts...). */
     brickProps?: Partial<Omit<PaymentBrickProps, 'client' | 'amount' | 'transport' | 'onResult' | 'onEvent' | 'onFallback'>>;
+    /**
+     * Remember the chosen row (and cash point) for this `scope` in `sessionStorage`, so a reload, the "back" button from
+     * the provider or the address step does not ask to choose again. Used only while that row is still published.
+     * Default true (needs `scope`); `false` turns it off. Nothing personal is stored: only the row value.
+     */
+    rememberChoice?: boolean;
+    /**
+     * Cash points shown before "more payment points". Default: every point the provider marks `main`. With a number, the
+     * first N `main` points show and the rest join the "more" list (a remembered point inside it opens the list).
+     */
+    cashPointsVisible?: number;
+    /**
+     * Name of the page form field with the buyer's e-mail. Its value is handed to the card form, so the provider does not
+     * ask for the e-mail again. Default `email`; `null` to never pass it. `brickProps.email` wins.
+     */
+    payerEmailField?: string | null;
 };
 /**
  * "Payment method", hybrid. Card: the provider's secure form INSIDE the page (`PaymentBrick`) with the shop's own
@@ -470,11 +494,23 @@ declare const PAYMENT_THEME_TOKENS: {
     readonly '--sf-pay-success': "successColor";
     readonly '--sf-pay-outline': "outlinePrimaryColor";
     readonly '--sf-pay-radius': "borderRadiusMedium";
+    readonly '--sf-pay-radius-small': "borderRadiusSmall";
+    readonly '--sf-pay-radius-large': "borderRadiusLarge";
+    readonly '--sf-pay-outline-secondary': "outlineSecondaryColor";
+    readonly '--sf-pay-primary-variant': "baseColorFirstVariant";
+    readonly '--sf-pay-input-border-width': "inputBorderWidth";
+    readonly '--sf-pay-form-padding': "formPadding";
 };
 /**
  * Reads the `--sf-pay-*` tokens from an element's computed style, so the provider form follows the shop's
  * theme without the shop copying colors into JavaScript. Unsafe or empty values are skipped.
  */
 declare function readPaymentTheme(el: Element | null | undefined, tokens?: Record<string, string>): Record<string, string>;
+/**
+ * Light or dark for the provider form, so it does not paint a white card inside a dark page. Order: the
+ * `--sf-pay-scheme` token (`light` / `dark`), then the element's `color-scheme` (`light dark` follows the system
+ * preference). `null` when nothing says it (the provider default).
+ */
+declare function readPaymentScheme(el: Element | null | undefined): 'light' | 'dark' | null;
 
-export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+export { CASH_POINT_FIELD, type EmbeddedPaymentState, type EmbeddedPaymentStatus, type FetchTransportOptions, type LoadScriptOptions, MERCADOPAGO_BRICKS_KIND, type MercadoPagoAdapterOptions, type MercadoPagoCtor, type MountedPaymentForm, PAYMENT_CHOICE_FIELD, PAYMENT_THEME_TOKENS, PayChoices, PaymentBrick, type PaymentBrickHandle, type PaymentBrickProps, PaymentChallenge, type PaymentChallengeProps, type PaymentEvent, type PaymentFallbackReason, type PaymentFormAdapter, type PaymentFormData, type PaymentFormError, type PaymentFormMountOptions, PaymentHttpError, type PaymentMethodClassNames, type PaymentMethodMessages, PaymentMethodSection, type PaymentMethodSectionProps, type PaymentMethodTestIds, type PaymentSubmitRequest, type PaymentTransport, type UseEmbeddedPaymentOptions, VoucherCard, type VoucherCardProps, createFetchTransport, formFields, loadPaymentSdk, mercadoPagoBricksAdapter, paymentMethodMessages, readPaymentScheme, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };

package/dist/payments.js

@@ -1,5 +1,5 @@
 import { isSafeCssValue } from './chunk-672OTUM2.js';
-import { BrandMark, findBrand } from './chunk-3ZJTDFHE.js';
+import { findBrand, BrandMark } from './chunk-ODIQR6TG.js';
 export { buildPayChoices, cashProviderData, checkoutToAttempt, choiceValue, parseChoice, payErrorResponse, paymentCsp, paymentCspHeaderName, paymentCspHeaders, paymentCspMode, paymentNonce, paymentNonceFromHeaders, voucherRows } from './chunk-ISEOCKIR.js';
 import { useModalDialog } from './chunk-ZBH7JYU4.js';
 import { useResolvedLocale } from './chunk-T52H5HL3.js';
@@ -108,7 +108,8 @@ function mercadoPagoBricksAdapter(options = {}) {
             // fila de método de pago y se veía cortado (p. ej. AMEX partido). hideFormTitle oculta
             // la línea del título y las banderas.
             hideFormTitle: true,
-            style: { theme: "default", ...opts.theme && Object.keys(opts.theme).length ? { customVariables: opts.theme } : {} }
+            // Dark page: the Brick's `dark` base theme, so it does not draw a white card; the shop tokens refine it.
+            style: { theme: opts.colorScheme === "dark" ? "dark" : "default", ...opts.theme && Object.keys(opts.theme).length ? { customVariables: opts.theme } : {} }
           }
         },
         callbacks: {
@@ -152,7 +153,13 @@ var PAYMENT_THEME_TOKENS = {
   "--sf-pay-error": "errorColor",
   "--sf-pay-success": "successColor",
   "--sf-pay-outline": "outlinePrimaryColor",
-  "--sf-pay-radius": "borderRadiusMedium"
+  "--sf-pay-radius": "borderRadiusMedium",
+  "--sf-pay-radius-small": "borderRadiusSmall",
+  "--sf-pay-radius-large": "borderRadiusLarge",
+  "--sf-pay-outline-secondary": "outlineSecondaryColor",
+  "--sf-pay-primary-variant": "baseColorFirstVariant",
+  "--sf-pay-input-border-width": "inputBorderWidth",
+  "--sf-pay-form-padding": "formPadding"
 };
 function readPaymentTheme(el, tokens = PAYMENT_THEME_TOKENS) {
   const out = {};
@@ -164,6 +171,19 @@ function readPaymentTheme(el, tokens = PAYMENT_THEME_TOKENS) {
   }
   return out;
 }
+function readPaymentScheme(el) {
+  if (!el || typeof getComputedStyle !== "function") return null;
+  const style = getComputedStyle(el);
+  const token = style.getPropertyValue("--sf-pay-scheme").trim();
+  if (token === "dark" || token === "light") return token;
+  const cs = (style.getPropertyValue("color-scheme") || style.colorScheme || "").toLowerCase();
+  const dark = /\bdark\b/.test(cs);
+  const light = /\blight\b/.test(cs);
+  if (dark && !light) return "dark";
+  if (light && !dark) return "light";
+  if (dark && light && typeof matchMedia === "function") return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return null;
+}
 
 // src/payments/use-embedded-payment.ts
 var DEFAULT_ADAPTERS = {};
@@ -289,6 +309,7 @@ function useEmbeddedPayment(options) {
         await adapter.load(client, { ...live.current.nonce ? { nonce: live.current.nonce } : {}, timeoutMs: sdkTimeoutMs });
         if (stale()) return;
         const theme = live.current.theme ?? readPaymentTheme(container);
+        const colorScheme = live.current.colorScheme ?? readPaymentScheme(container);
         const m = await adapter.mount({
           container,
           client,
@@ -296,6 +317,7 @@ function useEmbeddedPayment(options) {
           ...live.current.email ? { email: live.current.email } : {},
           ...live.current.locale ? { locale: live.current.locale } : {},
           theme,
+          ...colorScheme ? { colorScheme } : {},
           onReady: () => {
             if (stale()) return;
             clearTimeout(timer);
@@ -649,6 +671,8 @@ 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",
@@ -677,6 +701,8 @@ 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",
@@ -715,6 +741,26 @@ function formFields(form) {
   for (const [k, v] of new FormData(form).entries()) if (typeof v === "string") out[k] = v;
   return out;
 }
+var CHOICE_STORAGE_PREFIX = "sf:pay-choice:";
+function readStoredChoice(scope) {
+  if (!scope || typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(CHOICE_STORAGE_PREFIX + scope);
+    if (!raw) return null;
+    const v = JSON.parse(raw);
+    return typeof v?.choice === "string" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredChoice(scope, value) {
+  if (!scope || typeof window === "undefined") return;
+  try {
+    window.sessionStorage.setItem(CHOICE_STORAGE_PREFIX + scope, JSON.stringify(value));
+  } catch {
+  }
+}
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var useHydrated = () => useSyncExternalStore(
   () => () => {
   },
@@ -751,12 +797,37 @@ function PaymentMethodSection(props) {
     classNames: cx = {},
     testIds = {},
     hideSubmit,
-    brickProps
+    brickProps,
+    rememberChoice = true,
+    cashPointsVisible,
+    payerEmailField = "email"
   } = props;
   const locale = useResolvedLocale(props.locale);
   const m = useMemo(() => paymentMethodMessages(locale, props.messages), [locale, props.messages]);
   const hydrated = useHydrated();
-  const [choiceValue2, setChoiceValue] = useState(props.defaultChoice ?? choices.defaultValue);
+  const [choiceValue2, setChoiceValueState] = useState(props.defaultChoice ?? choices.defaultValue);
+  const remember = rememberChoice && Boolean(scope);
+  const rootRef = useRef(null);
+  const [storedPoint, setStoredPoint] = useState(null);
+  const setChoiceValue = (v) => {
+    setChoiceValueState(v);
+    if (remember) writeStoredChoice(scope, { choice: v, point: readCheckedPoint(rootRef.current) });
+  };
+  useEffect(() => {
+    if (!remember) return;
+    const stored = readStoredChoice(scope);
+    if (!stored) return;
+    if (choices.choices.some((c) => c.value === stored.choice)) setChoiceValueState(stored.choice);
+    if (stored.point) setStoredPoint(stored.point);
+  }, [remember, scope]);
+  useEffect(() => {
+    if (!storedPoint || !rootRef.current) return;
+    const input = Array.from(rootRef.current.querySelectorAll(`input[name="${CASH_POINT_FIELD}"]`)).find((i) => i.value === storedPoint);
+    if (input) input.checked = true;
+  }, [storedPoint, choiceValue2]);
+  const onPointChange = (point) => {
+    if (remember && choiceValue2) writeStoredChoice(scope, { choice: choiceValue2, point });
+  };
   const selected = choices.choices.find((c) => c.value === choiceValue2) ?? null;
   const noPayment = choices.choices.length === 0;
   const tid = (k) => testIds[k] ? { "data-testid": testIds[k] } : {};
@@ -807,8 +878,33 @@ function PaymentMethodSection(props) {
     }
     onEvent?.(e);
   };
+  const [payerEmail, setPayerEmail] = useState(void 0);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!payerEmailField || !form) return;
+    const selector = `[name="${typeof CSS !== "undefined" && CSS.escape ? CSS.escape(payerEmailField) : payerEmailField}"]`;
+    const read = () => {
+      const v = String(form.querySelector(selector)?.value ?? "").trim();
+      setPayerEmail(EMAIL_RE.test(v) ? v : void 0);
+    };
+    read();
+    const onChange = (e) => {
+      if (e.target?.name === payerEmailField) read();
+    };
+    form.addEventListener("change", onChange);
+    return () => form.removeEventListener("change", onChange);
+  }, [formRef, payerEmailField]);
   const total = wantSync && (!settled || requote) ? null : renderAmount ? renderAmount(amount) : formatMoney(amount, locale);
-  const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : !deliveryReady && selected ? (
+    // Says what is missing instead of a button that silently does nothing.
+    m.chooseDelivery
+  ) : selected?.mode === "cash" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    m.placeOrderCash,
+    total ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      total
+    ] }) : null
+  ] }) : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
     m.pay,
     total ? /* @__PURE__ */ jsxs(Fragment, { children: [
       " ",
@@ -822,6 +918,11 @@ function PaymentMethodSection(props) {
     ] }) : null
   ] });
   function onPayClick(event) {
+    if (!addressFirst && !retryAddress && !deliveryReady && selected) {
+      event.preventDefault();
+      formRef.current?.reportValidity();
+      return;
+    }
     if (!cardActive || syncFailed) return;
     event.preventDefault();
     const form = formRef.current;
@@ -830,7 +931,7 @@ function PaymentMethodSection(props) {
   }
   const cardNotice = (k, node) => k === "syncFailed" ? /* @__PURE__ */ jsx("p", { role: "alert", className: cx.alert, "data-sf-pay-notice": "sync-failed", ...tid("syncFailed"), children: node }) : /* @__PURE__ */ jsx("p", { role: "status", className: cx.status, "data-sf-pay-notice": k, ...k === "syncing" ? tid("syncing") : {}, children: node });
   const Link = renderLink ?? (({ href, className, children, testId }) => /* @__PURE__ */ jsx("a", { href, className, ...testId ? { "data-testid": testId } : {}, children }));
-  return /* @__PURE__ */ jsxs("fieldset", { id: "pago", className: cx.root, "data-sf-pay-method": true, children: [
+  return /* @__PURE__ */ jsxs("fieldset", { id: "pago", ref: rootRef, className: cx.root, "data-sf-pay-method": true, children: [
     /* @__PURE__ */ jsx("legend", { className: cx.legend, children: m.legend }),
     choices.choices.map((choice) => {
       const { label: rowLabel, hint } = rowText(choice, m, methodLabel);
@@ -838,6 +939,7 @@ function PaymentMethodSection(props) {
       const slot = choice.option ?? "plain";
       const icon = icons?.[slot] ?? (brandMarks ? defaultIcon(choice) : null);
       const marks = brandMarks ? rowMarks(choice, cardBrands) : [];
+      const brandMarkIcon = !icons?.[slot] && brandMarks && choice.option !== "card" && choice.option !== "cash" && !!findBrand(choice.methodKey);
       return /* @__PURE__ */ jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
         /* @__PURE__ */ jsxs("label", { className: cx.radioLabel, children: [
           /* @__PURE__ */ jsx(
@@ -855,7 +957,11 @@ function PaymentMethodSection(props) {
               ...tid("method")
             }
           ),
-          icon ? /* @__PURE__ */ jsx("span", { className: cx.icon, "aria-hidden": "true", children: icon }) : null,
+          icon ? (
+            // The default mark of a provider row is as wide as its logo: it does not take the shop's `icon` box (a fixed
+            // square would let the logo spill over the radio and the text).
+            /* @__PURE__ */ jsx("span", { className: brandMarkIcon ? void 0 : cx.icon, "data-sf-pay-icon": brandMarkIcon ? "mark" : void 0, "aria-hidden": "true", children: icon })
+          ) : null,
           /* @__PURE__ */ jsxs("span", { className: cx.labelText, children: [
             rowLabel,
             hint ? /* @__PURE__ */ jsxs("span", { className: cx.hint, children: [
@@ -865,38 +971,40 @@ 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 })
+        /* @__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: [
+          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(
+            PaymentBrick,
+            {
+              ...brickProps,
+              ref: brick,
+              client: choices.cardClient,
+              amount,
+              transport,
+              ...nonce ? { nonce } : {},
+              locale,
+              ...scope ? { scope } : {},
+              ...payerEmail && !brickProps?.email ? { email: payerEmail } : {},
+              enabled: brickReady,
+              ...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
+        ] }) : null
       ] }, choice.value);
     }),
     noPayment ? /* @__PURE__ */ jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
       /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: m.noPaymentTitle }) }),
       /* @__PURE__ */ jsx("p", { children: m.noPayment })
     ] }) : null,
-    cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxs("div", { className: cx.brickWrap, "data-sf-pay-card": true, ...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(
-        PaymentBrick,
-        {
-          ...brickProps,
-          ref: brick,
-          client: choices.cardClient,
-          amount,
-          transport,
-          ...nonce ? { nonce } : {},
-          locale,
-          ...scope ? { scope } : {},
-          enabled: brickReady,
-          ...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);
-          }
-        }
-      ) : 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
-    ] }) : null,
     noPayment || choices.choices.some((c) => c.option) ? null : /* @__PURE__ */ jsx("p", { className: cx.note, children: m.paymentNote }),
     hideSubmit ? null : /* @__PURE__ */ jsx(
       "button",
@@ -925,16 +1033,33 @@ function ChoicePanel({
   cx,
   tid,
   hidden,
-  marks = true
+  marks = true,
+  visible,
+  openMore,
+  onPointChange
 }) {
   if (choice.mode === "redirect") {
     return /* @__PURE__ */ jsx("p", { className: cx.panel, hidden, "data-sf-pay-panel": "redirect", ...tid("redirectNote"), children: m.redirectNote });
   }
   if (choice.mode !== "cash") return null;
-  const main = choice.points.filter((p) => p.group === "main");
-  const more = choice.points.filter((p) => p.group !== "main");
+  const allMain = choice.points.filter((p) => p.group === "main");
+  const cut = typeof visible === "number" && visible > 0 ? visible : allMain.length;
+  const main = allMain.slice(0, cut);
+  const more = [...allMain.slice(cut), ...choice.points.filter((p) => p.group !== "main")];
+  const moreOpen = Boolean(openMore && more.some((p) => p.id === openMore));
   const row = (p, i, first) => /* @__PURE__ */ jsxs("label", { className: cx.cashPoint, "data-sf-pay-point": true, children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", name: CASH_POINT_FIELD, value: p.id, defaultChecked: first && i === 0, className: cx.cashPointInput, "aria-invalid": invalid?.has("cash_point") || void 0 }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        name: CASH_POINT_FIELD,
+        value: p.id,
+        defaultChecked: first && i === 0,
+        className: cx.cashPointInput,
+        "aria-invalid": invalid?.has("cash_point") || void 0,
+        ...onPointChange ? { onChange: () => onPointChange(p.id) } : {}
+      }
+    ),
     marks ? /* @__PURE__ */ jsx(BrandMark, { brand: p.payment_point || p.id, logoUrl: p.logo_url ?? null, size: 22 }) : null,
     /* @__PURE__ */ jsx("span", { children: p.label })
   ] }, p.id);
@@ -942,7 +1067,7 @@ function ChoicePanel({
     /* @__PURE__ */ jsxs("fieldset", { children: [
       /* @__PURE__ */ jsx("legend", { children: m.cashPoints }),
       /* @__PURE__ */ jsx("div", { "data-sf-pay-points": true, children: main.map((p, i) => row(p, i, true)) }),
-      more.length ? /* @__PURE__ */ jsxs("details", { children: [
+      more.length ? /* @__PURE__ */ jsxs("details", { ...moreOpen ? { open: true } : {}, children: [
         /* @__PURE__ */ jsx("summary", { className: cx.cashMore, style: { minHeight: 44 }, children: m.cashMore }),
         /* @__PURE__ */ jsx("div", { "data-sf-pay-points": true, children: more.map((p, i) => row(p, i, false)) })
       ] }) : null
@@ -958,6 +1083,10 @@ function defaultIcon(choice) {
   if (choice.option === "cash") return glyph(CASH_GLYPH);
   return findBrand(choice.methodKey) ? /* @__PURE__ */ jsx(BrandMark, { brand: choice.methodKey, size: 24 }) : null;
 }
+function readCheckedPoint(root) {
+  const el = root?.querySelector(`input[name="${CASH_POINT_FIELD}"]:checked`);
+  return el?.value ?? null;
+}
 function rowMarks(choice, cardBrands) {
   if (choice.option === "card") return cardBrands.map((key) => ({ key }));
   if (choice.option === "cash") {
@@ -975,6 +1104,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, readPaymentTheme, resetPaymentSdkCache, sanitizeMercadoPagoFormData, useEmbeddedPayment };
+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 };
 //# sourceMappingURL=payments.js.map
 //# sourceMappingURL=payments.js.map