@asteby/storefront-react 0.4.0 → 0.6.0

package/dist/payments.cjs

@@ -0,0 +1,766 @@
+'use strict';
+
+var react = require('react');
+var storefront = require('@asteby/storefront');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/payments/payment-brick.tsx
+function useModalDialog({ open, onClose, initialFocus }) {
+  const ref = react.useRef(null);
+  const opener = react.useRef(null);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el || !open) return;
+    opener.current = typeof document !== "undefined" ? document.activeElement : null;
+    const hasModal = typeof el.showModal === "function";
+    if (!el.open) {
+      if (hasModal) {
+        try {
+          el.showModal();
+        } catch {
+          el.setAttribute("open", "");
+        }
+      } else el.setAttribute("open", "");
+    }
+    const target = initialFocus?.current ?? el.querySelector("[data-sf-autofocus]") ?? el;
+    if (!target.hasAttribute("tabindex") && target === el) el.setAttribute("tabindex", "-1");
+    target.focus({ preventScroll: true });
+    const onCancel = (e) => {
+      e.preventDefault();
+      onCloseRef.current("esc");
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseRef.current("esc");
+      }
+    };
+    el.addEventListener("cancel", onCancel);
+    if (!hasModal) el.addEventListener("keydown", onKey);
+    return () => {
+      el.removeEventListener("cancel", onCancel);
+      el.removeEventListener("keydown", onKey);
+      if (el.open) {
+        if (typeof el.close === "function") {
+          try {
+            el.close();
+          } catch {
+            el.removeAttribute("open");
+          }
+        } else el.removeAttribute("open");
+      }
+      const back = opener.current;
+      if (back instanceof HTMLElement && back.isConnected) back.focus({ preventScroll: true });
+    };
+  }, [open]);
+  const onBackdropClick = react.useCallback((e) => {
+    if (e.target === e.currentTarget) onCloseRef.current("backdrop");
+  }, []);
+  return { ref, onBackdropClick };
+}
+var StorefrontContext = react.createContext(null);
+function useOptionalStorefront() {
+  return react.useContext(StorefrontContext);
+}
+
+// src/locale.ts
+function useResolvedLocale(locale) {
+  const sf = useOptionalStorefront();
+  return locale ?? sf?.locale ?? "es-MX";
+}
+
+// src/payments/sdk-loader.ts
+var pending = /* @__PURE__ */ new Map();
+function loadPaymentSdk(url, options) {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return Promise.reject(new Error("payment sdk: invalid url"));
+  }
+  if (parsed.protocol !== "https:" || parsed.username || parsed.password) return Promise.reject(new Error("payment sdk: https required"));
+  if (options.allowedOrigins && !options.allowedOrigins.includes(parsed.origin)) return Promise.reject(new Error("payment sdk: origin not allowed"));
+  if (options.isLoaded?.()) return Promise.resolve();
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  if (!doc) return Promise.reject(new Error("payment sdk: no document (server)"));
+  const key = parsed.toString();
+  const existing = pending.get(key);
+  if (existing) return existing;
+  const p = new Promise((resolve, reject) => {
+    const script = doc.createElement("script");
+    script.src = key;
+    script.async = true;
+    if (options.nonce) script.nonce = options.nonce;
+    script.dataset.sfPaymentSdk = "true";
+    let done = false;
+    const finish = (err) => {
+      if (done) return;
+      done = true;
+      clearTimeout(timer);
+      if (err) {
+        script.remove();
+        pending.delete(key);
+        reject(err);
+      } else resolve();
+    };
+    const timer = setTimeout(() => finish(new Error("payment sdk: timeout")), options.timeoutMs);
+    script.onload = () => finish();
+    script.onerror = () => finish(new Error("payment sdk: failed to load"));
+    doc.head.appendChild(script);
+  });
+  pending.set(key, p);
+  return p;
+}
+function resetPaymentSdkCache() {
+  pending.clear();
+}
+
+// src/payments/mercadopago.ts
+var MERCADOPAGO_BRICKS_KIND = "mercadopago_bricks";
+function sanitizeMercadoPagoFormData(data) {
+  const d = data ?? {};
+  const str = (v, max = 256) => typeof v === "string" && v.length > 0 && v.length <= max ? v : void 0;
+  const out = {};
+  const token = str(d.token, 128);
+  if (token) out.token = token;
+  const pm = str(d.payment_method_id, 64);
+  if (pm) out.payment_method_id = pm;
+  const issuer = typeof d.issuer_id === "number" ? String(d.issuer_id) : str(d.issuer_id, 32);
+  if (issuer) out.issuer_id = issuer;
+  const inst = typeof d.installments === "number" ? d.installments : Number.parseInt(String(d.installments ?? ""), 10);
+  if (Number.isInteger(inst) && inst >= 1 && inst <= 48) out.installments = inst;
+  const payer = d.payer;
+  if (payer && typeof payer === "object") {
+    const p = {};
+    const email = str(payer.email, 254);
+    if (email) p.email = email;
+    const idType = str(payer.identification?.type, 16);
+    const idNumber = str(payer.identification?.number, 32);
+    if (idType && idNumber) p.identification = { type: idType, number: idNumber };
+    if (Object.keys(p).length) out.payer = p;
+  }
+  return out;
+}
+function mercadoPagoBricksAdapter(options = {}) {
+  const allowed = options.allowedSdkOrigins ?? ["https://sdk.mercadopago.com"];
+  const getSdk = options.getSdk ?? (() => typeof window !== "undefined" ? window.MercadoPago : void 0);
+  const getDevice = options.getDeviceSessionId ?? (() => typeof window !== "undefined" ? window.MP_DEVICE_SESSION_ID : void 0);
+  return {
+    kind: MERCADOPAGO_BRICKS_KIND,
+    async load(client, { nonce, timeoutMs }) {
+      await loadPaymentSdk(client.sdk_url, { ...nonce ? { nonce } : {}, timeoutMs, allowedOrigins: allowed, isLoaded: () => !!getSdk() });
+      if (!getSdk()) throw new Error("payment sdk: MercadoPago global missing after load");
+    },
+    async mount(opts) {
+      const Ctor = getSdk();
+      if (!Ctor) throw new Error("payment sdk: not loaded");
+      const { client, container } = opts;
+      const card = client.options?.find((o) => o.key === "card");
+      const mp = new Ctor(client.public_key, { locale: opts.locale ?? client.locale ?? "es-MX" });
+      const amount = Number.parseFloat(opts.amount.amount);
+      const controller = await mp.bricks().create("cardPayment", container.id, {
+        initialization: { amount, ...opts.email ? { payer: { email: opts.email } } : {} },
+        customization: {
+          paymentMethods: { minInstallments: 1, ...card?.max_installments ? { maxInstallments: card.max_installments } : {} },
+          visual: {
+            hidePaymentButton: true,
+            style: { theme: "default", ...opts.theme && Object.keys(opts.theme).length ? { customVariables: opts.theme } : {} }
+          }
+        },
+        callbacks: {
+          onReady: () => opts.onReady(),
+          onError: (e) => {
+            opts.onError({ critical: e?.type === "critical", ...e?.cause ? { message: String(e.cause) } : {} });
+          },
+          onSubmit: async () => void 0
+        }
+      });
+      let gone = false;
+      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 device = getDevice();
+          return { provider_data, ...typeof device === "string" && device ? { device_session_id: device } : {} };
+        },
+        async unmount() {
+          gone = true;
+          try {
+            await controller.unmount();
+          } catch {
+          }
+        }
+      };
+    }
+  };
+}
+function isSafeCssValue(value) {
+  if (!value || value.length > 200) return false;
+  if (/[;{}<>\\]/.test(value)) return false;
+  if (/url\s*\(|expression\s*\(|@import/i.test(value)) return false;
+  return true;
+}
+
+// src/payments/theme.ts
+var PAYMENT_THEME_TOKENS = {
+  "--sf-pay-text": "textPrimaryColor",
+  "--sf-pay-text-muted": "textSecondaryColor",
+  "--sf-pay-background": "formBackgroundColor",
+  "--sf-pay-input-background": "inputBackgroundColor",
+  "--sf-pay-primary": "baseColor",
+  "--sf-pay-primary-contrast": "buttonTextColor",
+  "--sf-pay-error": "errorColor",
+  "--sf-pay-success": "successColor",
+  "--sf-pay-outline": "outlinePrimaryColor",
+  "--sf-pay-radius": "borderRadiusMedium"
+};
+function readPaymentTheme(el, tokens = PAYMENT_THEME_TOKENS) {
+  const out = {};
+  if (!el || typeof getComputedStyle !== "function") return out;
+  const style = getComputedStyle(el);
+  for (const [cssVar, key] of Object.entries(tokens)) {
+    const value = style.getPropertyValue(cssVar).trim();
+    if (value && isSafeCssValue(value)) out[key] = value;
+  }
+  return out;
+}
+
+// src/payments/use-embedded-payment.ts
+var DEFAULT_ADAPTERS = {};
+function defaultAdapterFor(kind) {
+  if (kind === "mercadopago_bricks") return DEFAULT_ADAPTERS[kind] ??= mercadoPagoBricksAdapter();
+  return void 0;
+}
+function safeStorage() {
+  try {
+    return typeof sessionStorage !== "undefined" ? sessionStorage : null;
+  } catch {
+    return null;
+  }
+}
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+function useEmbeddedPayment(options) {
+  const {
+    client,
+    amount,
+    transport,
+    enabled = true,
+    locale,
+    sdkTimeoutMs = 8e3,
+    autoRetries = 2,
+    retryDelayMs = 600,
+    pollIntervalMs = 2e3,
+    pollTimeoutMs = 6e4,
+    scope = "default"
+  } = options;
+  const msgs = react.useMemo(() => storefront.paymentMessages(locale, options.messages), [locale, options.messages]);
+  const rawId = react.useId();
+  const containerId = react.useMemo(() => `sf-pay-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [rawId]);
+  const [status, setStatus] = react.useState("idle");
+  const [outcome, setOutcome] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const [fallbackReason, setFallbackReason] = react.useState(null);
+  const [attemptsLeft, setAttemptsLeft] = react.useState(null);
+  const [attemptId, setAttemptId] = react.useState(null);
+  const [container, setContainer] = react.useState(null);
+  const [mountKey, setMountKey] = react.useState(0);
+  const live = react.useRef({ ...options, msgs });
+  live.current = { ...options, msgs };
+  const form = react.useRef(null);
+  const inFlight = react.useRef(null);
+  const pendingData = react.useRef(null);
+  const alive = react.useRef(true);
+  const generation = react.useRef(0);
+  const statusRef = react.useRef("idle");
+  statusRef.current = status;
+  react.useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const storageKey = `sf:pay:attempt:${scope}`;
+  const store = options.storage === void 0 ? safeStorage() : options.storage;
+  const emit = react.useCallback((e) => live.current.onEvent?.(e), []);
+  const readAttempt = react.useCallback(() => {
+    try {
+      const saved = store?.getItem(storageKey);
+      if (saved) return saved;
+    } catch {
+    }
+    const fresh = (live.current.newAttemptId ?? storefront.generateIdempotencyKey)();
+    try {
+      store?.setItem(storageKey, fresh);
+    } catch {
+    }
+    return fresh;
+  }, [store, storageKey]);
+  const rotateAttempt = react.useCallback(() => {
+    try {
+      store?.removeItem(storageKey);
+    } catch {
+    }
+    setAttemptId(null);
+  }, [store, storageKey]);
+  const fallback = react.useCallback(
+    (reason) => {
+      setFallbackReason(reason);
+      setStatus("fallback");
+      emit({ type: "form_failed", reason });
+      live.current.onFallback?.(reason);
+    },
+    [emit]
+  );
+  const amountKey = `${amount.amount}|${amount.currency_code}`;
+  const kind = client?.kind;
+  const publicKey = client?.public_key;
+  react.useEffect(() => {
+    if (!enabled || !client) {
+      setStatus((s) => s === "loading" || s === "ready" ? "idle" : s);
+      return;
+    }
+    const adapter = live.current.adapter ?? live.current.adapters?.[client.kind] ?? defaultAdapterFor(client.kind);
+    if (!adapter) {
+      fallback("unsupported_provider");
+      return;
+    }
+    if (!container) return;
+    const my = ++generation.current;
+    const started = Date.now();
+    let mounted = null;
+    setStatus("loading");
+    const stale = () => my !== generation.current || !alive.current;
+    const fail = (reason) => {
+      if (stale()) return;
+      generation.current++;
+      clearTimeout(timer);
+      const m = mounted ?? form.current;
+      mounted = null;
+      form.current = null;
+      if (m) void Promise.resolve(m.unmount());
+      fallback(reason);
+    };
+    const timer = setTimeout(() => {
+      if (statusRef.current !== "ready") fail("sdk_timeout");
+    }, sdkTimeoutMs);
+    container.id = containerId;
+    (async () => {
+      try {
+        await adapter.load(client, { ...live.current.nonce ? { nonce: live.current.nonce } : {}, timeoutMs: sdkTimeoutMs });
+        if (stale()) return;
+        const theme = live.current.theme ?? readPaymentTheme(container);
+        const m = await adapter.mount({
+          container,
+          client,
+          amount: live.current.amount,
+          ...live.current.email ? { email: live.current.email } : {},
+          ...live.current.locale ? { locale: live.current.locale } : {},
+          theme,
+          onReady: () => {
+            if (stale()) return;
+            clearTimeout(timer);
+            setStatus((s) => s === "loading" ? "ready" : s);
+            emit({ type: "form_ready", ms: Date.now() - started });
+          },
+          onError: (e) => {
+            if (stale()) return;
+            if (e.critical) fail("form_error");
+          }
+        });
+        if (stale()) {
+          void Promise.resolve(m.unmount());
+          return;
+        }
+        mounted = m;
+        form.current = m;
+      } catch (err) {
+        fail(err instanceof Error && /timeout/i.test(err.message) ? "sdk_timeout" : "sdk_error");
+      }
+    })();
+    return () => {
+      clearTimeout(timer);
+      generation.current++;
+      const m = mounted ?? form.current;
+      mounted = null;
+      form.current = null;
+      if (m) void Promise.resolve(m.unmount());
+    };
+  }, [enabled, container, kind, publicKey, amountKey, mountKey, sdkTimeoutMs, containerId]);
+  const finish = react.useCallback(
+    (result) => {
+      const o = storefront.paymentOutcome(result, live.current.locale, live.current.messages);
+      pendingData.current = null;
+      setOutcome(o);
+      setError(null);
+      setAttemptsLeft(o.attempts_left);
+      setStatus(o.kind);
+      emit({ type: "result", status: o.kind, decline_code: o.decline_code });
+      if (o.kind === "approved") rotateAttempt();
+      if (o.kind === "rejected" || o.kind === "cancelled") {
+        rotateAttempt();
+        setMountKey((k) => k + 1);
+      }
+      live.current.onResult?.(o, result);
+      if (o.kind === "redirect" && o.redirect_url) {
+        if (live.current.onRedirect) live.current.onRedirect(o.redirect_url);
+        else if (typeof window !== "undefined") window.location.assign(o.redirect_url);
+      }
+    },
+    [emit, rotateAttempt]
+  );
+  const send = react.useCallback(
+    async (data, attempt) => {
+      const ctl = new AbortController();
+      const maxRetries = live.current.autoRetries ?? autoRetries;
+      for (let n = 0; ; n++) {
+        try {
+          const result = await transport.submit(
+            {
+              option: "card",
+              attempt,
+              idempotencyKey: attempt,
+              provider_data: data.provider_data,
+              ...data.device_session_id ? { device_session_id: data.device_session_id } : {},
+              expected_total: live.current.amount
+            },
+            { signal: ctl.signal }
+          );
+          if (!alive.current) return;
+          finish(result);
+          return;
+        } catch (err) {
+          if (!alive.current) return;
+          const view = storefront.paymentErrorView(err, live.current.locale, live.current.messages);
+          if (view.retrySameAttempt && n < maxRetries) {
+            await sleep((live.current.retryDelayMs ?? retryDelayMs) * 2 ** n);
+            if (!alive.current) return;
+            continue;
+          }
+          emit({ type: "error", kind: view.kind });
+          setError(view);
+          if (view.kind === "network") {
+            pendingData.current = data;
+            setStatus("network_error");
+          } else if (view.kind === "price_mismatch") {
+            pendingData.current = null;
+            rotateAttempt();
+            setMountKey((k) => k + 1);
+            setStatus("ready");
+          } else if (view.kind === "generic") {
+            pendingData.current = null;
+            rotateAttempt();
+            setMountKey((k) => k + 1);
+            setStatus("ready");
+          } else {
+            pendingData.current = null;
+            setStatus("blocked");
+          }
+          return;
+        }
+      }
+    },
+    [autoRetries, emit, finish, retryDelayMs, rotateAttempt, transport]
+  );
+  const submit = react.useCallback(() => {
+    if (inFlight.current) return inFlight.current;
+    const m = form.current;
+    if (!m || statusRef.current !== "ready" && statusRef.current !== "network_error") return Promise.resolve();
+    const run = (async () => {
+      setStatus("processing");
+      setError(null);
+      setOutcome(null);
+      emit({ type: "submit" });
+      let data;
+      try {
+        data = await m.collect();
+      } catch {
+        emit({ type: "tokenize_error" });
+        setError({ kind: "generic", message: live.current.msgs["error.card_data"], retrySameAttempt: false, canRetry: true });
+        setStatus("ready");
+        return;
+      }
+      const attempt = readAttempt();
+      setAttemptId(attempt);
+      await send(data, attempt);
+    })().finally(() => {
+      inFlight.current = null;
+    });
+    inFlight.current = run;
+    return run;
+  }, [emit, readAttempt, send]);
+  const retry = react.useCallback(() => {
+    if (inFlight.current) return inFlight.current;
+    const data = pendingData.current;
+    if (!data) return submit();
+    emit({ type: "retry" });
+    const run = (async () => {
+      setStatus("processing");
+      setError(null);
+      const attempt = readAttempt();
+      setAttemptId(attempt);
+      await send(data, attempt);
+    })().finally(() => {
+      inFlight.current = null;
+    });
+    inFlight.current = run;
+    return run;
+  }, [emit, readAttempt, send, submit]);
+  react.useEffect(() => {
+    if (status !== "challenge" && status !== "in_review" || !transport.refresh) return;
+    let stop = false;
+    const ctl = new AbortController();
+    const until = Date.now() + pollTimeoutMs;
+    (async () => {
+      while (!stop && Date.now() < until) {
+        await sleep(pollIntervalMs);
+        if (stop || !alive.current) return;
+        try {
+          const r = await transport.refresh({ signal: ctl.signal });
+          if (stop || !alive.current) return;
+          const o = storefront.paymentOutcome(r, live.current.locale, live.current.messages);
+          if (o.kind !== status) {
+            finish(r);
+            return;
+          }
+        } catch {
+        }
+      }
+    })();
+    return () => {
+      stop = true;
+      ctl.abort();
+    };
+  }, [status, transport, pollIntervalMs, pollTimeoutMs, finish]);
+  const dismiss = react.useCallback(() => {
+    setError(null);
+    setOutcome((o) => o?.kind === "rejected" ? null : o);
+  }, []);
+  const message = status === "processing" ? msgs["state.processing"] : status === "fallback" ? msgs["state.fallback"] : error?.message ?? outcome?.message ?? (status === "loading" ? msgs["state.loading"] : null);
+  return {
+    status,
+    message,
+    outcome,
+    error,
+    fallbackReason,
+    attemptsLeft,
+    attemptId,
+    busy: status === "loading" || status === "processing",
+    containerRef: setContainer,
+    containerId,
+    submit,
+    retry,
+    dismiss
+  };
+}
+function VoucherCard({ outcome, locale, messages, className }) {
+  const v = outcome.voucher;
+  if (!v) return null;
+  const m = storefront.paymentMessages(locale, messages);
+  const expiry = storefront.formatVoucherExpiry(v.expires_at, locale, messages);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className, "data-sf-voucher": true, "aria-labelledby": "sf-voucher-title", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { id: "sf-voucher-title", children: m["voucher.title"] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("dl", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["voucher.point"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: v.payment_point })
+      ] }),
+      v.amount && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["voucher.amount"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: storefront.formatMoney(v.amount, locale) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["voucher.reference"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { "data-sf-voucher-reference": true, children: v.reference })
+      ] }),
+      v.clabe && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["voucher.clabe"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: v.clabe })
+      ] }),
+      v.barcode && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: m["voucher.barcode"] }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: v.barcode })
+      ] })
+    ] }),
+    expiry && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-sf-voucher-expiry": true, children: expiry }),
+    v.voucher_url && /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: v.voucher_url, target: "_blank", rel: "noopener noreferrer", children: m["voucher.open"] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["voucher.email"] })
+  ] });
+}
+function PaymentChallenge({ outcome, locale, messages, render, onCancel }) {
+  const m = storefront.paymentMessages(locale, messages);
+  const { ref } = useModalDialog({ open: true, onClose: () => onCancel?.() });
+  const url = outcome.challenge?.url;
+  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref, "aria-labelledby": "sf-challenge-title", "data-sf-challenge": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "sf-challenge-title", "data-sf-autofocus": true, tabIndex: -1, children: m["challenge.title"] }),
+    render ? render(outcome) : url ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: url, title: m["challenge.title"], style: { width: "100%", minHeight: 420, border: 0 } }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: m["state.challenge"] }),
+    onCancel && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onCancel, style: { minWidth: 44, minHeight: 44 }, children: m["action.cancel"] })
+  ] }) });
+}
+var PaymentBrick = react.forwardRef(function PaymentBrick2(props, ref) {
+  const { submitLabel, hideAmountInButton, renderVoucher, renderChallenge, minHeight = 360, className, style, ...hookOptions } = props;
+  const locale = useResolvedLocale(props.locale);
+  const state = useEmbeddedPayment({ ...hookOptions, locale });
+  react.useImperativeHandle(ref, () => state);
+  const m = storefront.paymentMessages(locale, props.messages);
+  const alertRef = react.useRef(null);
+  const isError = !!state.error || state.outcome?.kind === "rejected" || state.status === "blocked";
+  react.useEffect(() => {
+    if (isError) alertRef.current?.focus();
+  }, [isError, state.message]);
+  if (state.status === "fallback") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, "data-sf-pay-status": "fallback", children: /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "data-sf-pay-fallback": true, children: m["state.fallback"] }) });
+  }
+  const outcome = state.outcome;
+  const showForm = state.status !== "approved" && state.status !== "voucher" && state.status !== "in_review" && state.status !== "redirect" && state.status !== "expired";
+  const busy = state.busy;
+  const total = storefront.formatMoney(props.amount, locale);
+  const label = state.status === "processing" ? m["state.processing"] : submitLabel ?? m["action.pay"];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, "data-sf-pay-status": state.status, children: [
+    showForm && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: state.containerRef,
+        role: "group",
+        "aria-label": m["form.label"],
+        "aria-busy": state.status === "loading" || state.status === "processing",
+        "data-sf-pay-container": true,
+        style: { minHeight: `var(--sf-pay-min-height, ${typeof minHeight === "number" ? `${minHeight}px` : minHeight})` }
+      }
+    ),
+    isError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: alertRef, role: "alert", tabIndex: -1, "data-sf-pay-alert": true, "data-sf-pay-code": state.error?.kind ?? outcome?.decline_code ?? void 0, children: [
+      state.message,
+      state.status === "network_error" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void state.retry(), style: { minHeight: 44 }, children: m["action.retry"] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", "aria-live": "polite", "data-sf-pay-message": true, children: state.message }),
+    outcome?.kind === "voucher" && (renderVoucher ? renderVoucher(outcome) : /* @__PURE__ */ jsxRuntime.jsx(VoucherCard, { outcome, locale, ...props.messages ? { messages: props.messages } : {} })),
+    outcome?.kind === "challenge" && /* @__PURE__ */ jsxRuntime.jsx(PaymentChallenge, { outcome, locale, ...props.messages ? { messages: props.messages } : {}, ...renderChallenge ? { render: renderChallenge } : {} }),
+    submitLabel !== void 0 && showForm && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => void state.submit(),
+        "aria-busy": busy,
+        "aria-disabled": state.status !== "ready",
+        "data-sf-pay-submit": true,
+        style: { minHeight: 44 },
+        children: [
+          label,
+          !hideAmountInButton && state.status !== "processing" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            " \xB7 ",
+            total
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+
+// src/payments/adapter.ts
+var PaymentHttpError = class extends Error {
+  constructor(status, code, message, details) {
+    super(message ?? code);
+    this.status = status;
+    this.code = code;
+    this.details = details;
+  }
+  status;
+  code;
+  details;
+  name = "PaymentHttpError";
+};
+async function parse(res) {
+  const text = await res.text();
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+function createFetchTransport(url, options = {}) {
+  const doFetch = (u, init) => (options.fetch ?? globalThis.fetch.bind(globalThis))(u, init);
+  async function call(u, init) {
+    const res = await doFetch(u, { credentials: options.credentials ?? "same-origin", ...init });
+    const body = await parse(res);
+    if (!res.ok) {
+      const e = body?.error;
+      throw new PaymentHttpError(res.status, e?.code ?? "server_error", e?.message, e?.details);
+    }
+    const result = body;
+    if (!result || typeof result !== "object" || !result.payment || typeof result.payment.status !== "string") {
+      throw new PaymentHttpError(502, "invalid_response", "Unexpected payment response");
+    }
+    return result;
+  }
+  return {
+    submit: (request, { signal }) => call(url, {
+      method: "POST",
+      signal,
+      headers: { "Content-Type": "application/json", Accept: "application/json", "Idempotency-Key": request.idempotencyKey, ...options.headers },
+      body: JSON.stringify(options.buildBody ? options.buildBody(request) : request)
+    }),
+    ...options.refreshUrl ? {
+      refresh: ({ signal }) => call(options.refreshUrl, { method: "POST", signal, headers: { Accept: "application/json", ...options.headers } })
+    } : {}
+  };
+}
+
+// src/payments/csp.ts
+var ORIGIN = /^https:\/\/(\*\.)?[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*(:\d{1,5})?$/i;
+function origins(...lists) {
+  const out = /* @__PURE__ */ new Set();
+  for (const list of lists) for (const o of list ?? []) if (ORIGIN.test(o)) out.add(o);
+  return [...out];
+}
+function paymentCsp(clients, options = {}) {
+  const list = clients.filter((c) => !!c);
+  const pick = (k) => list.map((c) => c.csp?.[k]);
+  const nonce = options.nonce && /^[A-Za-z0-9+/=_-]+$/.test(options.nonce) ? options.nonce : void 0;
+  const sdkOrigins = list.flatMap((c) => {
+    try {
+      const u = new URL(c.sdk_url);
+      return u.protocol === "https:" ? [u.origin] : [];
+    } catch {
+      return [];
+    }
+  });
+  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("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)]),
+    "style-src 'self' 'unsafe-inline'",
+    dir("form-action", ["'self'", ...origins(...pick("form"), options.extra?.form)]),
+    "frame-ancestors 'none'",
+    "base-uri 'self'",
+    "object-src 'none'"
+  ];
+  if (options.reportUri && /^(https:\/\/|\/)[^\s;,]+$/.test(options.reportUri)) parts.push(`report-uri ${options.reportUri}`);
+  return parts.join("; ");
+}
+function paymentCspHeaderName(reportOnly) {
+  return reportOnly ? "Content-Security-Policy-Report-Only" : "Content-Security-Policy";
+}
+
+exports.MERCADOPAGO_BRICKS_KIND = MERCADOPAGO_BRICKS_KIND;
+exports.PAYMENT_THEME_TOKENS = PAYMENT_THEME_TOKENS;
+exports.PaymentBrick = PaymentBrick;
+exports.PaymentChallenge = PaymentChallenge;
+exports.PaymentHttpError = PaymentHttpError;
+exports.VoucherCard = VoucherCard;
+exports.createFetchTransport = createFetchTransport;
+exports.loadPaymentSdk = loadPaymentSdk;
+exports.mercadoPagoBricksAdapter = mercadoPagoBricksAdapter;
+exports.paymentCsp = paymentCsp;
+exports.paymentCspHeaderName = paymentCspHeaderName;
+exports.readPaymentTheme = readPaymentTheme;
+exports.resetPaymentSdkCache = resetPaymentSdkCache;
+exports.sanitizeMercadoPagoFormData = sanitizeMercadoPagoFormData;
+exports.useEmbeddedPayment = useEmbeddedPayment;
+//# sourceMappingURL=payments.cjs.map
+//# sourceMappingURL=payments.cjs.map