@asteby/storefront-react 0.8.0 → 0.10.0

package/dist/payments.cjs

@@ -730,10 +730,10 @@ function paymentCsp(clients, options = {}) {
   const dir = (name, values) => `${name} ${values.join(" ")}`;
   const parts = [
     "default-src 'self'",
-    dir("script-src", ["'self'", ...nonce ? [`'nonce-${nonce}'`] : [], ...origins(sdkOrigins, ...pick("script"), options.extra?.script)]),
+    dir("script-src", ["'self'", ...(options.scriptHashes ?? []).filter((h) => /^'sha(256|384|512)-[A-Za-z0-9+/=]+'$/.test(h)), ...nonce ? [`'nonce-${nonce}'`] : [], ...origins(sdkOrigins, ...pick("script"), options.extra?.script)]),
     dir("frame-src", origins(...pick("frame"), options.extra?.frame).length ? origins(...pick("frame"), options.extra?.frame) : ["'none'"]),
     dir("connect-src", ["'self'", ...origins(...pick("connect"), options.extra?.connect)]),
-    dir("img-src", ["'self'", "data:", ...origins(...pick("img"), options.extra?.img)]),
+    dir("img-src", ["'self'", "data:", ...options.imgHttps ? ["https:"] : [], ...origins(...pick("img"), options.extra?.img)]),
     "style-src 'self' 'unsafe-inline'",
     dir("form-action", ["'self'", ...origins(...pick("form"), options.extra?.form)]),
     "frame-ancestors 'none'",
@@ -746,21 +746,658 @@ function paymentCsp(clients, options = {}) {
 function paymentCspHeaderName(reportOnly) {
   return reportOnly ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy";
 }
+function paymentCspMode(value, production) {
+  const raw = (value ?? "").trim().toLowerCase();
+  if (raw === "off" || raw === "report-only" || raw === "enforce") return raw;
+  return production ? "report-only" : "off";
+}
+function paymentNonce() {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin);
+}
+function paymentCspHeaders(clients, options) {
+  if (options.mode === "off") return {};
+  return { [paymentCspHeaderName(options.mode === "report-only")]: paymentCsp(clients, options) };
+}
+function paymentNonceFromHeaders(headers) {
+  const csp = headers.get("Content-Security-Policy") ?? headers.get("Content-Security-Policy-Report-Only") ?? "";
+  return /'nonce-([A-Za-z0-9+/=_-]+)'/.exec(csp)?.[1];
+}
+
+// src/payments/payment-method.messages.ts
+var ES = {
+  legend: "M\xE9todo de pago",
+  pay: "Pagar",
+  placeOrder: "Realizar el pedido",
+  payRedirect: "Continuar al pago",
+  continue: "Continuar",
+  retryAddress: "Guardar direcci\xF3n y continuar",
+  processing: "Procesando\u2026",
+  redirectNote: "Te llevamos a la p\xE1gina del proveedor para terminar el pago y regresas aqu\xED.",
+  cashPoints: "Elige d\xF3nde pagar en efectivo",
+  cashMore: "Ver m\xE1s puntos de pago",
+  cashNote: "Al hacer el pedido te damos una ficha con la referencia y la fecha l\xEDmite. El pedido se confirma cuando pagas.",
+  secureCard: "Tus datos de tarjeta los captura directamente nuestro proveedor de pagos; la tienda nunca los ve.",
+  pickDeliveryFirst: "Elige primero la entrega para ver el total y pagar con tarjeta.",
+  updatingTotal: "Actualizando el total\u2026",
+  syncFailed: "No pudimos actualizar el total con tu entrega. Puedes continuar al sitio del proveedor para pagar con tarjeta.",
+  quoteChanged: "Las tarifas de env\xEDo se actualizaron. Revisa tu env\xEDo para ver el total.",
+  rebuildCart: "Volver a armar mi carrito",
+  noPaymentTitle: "Por ahora no hay formas de pago disponibles",
+  noPayment: "Intenta de nuevo en unos minutos o escr\xEDbenos para completar tu pedido.",
+  paymentNote: "El pago se procesa de forma segura con nuestro proveedor de pagos.",
+  options: {
+    card: "Tarjeta de cr\xE9dito o d\xE9bito",
+    cash: "Efectivo",
+    wallet: "Cuenta del proveedor de pagos",
+    credits: "Pagos sin tarjeta"
+  }
+};
+var EN = {
+  legend: "Payment method",
+  pay: "Pay",
+  placeOrder: "Place order",
+  payRedirect: "Continue to payment",
+  continue: "Continue",
+  retryAddress: "Save address and continue",
+  processing: "Processing\u2026",
+  redirectNote: "We'll take you to the provider's page to finish paying, then bring you back here.",
+  cashPoints: "Choose where to pay in cash",
+  cashMore: "Show more payment points",
+  cashNote: "When you place the order you get a slip with the reference and the deadline. The order is confirmed once you pay.",
+  secureCard: "Your card details are captured directly by our payment provider; the shop never sees them.",
+  pickDeliveryFirst: "Choose delivery first to see the total and pay by card.",
+  updatingTotal: "Updating the total\u2026",
+  syncFailed: "We couldn't update the total with your delivery. You can continue to the provider's site to pay by card.",
+  quoteChanged: "Shipping rates were updated. Check your delivery to see the total.",
+  rebuildCart: "Rebuild my cart",
+  noPaymentTitle: "No payment methods are available right now",
+  noPayment: "Try again in a few minutes or contact us to complete your order.",
+  paymentNote: "Payment is processed securely by our payment provider.",
+  options: {
+    card: "Credit or debit card",
+    cash: "Cash",
+    wallet: "Payment provider account",
+    credits: "Pay without a card"
+  }
+};
+function paymentMethodMessages(locale, overrides) {
+  const base = (locale ?? "es-MX").toLowerCase().startsWith("en") ? EN : ES;
+  if (!overrides) return base;
+  const { options, ...rest } = overrides;
+  return { ...base, ...rest, options: { ...base.options, ...options } };
+}
+
+// src/checkout/brands.ts
+var B = (key, name, kind, bg, fg, mark, shape) => ({
+  key,
+  name,
+  kind,
+  bg,
+  fg,
+  ...mark ? { mark } : {},
+  ...shape ? { shape } : {}
+});
+var LIST = [
+  // Parcel carriers (Mexico and global).
+  B("fedex", "FedEx", "carrier", "#4D148C", "#FFFFFF"),
+  B("dhl", "DHL", "carrier", "#FFCC00", "#B00410"),
+  B("estafeta", "Estafeta", "carrier", "#C8102E", "#FFFFFF"),
+  B("paquetexpress", "Paquetexpress", "carrier", "#0B4EA2", "#FFFFFF", "Paquet\nexpress"),
+  B("ups", "UPS", "carrier", "#351C15", "#FFB500"),
+  B("redpack", "Redpack", "carrier", "#C8102E", "#FFFFFF"),
+  B("99minutos", "99 Minutos", "carrier", "#00704A", "#FFFFFF", "99"),
+  B("jtexpress", "J&T Express", "carrier", "#C8102E", "#FFFFFF", "J&T"),
+  B("sendex", "Sendex", "carrier", "#003A70", "#FFFFFF"),
+  B("ampm", "AMPM", "carrier", "#1D1D1B", "#FFFFFF"),
+  B("tresguerras", "Tresguerras", "carrier", "#005BAC", "#FFFFFF", "3G"),
+  B("quiken", "Quiken", "carrier", "#1D1D1B", "#FFFFFF"),
+  B("imile", "iMile", "carrier", "#0057B8", "#FFFFFF"),
+  B("carssa", "Carssa", "carrier", "#00529B", "#FFFFFF"),
+  B("correosdemexico", "Correos de M\xE9xico", "carrier", "#7A1E3A", "#FFFFFF", "Correos\nM\xE9xico"),
+  B("usps", "USPS", "carrier", "#333366", "#FFFFFF"),
+  B("canadapost", "Canada Post", "carrier", "#DA291C", "#FFFFFF", "CPC"),
+  // Card networks.
+  B("visa", "Visa", "card", "#1A1F71", "#FFFFFF", "VISA"),
+  B("mastercard", "Mastercard", "card", "#FFFFFF", "#1D1D1B", "MC", "mastercard"),
+  B("amex", "American Express", "card", "#1F72CD", "#FFFFFF", "AMEX"),
+  B("carnet", "Carnet", "card", "#003B71", "#FFFFFF"),
+  // Wallets and payment providers.
+  B("mercadopago", "Mercado Pago", "wallet", "#00B1EA", "#0B1F4E", "mercado\npago"),
+  B("paypal", "PayPal", "wallet", "#003087", "#FFFFFF"),
+  B("clip", "Clip", "wallet", "#FC4C02", "#1D1D1B"),
+  B("applepay", "Apple Pay", "wallet", "#000000", "#FFFFFF", "Pay"),
+  B("googlepay", "Google Pay", "wallet", "#FFFFFF", "#3C4043", "G Pay"),
+  // Cash points and transfers (Mexico).
+  B("oxxo", "OXXO", "cash", "#E21E26", "#FFE600"),
+  B("spei", "SPEI", "bank", "#14365F", "#FFFFFF"),
+  B("stp", "STP", "bank", "#14365F", "#FFFFFF", "SPEI"),
+  B("7eleven", "7-Eleven", "cash", "#00704A", "#FFFFFF", "7-11"),
+  B("circlek", "Circle K", "cash", "#DA291C", "#FFFFFF", "K"),
+  B("soriana", "Soriana", "cash", "#C8102E", "#FFFFFF"),
+  B("extra", "Extra", "cash", "#E35205", "#FFFFFF"),
+  B("kiosko", "Kiosko", "cash", "#C8102E", "#FFFFFF"),
+  B("calimax", "Calimax", "cash", "#D52B1E", "#FFFFFF"),
+  B("farmaciasyza", "Farmacias Yza", "cash", "#0A5A9C", "#FFFFFF", "Yza"),
+  B("chedraui", "Chedraui", "cash", "#0047BB", "#FFFFFF"),
+  B("casaley", "Casa Ley", "cash", "#C8102E", "#FFFFFF", "Ley"),
+  B("telecomm", "Telecomm", "cash", "#6F1D46", "#FFFFFF"),
+  B("walmart", "Walmart", "cash", "#0071CE", "#FFFFFF"),
+  B("santander", "Santander", "bank", "#C00000", "#FFFFFF"),
+  B("bbva", "BBVA", "bank", "#004481", "#FFFFFF"),
+  B("citibanamex", "Citibanamex", "bank", "#004B8D", "#FFFFFF", "Citi"),
+  B("banorte", "Banorte", "bank", "#C8102E", "#FFFFFF")
+];
+var ALIASES = {
+  fedexmx: "fedex",
+  fedexexpress: "fedex",
+  dhlexpress: "dhl",
+  dhlmx: "dhl",
+  paquetexpres: "paquetexpress",
+  paqueteexpress: "paquetexpress",
+  jt: "jtexpress",
+  jandtexpress: "jtexpress",
+  noventaynueveminutos: "99minutos",
+  correos: "correosdemexico",
+  sepomex: "correosdemexico",
+  master: "mastercard",
+  americanexpress: "amex",
+  mercadopagomx: "mercadopago",
+  mp: "mercadopago",
+  clabe: "spei",
+  banktransfer: "spei",
+  seveneleven: "7eleven",
+  "711": "7eleven",
+  circulok: "circlek",
+  yza: "farmaciasyza",
+  bancomer: "bbva",
+  banamex: "citibanamex",
+  ley: "casaley"
+};
+var BY_KEY = new Map(LIST.map((b) => [b.key, b]));
+function brandKey(raw) {
+  const flat = (raw ?? "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]/g, "");
+  const noCountry = flat.endsWith("mexico") && flat !== "correosdemexico" ? flat.slice(0, -6) : flat;
+  return ALIASES[noCountry] ?? (BY_KEY.has(noCountry) ? noCountry : ALIASES[flat] ?? flat);
+}
+function findBrand(raw) {
+  return BY_KEY.get(brandKey(raw)) ?? null;
+}
+function brandName(raw) {
+  const brand = findBrand(raw);
+  if (brand) return brand.name;
+  const text = (raw ?? "").trim();
+  if (!text) return null;
+  if (text !== text.toLowerCase() && text !== text.toUpperCase()) return text;
+  return text.toLowerCase().split(/[\s_-]+/).filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function safeLogo(url) {
+  if (!url) return null;
+  try {
+    return new URL(url).protocol === "https:" ? url : null;
+  } catch {
+    return null;
+  }
+}
+function monogram(raw) {
+  const words = (brandName(raw) ?? raw).split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? words.slice(0, 2).map((w) => w[0]) : [(words[0] ?? "?").slice(0, 2)];
+  return letters.join("").toUpperCase();
+}
+function BrandMark({ brand, logoUrl, size = 24, title, className }) {
+  const height = size;
+  const width = Math.round(size * 1.5);
+  const a11y = title ? { role: "img", "aria-label": title } : { "aria-hidden": true };
+  const logo = safeLogo(logoUrl);
+  const found = findBrand(brand);
+  const key = found?.key ?? "generic";
+  const style = { width, height, flex: "none" };
+  if (logo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: logo,
+        alt: title ?? "",
+        width,
+        height,
+        loading: "lazy",
+        decoding: "async",
+        className,
+        style: { ...style, objectFit: "contain" },
+        "data-sf-brand-mark": key,
+        ...title ? {} : { "aria-hidden": true }
+      }
+    );
+  }
+  const ring = "var(--sf-brand-mark-ring, rgb(127 127 127 / 0.35))";
+  if (found?.shape === "mastercard") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", width, height, className, style, "data-sf-brand-mark": key, focusable: "false", ...a11y, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "47", height: "31", rx: "5", fill: found.bg, stroke: ring }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "16", r: "9", fill: "#EB001B" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "29", cy: "16", r: "9", fill: "#F79E1B" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 8.52a9 9 0 0 1 0 14.96a9 9 0 0 1 0-14.96z", fill: "#FF5F00" })
+    ] });
+  }
+  const text = found ? found.mark ?? found.name : monogram(brand ?? "");
+  const bg = found?.bg ?? "var(--sf-brand-mark-bg, #E7E9EE)";
+  const fg = found?.fg ?? "var(--sf-brand-mark-fg, #2B2F38)";
+  const lines = text.split("\n");
+  const longest = Math.max(...lines.map((l) => l.length));
+  const fontSize = lines.length > 1 ? longest <= 5 ? 11 : 9.5 : longest <= 2 ? 15 : longest <= 4 ? 12 : 10;
+  const fit = (l) => l.length > 5 ? { textLength: 40, lengthAdjust: "spacingAndGlyphs" } : {};
+  const italic = found?.key === "visa" || found?.key === "fedex" ? "italic" : void 0;
+  const common = {
+    textAnchor: "middle",
+    fill: fg,
+    fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif",
+    fontWeight: 800,
+    fontSize,
+    fontStyle: italic
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 48 32", width, height, className, style, "data-sf-brand-mark": key, focusable: "false", ...a11y, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0.5", y: "0.5", width: "47", height: "31", rx: "5", fill: bg, stroke: ring }),
+    lines.length > 1 ? lines.slice(0, 2).map((l, i) => /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: i === 0 ? 15 : 25.5, ...common, ...fit(l), children: l }, i)) : /* @__PURE__ */ jsxRuntime.jsx("text", { x: "24", y: "16", dominantBaseline: "central", letterSpacing: longest <= 4 ? 0.3 : 0, ...common, ...fit(text), children: text })
+  ] });
+}
+var PAYMENT_CHOICE_FIELD = "payment_choice";
+var CASH_POINT_FIELD = "cash_point";
+function formFields(form) {
+  const out = {};
+  if (!form) return out;
+  for (const [k, v] of new FormData(form).entries()) if (typeof v === "string") out[k] = v;
+  return out;
+}
+var useHydrated = () => react.useSyncExternalStore(
+  () => () => {
+  },
+  () => true,
+  () => false
+);
+function PaymentMethodSection(props) {
+  const {
+    choices,
+    amount,
+    scope,
+    formRef,
+    payUrl,
+    statusUrl,
+    delivery = "",
+    deliveryReady = true,
+    syncDelivery,
+    addressFirst = false,
+    retryAddress = false,
+    blocked = false,
+    busy = false,
+    invalid,
+    nonce,
+    methodLabel,
+    icons,
+    brandMarks = true,
+    cardBrands = [],
+    renderAmount,
+    rebuildHref,
+    renderLink,
+    onDone,
+    onAmountChanged,
+    onEvent,
+    classNames: cx = {},
+    testIds = {},
+    hideSubmit,
+    brickProps
+  } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = react.useMemo(() => paymentMethodMessages(locale, props.messages), [locale, props.messages]);
+  const hydrated = useHydrated();
+  const [choiceValue2, setChoiceValue] = react.useState(props.defaultChoice ?? choices.defaultValue);
+  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] } : {};
+  const [fallback, setFallback] = react.useState(false);
+  const [ready, setReady] = react.useState(false);
+  const [processing, setProcessing] = react.useState(false);
+  const [expired, setExpired] = react.useState(false);
+  const brick = react.useRef(null);
+  const cardChosen = selected?.mode === "card" && !retryAddress && !addressFirst;
+  const cardActive = hydrated && cardChosen && !fallback;
+  const wantSync = hydrated && selected !== null && !addressFirst && !retryAddress && deliveryReady && Boolean(syncDelivery);
+  const [sync, setSync] = react.useState(null);
+  const syncRef = react.useRef(syncDelivery);
+  syncRef.current = syncDelivery;
+  react.useEffect(() => {
+    if (!wantSync || !syncRef.current) return;
+    if (sync?.key === delivery && sync.ok) return;
+    let cancelled = false;
+    syncRef.current(delivery).then(
+      (ok) => !cancelled && setSync(ok === "requote" ? { key: delivery, ok: false, requote: true } : { key: delivery, ok }),
+      () => !cancelled && setSync({ key: delivery, ok: false })
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [wantSync, delivery]);
+  const settled = sync?.key === delivery;
+  const synced = !syncDelivery || settled && sync.ok;
+  const requote = wantSync && settled && sync.requote === true;
+  const syncFailed = wantSync && settled && !sync.ok && !requote;
+  const brickReady = cardActive && deliveryReady && synced && !syncFailed;
+  const transport = react.useMemo(
+    () => props.transport ?? createFetchTransport(payUrl, {
+      ...statusUrl ? { refreshUrl: statusUrl } : {},
+      buildBody: (request) => ({ ...request, fields: formFields(formRef.current) })
+    }),
+    [props.transport, payUrl, statusUrl, formRef]
+  );
+  const handleEvent = (e) => {
+    if (e.type === "form_ready") setReady(true);
+    if (e.type === "submit") setProcessing(true);
+    if (e.type === "tokenize_error" || e.type === "retry") setProcessing(e.type === "retry");
+    if (e.type === "result" && e.status === "rejected") setProcessing(false);
+    if (e.type === "error") {
+      setProcessing(false);
+      if (e.kind === "price_mismatch") onAmountChanged?.();
+      if (e.kind === "expired") setExpired(true);
+    }
+    onEvent?.(e);
+  };
+  const total = wantSync && (!settled || requote) ? null : renderAmount ? renderAmount(amount) : storefront.formatMoney(amount, locale);
+  const label = retryAddress ? m.retryAddress : addressFirst ? m.continue : selected?.mode === "plain" || !selected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    m.pay,
+    total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      total
+    ] }) : null
+  ] }) : selected.mode === "redirect" || selected.mode === "card" && (fallback || syncFailed) ? m.payRedirect : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    m.placeOrder,
+    total ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      " ",
+      total
+    ] }) : null
+  ] });
+  function onPayClick(event) {
+    if (!cardActive || syncFailed) return;
+    event.preventDefault();
+    const form = formRef.current;
+    if (form && !form.reportValidity()) return;
+    if (brickReady) void brick.current?.submit();
+  }
+  const cardNotice = (k, node) => k === "syncFailed" ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: cx.alert, "data-sf-pay-notice": "sync-failed", ...tid("syncFailed"), children: node }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("a", { href, className, ...testId ? { "data-testid": testId } : {}, children }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: "pago", className: cx.root, "data-sf-pay-method": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("legend", { className: cx.legend, children: m.legend }),
+    choices.choices.map((choice) => {
+      const { label: rowLabel, hint } = rowText(choice, m, methodLabel);
+      const checked = choice.value === choiceValue2;
+      const slot = choice.option ?? "plain";
+      const icon = icons?.[slot] ?? (brandMarks ? defaultIcon(choice) : null);
+      const marks = brandMarks ? rowMarks(choice, cardBrands) : [];
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.choice, "data-sf-pay-choice": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.radioLabel, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name: PAYMENT_CHOICE_FIELD,
+              value: choice.value,
+              checked,
+              onChange: () => setChoiceValue(choice.value),
+              "aria-invalid": invalid?.has("payment_method") || void 0,
+              "data-mode": choice.mode,
+              required: true,
+              className: cx.radio,
+              ...tid("method")
+            }
+          ),
+          icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.icon, "aria-hidden": "true", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.labelText, children: [
+            rowLabel,
+            hint ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cx.hint, children: [
+              " ",
+              hint
+            ] }) : null
+          ] }),
+          marks.length ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.brands, "data-sf-pay-brands": choice.option ?? "plain", "aria-hidden": "true", children: marks.map((mk) => /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: mk.key, logoUrl: mk.logoUrl ?? null, size: 20 }, mk.key)) }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChoicePanel, { choice, m, invalid, cx, tid, hidden: hydrated && !checked, marks: brandMarks })
+      ] }, choice.value);
+    }),
+    noPayment ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cx.alert, "data-sf-pay-notice": "no-payment", ...tid("noPayment"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: m.noPaymentTitle }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: m.noPayment })
+    ] }) : null,
+    cardChosen && hydrated && choices.cardClient ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.secureCard }),
+      expired && rebuildHref ? Link({ href: rebuildHref, ...cx.rebuild ? { className: cx.rebuild } : {}, children: m.rebuildCart, ...testIds.rebuild ? { testId: testIds.rebuild } : {} }) : null
+    ] }) : null,
+    noPayment || choices.choices.some((c) => c.option) ? null : /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.paymentNote }),
+    hideSubmit ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        onClick: onPayClick,
+        className: cx.submit,
+        disabled: busy || blocked,
+        "aria-disabled": blocked || brickReady && (!ready || processing) || void 0,
+        "aria-busy": processing || void 0,
+        "data-sf-pay-method-submit": true,
+        ...tid("submit"),
+        children: busy || processing ? m.processing : label
+      }
+    )
+  ] });
+}
+function rowText(choice, m, methodLabel) {
+  if (choice.mode === "plain") return methodLabel ? methodLabel(choice.methodKey) : { label: choice.methodKey };
+  return { label: choice.label ?? (choice.option ? m.options[choice.option] : void 0) ?? choice.option ?? choice.methodKey };
+}
+function ChoicePanel({
+  choice,
+  m,
+  invalid,
+  cx,
+  tid,
+  hidden,
+  marks = true
+}) {
+  if (choice.mode === "redirect") {
+    return /* @__PURE__ */ jsxRuntime.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 row = (p, i, first) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.cashPoint, "data-sf-pay-point": true, children: [
+    /* @__PURE__ */ jsxRuntime.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 }),
+    marks ? /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: p.payment_point || p.id, logoUrl: p.logo_url ?? null, size: 22 }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: p.label })
+  ] }, p.id);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.panel, hidden, "data-sf-pay-panel": "cash", ...tid("cash"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("legend", { children: m.cashPoints }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-pay-points": true, children: main.map((p, i) => row(p, i, true)) }),
+      more.length ? /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.cashMore, style: { minHeight: 44 }, children: m.cashMore }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-sf-pay-points": true, children: more.map((p, i) => row(p, i, false)) })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.note, children: m.cashNote })
+  ] });
+}
+var glyph = (d) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", focusable: "false", "data-sf-pay-glyph": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d }) });
+var CARD_GLYPH = "M3 6.5h18v11H3zM3 10h18M6.5 14.5h4";
+var CASH_GLYPH = "M3 7h18v10H3zM12 14.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5zM6 10v4M18 10v4";
+function defaultIcon(choice) {
+  if (choice.option === "card") return glyph(CARD_GLYPH);
+  if (choice.option === "cash") return glyph(CASH_GLYPH);
+  return findBrand(choice.methodKey) ? /* @__PURE__ */ jsxRuntime.jsx(BrandMark, { brand: choice.methodKey, size: 24 }) : null;
+}
+function rowMarks(choice, cardBrands) {
+  if (choice.option === "card") return cardBrands.map((key) => ({ key }));
+  if (choice.option === "cash") {
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const p of choice.points) {
+      const key = p.payment_point || p.id;
+      if (p.group !== "main" || seen.has(key)) continue;
+      seen.add(key);
+      out.push({ key, logoUrl: p.logo_url ?? null });
+      if (out.length === 4) break;
+    }
+    return out;
+  }
+  return [];
+}
+
+// src/payments/choices.ts
+var SEP = "|";
+function choiceValue(methodKey, option) {
+  return option ? `${methodKey}${SEP}${option}` : methodKey;
+}
+function parseChoice(value) {
+  const raw = (value ?? "").trim();
+  if (!raw) return null;
+  const i = raw.lastIndexOf(SEP);
+  if (i === -1) return { methodKey: raw, option: null };
+  const option = raw.slice(i + 1);
+  if (option !== "card" && option !== "cash" && option !== "wallet" && option !== "credits") return null;
+  return { methodKey: raw.slice(0, i), option };
+}
+function modeOf(option) {
+  if (option.redirect || option.key === "wallet" || option.key === "credits") return "redirect";
+  return option.key === "cash" ? "cash" : "card";
+}
+function buildPayChoices(methods, options = {}) {
+  const hidden = new Set(options.hide ?? []);
+  const choices = [];
+  let cardClient = null;
+  let defaultValue = null;
+  for (const method of methods) {
+    if (hidden.has(method.key)) continue;
+    const opts = method.options ?? [];
+    if (opts.length === 0) {
+      const value = choiceValue(method.key, null);
+      choices.push({ value, methodKey: method.key, option: null, mode: "plain", label: null, points: [], maxInstallments: null });
+      if (method.default && !defaultValue) defaultValue = value;
+      continue;
+    }
+    opts.forEach((option, i) => {
+      const mode = modeOf(option);
+      const value = choiceValue(method.key, option.key);
+      choices.push({
+        value,
+        methodKey: method.key,
+        option: option.key,
+        mode,
+        label: option.label?.trim() || null,
+        points: option.key === "cash" ? option.points ?? [] : [],
+        maxInstallments: option.max_installments ?? null
+      });
+      if (mode === "card" && method.client && !cardClient) cardClient = method.client;
+      if (method.default && i === 0 && !defaultValue) defaultValue = value;
+    });
+  }
+  const usable = choices.map((c) => c.mode === "card" && !cardClient ? { ...c, mode: "redirect" } : c);
+  return { choices: usable, cardClient, defaultValue: defaultValue ?? usable[0]?.value ?? null };
+}
+function cashProviderData(points, pointId) {
+  const point = points.find((p) => p.id === pointId) ?? (pointId ? null : points[0]);
+  if (!point) return null;
+  return {
+    payment_method_id: point.payment_method_id,
+    ...point.payment_point ? { payment_point: point.payment_point } : {}
+  };
+}
+function checkoutToAttempt(result) {
+  const { checkout, payment, order } = result;
+  const action = payment.action ?? null;
+  const base = { checkout, ...order ? { order } : {} };
+  const status = (checkout.status ?? "").toLowerCase();
+  if (status === "paid" || status === "converted") return { ...base, payment: { provider: payment.provider, status: "paid", outcome: "approved" } };
+  if (status === "cancelled" || status === "canceled") return { ...base, payment: { provider: payment.provider, status: "cancelled" } };
+  if (status === "expired") return { ...base, payment: { provider: payment.provider, status: "expired" } };
+  if (status === "failed") {
+    const decline = payment.decline_code ?? "declined";
+    return { ...base, payment: { provider: payment.provider, status: "failed", outcome: "rejected", decline_code: decline, retryable: true } };
+  }
+  if (action?.type === "challenge") return { ...base, payment: { provider: payment.provider, status: "requires_action", outcome: "challenge", action } };
+  return { ...base, payment: { provider: payment.provider, status: "pending", outcome: "pending", action: action ?? { type: "none" } } };
+}
+function payErrorResponse(err) {
+  const status = typeof err.status === "number" && err.status >= 400 ? err.status : 503;
+  let code = err.code ?? "server_error";
+  if (status === 409 && err.field === "payment_in_progress") code = "payment_in_progress";
+  if (status === 429) code = "too_many_attempts";
+  if (status === 422 && err.field === "expected_total") code = "price_mismatch";
+  return { status, body: { error: { code, message: err.message ?? "", ...err.details !== void 0 ? { details: err.details } : {} } } };
+}
+function voucherRows(voucher, labels, locale) {
+  if (!voucher) return [];
+  const rows = [];
+  if (voucher.payment_point) rows.push([labels.point, String(voucher.payment_point).slice(0, 60)]);
+  if (voucher.reference) rows.push([labels.reference, String(voucher.reference).slice(0, 80)]);
+  if (voucher.clabe) rows.push([labels.clabe, String(voucher.clabe).slice(0, 40)]);
+  if (voucher.barcode) rows.push([labels.barcode, String(voucher.barcode).slice(0, 80)]);
+  if (voucher.expires_at) {
+    const d = new Date(voucher.expires_at);
+    if (!Number.isNaN(d.getTime())) {
+      rows.push([labels.expires, new Intl.DateTimeFormat(locale, { dateStyle: "long", timeStyle: "short", timeZone: "UTC" }).format(d) + " UTC"]);
+    }
+  }
+  return rows;
+}
 
+exports.CASH_POINT_FIELD = CASH_POINT_FIELD;
 exports.MERCADOPAGO_BRICKS_KIND = MERCADOPAGO_BRICKS_KIND;
+exports.PAYMENT_CHOICE_FIELD = PAYMENT_CHOICE_FIELD;
 exports.PAYMENT_THEME_TOKENS = PAYMENT_THEME_TOKENS;
 exports.PaymentBrick = PaymentBrick;
 exports.PaymentChallenge = PaymentChallenge;
 exports.PaymentHttpError = PaymentHttpError;
+exports.PaymentMethodSection = PaymentMethodSection;
 exports.VoucherCard = VoucherCard;
+exports.buildPayChoices = buildPayChoices;
+exports.cashProviderData = cashProviderData;
+exports.checkoutToAttempt = checkoutToAttempt;
+exports.choiceValue = choiceValue;
 exports.createFetchTransport = createFetchTransport;
+exports.formFields = formFields;
 exports.loadPaymentSdk = loadPaymentSdk;
 exports.mercadoPagoBricksAdapter = mercadoPagoBricksAdapter;
+exports.parseChoice = parseChoice;
+exports.payErrorResponse = payErrorResponse;
 exports.paymentCsp = paymentCsp;
 exports.paymentCspHeaderName = paymentCspHeaderName;
+exports.paymentCspHeaders = paymentCspHeaders;
+exports.paymentCspMode = paymentCspMode;
+exports.paymentMethodMessages = paymentMethodMessages;
+exports.paymentNonce = paymentNonce;
+exports.paymentNonceFromHeaders = paymentNonceFromHeaders;
 exports.readPaymentTheme = readPaymentTheme;
 exports.resetPaymentSdkCache = resetPaymentSdkCache;
 exports.sanitizeMercadoPagoFormData = sanitizeMercadoPagoFormData;
 exports.useEmbeddedPayment = useEmbeddedPayment;
+exports.voucherRows = voucherRows;
 //# sourceMappingURL=payments.cjs.map
 //# sourceMappingURL=payments.cjs.map