@youidian/sdk 3.4.1 → 3.4.2

package/dist/client.cjs

@@ -23,14 +23,231 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var client_exports = {};
 __export(client_exports, {
   LoginUI: () => LoginUI,
+  MessageUI: () => MessageUI,
   PaymentUI: () => PaymentUI,
   createLoginUI: () => createLoginUI,
+  createMessageUI: () => createMessageUI,
   createPaymentUI: () => createPaymentUI,
   detectLoginEnvironment: () => detectLoginEnvironment,
   handleLoginCallbackIfPresent: () => handleLoginCallbackIfPresent
 });
 module.exports = __toCommonJS(client_exports);
 
+// src/brand-logo.ts
+function ensureSdkBrandLogoStyles() {
+  if (document.getElementById?.("youidian-sdk-brand-logo-style")) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = "youidian-sdk-brand-logo-style";
+  style.textContent = `
+		.youidian-sdk-brand-logo__ring,
+		.youidian-sdk-brand-logo__dot,
+		.youidian-sdk-brand-logo__copy,
+		.youidian-sdk-brand-logo__tagline {
+			transform-box: fill-box;
+			transform-origin: center;
+			will-change: opacity, transform;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__ring {
+			animation: youidian-sdk-brand-logo-ring 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__dot {
+			animation: youidian-sdk-brand-logo-dot 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__copy {
+			animation: youidian-sdk-brand-logo-copy 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		.youidian-sdk-brand-logo[data-animated="true"] .youidian-sdk-brand-logo__tagline {
+			animation: youidian-sdk-brand-logo-tagline 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		}
+
+		@keyframes youidian-sdk-brand-logo-ring {
+			0%,
+			100% {
+				opacity: 0.72;
+				transform: rotate(0deg) scale(0.98);
+			}
+			50% {
+				opacity: 1;
+				transform: rotate(8deg) scale(1.02);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-dot {
+			0%,
+			100% {
+				opacity: 0.58;
+				transform: scale(0.9);
+			}
+			50% {
+				opacity: 1;
+				transform: scale(1.08);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-copy {
+			0%,
+			100% {
+				opacity: 0.86;
+				transform: translateY(0);
+			}
+			50% {
+				opacity: 1;
+				transform: translateY(-1px);
+			}
+		}
+
+		@keyframes youidian-sdk-brand-logo-tagline {
+			0%,
+			100% {
+				opacity: 0.64;
+			}
+			50% {
+				opacity: 0.92;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.youidian-sdk-brand-logo__ring,
+			.youidian-sdk-brand-logo__dot,
+			.youidian-sdk-brand-logo__copy,
+			.youidian-sdk-brand-logo__tagline {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	`;
+  document.head?.appendChild(style);
+}
+function createSdkBrandLogoMark({
+  animated,
+  inverted,
+  size,
+  theme,
+  variant = "brand"
+}) {
+  ensureSdkBrandLogoStyles();
+  const mark = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  mark.setAttribute("viewBox", "0 0 512 512");
+  mark.setAttribute("fill", "none");
+  mark.setAttribute("aria-hidden", "true");
+  Object.assign(mark.style, {
+    width: `${size}px`,
+    height: `${size}px`,
+    color: inverted ? "#ffffff" : theme.primary,
+    display: "block",
+    flex: "0 0 auto",
+    overflow: "visible"
+  });
+  const logoGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  logoGroup.setAttribute(
+    "transform",
+    variant === "mark" ? "matrix(0.74 0 0 0.74 -124 -114)" : "matrix(0.58 0 0 0.58 -40 -31)"
+  );
+  const ring = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  ring.setAttribute("class", animated ? "youidian-sdk-brand-logo__ring" : "");
+  ring.setAttribute("fill", inverted ? "currentColor" : theme.primary);
+  ring.setAttribute(
+    "d",
+    "M704.298 679.54A264 264 0 1 1 704.298 309.46A49 49 0 0 1 634.4 378.149A166 166 0 1 0 634.4 610.851A49 49 0 0 1 704.298 679.54Z"
+  );
+  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("class", animated ? "youidian-sdk-brand-logo__dot" : "");
+  dot.setAttribute("fill", inverted ? "currentColor" : theme.secondary);
+  dot.setAttribute("cx", "714.5");
+  dot.setAttribute("cy", "490.5");
+  dot.setAttribute("r", "68");
+  dot.setAttribute("opacity", inverted ? "0.78" : "1");
+  logoGroup.appendChild(ring);
+  logoGroup.appendChild(dot);
+  mark.appendChild(logoGroup);
+  return mark;
+}
+function createSdkBrandLogo({
+  animated,
+  brand,
+  brandWidth,
+  copyWidth,
+  gap = 10,
+  markMarginRight,
+  markSize,
+  nameSize,
+  subtitleMarginTop = 6,
+  subtitleSize,
+  subtitleWeight = "800",
+  theme,
+  variant = "brand"
+}) {
+  ensureSdkBrandLogoStyles();
+  const wrapper = document.createElement("div");
+  wrapper.className = "youidian-sdk-brand-logo";
+  wrapper.setAttribute("data-animated", animated ? "true" : "false");
+  Object.assign(wrapper.style, {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: `${gap}px`,
+    width: brandWidth ? `${brandWidth}px` : void 0
+  });
+  const copy = document.createElement("div");
+  copy.className = "youidian-sdk-brand-logo__copy";
+  copy.setAttribute("data-brand-locale", brand.language);
+  Object.assign(copy.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    lineHeight: "1",
+    width: copyWidth ? `${copyWidth}px` : void 0
+  });
+  const name = document.createElement("div");
+  name.className = "youidian-sdk-brand-logo__name";
+  name.textContent = brand.name;
+  Object.assign(name.style, {
+    color: theme.foreground,
+    fontFamily: brand.language === "zh" ? '"Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' : '"Unbounded", "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: `${nameSize}px`,
+    fontWeight: brand.language === "zh" ? "900" : "800",
+    letterSpacing: brand.language === "zh" ? "0.08em" : "0.01em",
+    lineHeight: "1",
+    whiteSpace: "nowrap"
+  });
+  const subtitle = document.createElement("div");
+  subtitle.className = "youidian-sdk-brand-logo__tagline";
+  subtitle.textContent = brand.subtitle;
+  Object.assign(subtitle.style, {
+    color: theme.muted,
+    fontFamily: brand.language === "zh" ? '"Noto Sans TC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' : '"Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSize: `${subtitleSize}px`,
+    fontWeight: subtitleWeight,
+    letterSpacing: brand.language === "zh" ? "0.24em" : "0.07em",
+    lineHeight: "1",
+    marginTop: `${subtitleMarginTop}px`,
+    textTransform: brand.language === "zh" ? "none" : "uppercase",
+    whiteSpace: "nowrap"
+  });
+  copy.appendChild(name);
+  copy.appendChild(subtitle);
+  const mark = createSdkBrandLogoMark({
+    animated,
+    size: markSize,
+    theme,
+    variant
+  });
+  if (typeof markMarginRight === "number") {
+    mark.style.marginRight = `${markMarginRight}px`;
+  }
+  wrapper.appendChild(mark);
+  wrapper.appendChild(copy);
+  return wrapper;
+}
+
 // src/hosted-modal.ts
 var SDK_SUPPORTED_LOCALES = [
   "en",
@@ -154,7 +371,7 @@ var HostedFrameModal = class {
     const container = document.createElement("div");
     Object.assign(container.style, {
       width: options.width || "450px",
-      height: options.height || "min(600px, 90vh)",
+      height: options.height || "min(760px, calc(100vh - 32px))",
       backgroundColor: "transparent",
       borderRadius: "28px",
       overflow: "visible",
@@ -162,8 +379,7 @@ var HostedFrameModal = class {
       boxShadow: "none",
       maxWidth: "calc(100vw - 32px)",
       maxHeight: "calc(100vh - 32px)",
-      transition: "height 180ms ease",
-      willChange: "height"
+      transition: "none"
     });
     const closeBtn = document.createElement("button");
     closeBtn.innerHTML = "\xD7";
@@ -1004,6 +1220,7 @@ var LoginUI = class extends HostedFrameModal {
     this.completed = false;
   }
   markIframeReady() {
+    if (this.iframeReady) return;
     this.iframeReady = true;
     if (typeof window !== "undefined" && this.iframeLoadTimer) {
       window.clearTimeout(this.iframeLoadTimer);
@@ -1248,6 +1465,17 @@ var LoginUI = class extends HostedFrameModal {
       },
       onMessage: (data, _container, event) => {
         const isIframeEvent = event.source === this.iframe?.contentWindow;
+        if (!isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE")) {
+          logLoginWarn(
+            "Login lifecycle event ignored: event.source does not match iframe contentWindow",
+            {
+              type: data.type,
+              eventOrigin: event.origin,
+              hasIframe: Boolean(this.iframe),
+              hasIframeContentWindow: Boolean(this.iframe?.contentWindow)
+            }
+          );
+        }
         if (isIframeEvent && (data.type === "LOGIN_READY" || data.type === "LOGIN_RESIZE") || data.type === "LOGIN_SUCCESS" || data.type === "LOGIN_ERROR") {
           this.markIframeReady();
         }
@@ -1382,6 +1610,406 @@ function createLoginUI() {
 handleLoginCallbackIfPresent({ autoClose: false });
 
 // src/client.ts
+var DEFAULT_PAYMENT_IFRAME_LOAD_TIMEOUT_MS = 8e3;
+var PAYMENT_UI_LOG_PREFIX = "[Youidian PaymentUI]";
+function hexToRgb(value) {
+  const normalized = value.trim().replace(/^#/, "");
+  if (!/^[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized)) return null;
+  const hex = normalized.length === 3 ? normalized.split("").map((char) => `${char}${char}`).join("") : normalized;
+  const number = Number.parseInt(hex, 16);
+  return {
+    b: number & 255,
+    g: number >> 8 & 255,
+    r: number >> 16 & 255
+  };
+}
+function alphaColor(value, alpha) {
+  const rgb = hexToRgb(value);
+  if (!rgb)
+    return `color-mix(in srgb, ${value} ${Math.round(alpha * 100)}%, transparent)`;
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+}
+function resolvePaymentTheme(options) {
+  const primary = options?.theme?.primary || "#16a34a";
+  const secondary = options?.theme?.secondary || "color-mix(in srgb, #16a34a 78%, white)";
+  const foreground = options?.theme?.foreground || "#0f172a";
+  const muted = options?.theme?.muted || "#64748b";
+  const surface = options?.theme?.surface || "#ffffff";
+  return {
+    foreground,
+    muted,
+    primary,
+    primary10: alphaColor(primary, 0.1),
+    primary14: alphaColor(primary, 0.14),
+    primary20: alphaColor(primary, 0.2),
+    primary28: alphaColor(primary, 0.28),
+    primary36: alphaColor(primary, 0.36),
+    primary64: alphaColor(primary, 0.64),
+    secondary,
+    surface
+  };
+}
+function logPaymentInfo(message, details) {
+  if (typeof console === "undefined") return;
+  console.info(PAYMENT_UI_LOG_PREFIX, message, details || {});
+}
+function logPaymentWarn(message, details) {
+  if (typeof console === "undefined") return;
+  console.warn(PAYMENT_UI_LOG_PREFIX, message, details || {});
+}
+function getPaymentIframeLoadTimeoutMs(options) {
+  const timeout = options?.iframeLoadTimeoutMs;
+  if (typeof timeout !== "number" || !Number.isFinite(timeout)) {
+    return DEFAULT_PAYMENT_IFRAME_LOAD_TIMEOUT_MS;
+  }
+  return Math.max(0, timeout);
+}
+function isChinesePaymentLocale(locale) {
+  return locale?.toLowerCase().startsWith("zh") || false;
+}
+function getPaymentFallbackText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    buttonText: options?.fallbackButtonText || (isChinese ? "\u5728\u65B0\u9875\u9762\u4E2D\u6253\u5F00" : "Open in new page"),
+    description: isChinese ? "\u5F53\u524D\u7F51\u7EDC\u53EF\u80FD\u8F83\u6162\uFF0C\u5EFA\u8BAE\u91CD\u65B0\u5C1D\u8BD5\u6216\u5728\u65B0\u9875\u9762\u4E2D\u6253\u5F00\uFF0C\u4EE5\u83B7\u5F97\u66F4\u6D41\u7545\u7684\u652F\u4ED8\u4F53\u9A8C\u3002" : "Your network may be slow. Try again or open the payment page in a new page to continue.",
+    retryText: options?.fallbackRetryText || (isChinese ? "\u91CD\u65B0\u5C1D\u8BD5" : "Try again"),
+    title: isChinese ? "\u652F\u4ED8\u9875\u9762\u6253\u5F00\u8F83\u6162" : "Payment page is taking longer"
+  };
+}
+function getPaymentBrandText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    language: isChinese ? "zh" : "en",
+    name: isChinese ? "\u4F18\u6613\u70B9" : "Youidian",
+    subtitle: isChinese ? "\u5F00\u53D1\u8005\u670D\u52A1\u5E73\u53F0" : "Developer Service Platform"
+  };
+}
+function getPaymentBrandLoadingText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return {
+    language: isChinese ? "zh" : "en",
+    name: isChinese ? "\u4F18\u6613\u70B9" : "Youidian",
+    subtitle: isChinese ? "\u5F00\u53D1\u8005\u670D\u52A1\u4E2D\u53F0" : "Developer Service"
+  };
+}
+function getPaymentLoadingText(options) {
+  const isChinese = isChinesePaymentLocale(options?.locale);
+  return options?.loadingTitle || options?.loadingDescription || (isChinese ? "\u52A0\u8F7D\u4E2D..." : "Loading...");
+}
+function applyPaymentPanelStyle(panel, theme) {
+  Object.assign(panel.style, {
+    position: "absolute",
+    inset: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "28px",
+    background: `linear-gradient(180deg, ${theme.surface} 0%, rgba(248,250,252,0.98) 100%)`,
+    color: theme.foreground,
+    padding: "28px 24px",
+    textAlign: "center",
+    zIndex: "1",
+    boxShadow: "none",
+    backdropFilter: "blur(16px)"
+  });
+}
+function createPaymentIcon(type) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("aria-hidden", "true");
+  Object.assign(svg.style, {
+    display: "block",
+    flex: "0 0 auto"
+  });
+  const paths = type === "external" ? [
+    "M7 17L17 7",
+    "M10 7H17V14",
+    "M6.5 6.5H5.5A2.5 2.5 0 0 0 3 9V18.5A2.5 2.5 0 0 0 5.5 21H15A2.5 2.5 0 0 0 17.5 18.5V17.5"
+  ] : type === "refresh" ? [
+    "M20 6V11H15",
+    "M4 18V13H9",
+    "M18.2 9A7 7 0 0 0 6.2 6.6L4 9",
+    "M5.8 15A7 7 0 0 0 17.8 17.4L20 15"
+  ] : ["M12 7V12L15 14", "M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12"];
+  for (const value of paths) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", value);
+    path.setAttribute("stroke", "currentColor");
+    path.setAttribute("stroke-width", "2");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    svg.appendChild(path);
+  }
+  return svg;
+}
+function createPaymentFallbackArtwork(theme) {
+  const artwork = document.createElement("div");
+  Object.assign(artwork.style, {
+    height: "164px",
+    margin: "0 auto 34px",
+    position: "relative",
+    width: "184px"
+  });
+  const wash = document.createElement("div");
+  Object.assign(wash.style, {
+    position: "absolute",
+    left: "16px",
+    top: "20px",
+    width: "152px",
+    height: "126px",
+    borderRadius: "48% 52% 43% 57% / 54% 42% 58% 46%",
+    background: `radial-gradient(circle at 48% 42%, ${theme.primary20}, ${theme.primary10} 52%, transparent 76%)`,
+    filter: "blur(1px)",
+    transform: "rotate(-10deg)"
+  });
+  const blob = document.createElement("div");
+  Object.assign(blob.style, {
+    position: "absolute",
+    left: "26px",
+    top: "28px",
+    width: "132px",
+    height: "116px",
+    borderRadius: "42% 58% 53% 47% / 45% 39% 61% 55%",
+    background: `linear-gradient(150deg, ${theme.primary14}, ${theme.primary10})`,
+    boxShadow: `0 30px 64px ${theme.primary14}`,
+    transform: "rotate(8deg)"
+  });
+  const tile = document.createElement("div");
+  Object.assign(tile.style, {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%) rotate(-4deg)",
+    width: "112px",
+    height: "106px",
+    borderRadius: "38% 62% 50% 50% / 44% 43% 57% 56%",
+    background: `linear-gradient(145deg, ${theme.primary}, ${theme.secondary})`,
+    border: `1px solid ${theme.primary36}`,
+    color: "#ffffff",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: `0 26px 54px ${theme.primary28}`
+  });
+  const icon = createPaymentIcon("slow");
+  Object.assign(icon.style, {
+    width: "52px",
+    height: "52px",
+    transform: "rotate(4deg)"
+  });
+  tile.appendChild(icon);
+  artwork.appendChild(wash);
+  artwork.appendChild(blob);
+  artwork.appendChild(tile);
+  return artwork;
+}
+function createPaymentBrandLoading(options, theme) {
+  const brand = getPaymentBrandLoadingText(options);
+  const wrapper = document.createElement("div");
+  Object.assign(wrapper.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 16px"
+  });
+  wrapper.appendChild(
+    createSdkBrandLogo({
+      animated: true,
+      brand,
+      brandWidth: 292,
+      copyWidth: 176,
+      gap: 6,
+      markMarginRight: -10,
+      markSize: 112,
+      nameSize: 39,
+      subtitleMarginTop: 8,
+      subtitleSize: 14,
+      subtitleWeight: "700",
+      theme,
+      variant: "brand"
+    })
+  );
+  return wrapper;
+}
+function createPaymentPlatformLogo(options, theme) {
+  const brand = getPaymentBrandText(options);
+  const wrapper = document.createElement("div");
+  Object.assign(wrapper.style, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "0 auto 10px"
+  });
+  wrapper.appendChild(
+    createSdkBrandLogo({
+      brand,
+      markSize: 48,
+      nameSize: brand.language === "zh" ? 22 : 22,
+      subtitleSize: brand.language === "zh" ? 9 : 9,
+      theme
+    })
+  );
+  return wrapper;
+}
+function createPaymentPanelContent() {
+  const content = document.createElement("div");
+  Object.assign(content.style, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    maxWidth: "364px",
+    minHeight: "100%",
+    width: "100%"
+  });
+  return content;
+}
+function createPaymentPanelTitle(value, theme) {
+  const title = document.createElement("div");
+  title.textContent = value;
+  Object.assign(title.style, {
+    color: theme?.foreground || "#0f172a",
+    fontSize: "24px",
+    fontWeight: "900",
+    lineHeight: "1.22",
+    marginBottom: "16px"
+  });
+  return title;
+}
+function createPaymentPanelDescription(value, theme) {
+  const description = document.createElement("div");
+  description.textContent = value;
+  Object.assign(description.style, {
+    color: theme?.muted || "#64748b",
+    fontSize: "14px",
+    fontWeight: "600",
+    lineHeight: "1.62",
+    margin: "0 auto",
+    maxWidth: "320px"
+  });
+  return description;
+}
+function createPaymentLoadingDescription(value, theme) {
+  const description = document.createElement("div");
+  description.textContent = value;
+  Object.assign(description.style, {
+    color: theme?.muted || "#64748b",
+    fontSize: "14px",
+    fontWeight: "500",
+    lineHeight: "1.25",
+    margin: "12px auto 0",
+    maxWidth: "320px"
+  });
+  return description;
+}
+function createPaymentFallbackMessage(options) {
+  const message = document.createElement("div");
+  Object.assign(message.style, {
+    margin: "0 auto",
+    textAlign: "center"
+  });
+  message.appendChild(createPaymentFallbackArtwork(options.theme));
+  message.appendChild(createPaymentPanelTitle(options.title, options.theme));
+  message.appendChild(
+    createPaymentPanelDescription(options.description, options.theme)
+  );
+  return message;
+}
+function createPaymentLoadingPanel(options) {
+  const panel = document.createElement("div");
+  const theme = resolvePaymentTheme(options);
+  applyPaymentPanelStyle(panel, theme);
+  const content = createPaymentPanelContent();
+  content.appendChild(createPaymentBrandLoading(options, theme));
+  content.appendChild(
+    createPaymentLoadingDescription(getPaymentLoadingText(options), theme)
+  );
+  panel.appendChild(content);
+  return panel;
+}
+function createPaymentButton(value, options) {
+  const primary = options?.primary || false;
+  const theme = options?.theme || resolvePaymentTheme();
+  const button = document.createElement("button");
+  button.type = "button";
+  Object.assign(button.style, {
+    width: "100%",
+    height: "50px",
+    borderRadius: "14px",
+    border: primary ? `1px solid ${theme.primary}` : `1px solid ${theme.primary64}`,
+    background: primary ? `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})` : "#ffffff",
+    color: primary ? "#ffffff" : theme.primary,
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "10px",
+    fontSize: "15px",
+    fontWeight: "800",
+    marginTop: primary ? "12px" : "0",
+    boxShadow: primary ? `0 14px 28px ${theme.primary20}` : "none"
+  });
+  if (options?.icon) {
+    const icon = createPaymentIcon(options.icon);
+    Object.assign(icon.style, {
+      width: "17px",
+      height: "17px"
+    });
+    button.appendChild(icon);
+  }
+  const label = document.createElement("span");
+  label.textContent = value;
+  button.appendChild(label);
+  return button;
+}
+function createPaymentFallbackPanel(options) {
+  const panel = document.createElement("div");
+  const theme = resolvePaymentTheme(options.paymentOptions);
+  applyPaymentPanelStyle(panel, theme);
+  const content = createPaymentPanelContent();
+  Object.assign(content.style, {
+    justifyContent: "space-between"
+  });
+  const main = document.createElement("div");
+  Object.assign(main.style, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    marginTop: "38px",
+    width: "100%"
+  });
+  main.appendChild(
+    createPaymentFallbackMessage({
+      description: options.description,
+      theme,
+      title: options.title
+    })
+  );
+  const actions = document.createElement("div");
+  Object.assign(actions.style, {
+    marginTop: "46px",
+    width: "100%"
+  });
+  const retryButton = createPaymentButton(options.retryText, {
+    icon: "refresh",
+    theme
+  });
+  retryButton.onclick = options.onRetry;
+  actions.appendChild(retryButton);
+  const openButton = createPaymentButton(options.buttonText, {
+    icon: "external",
+    primary: true,
+    theme
+  });
+  openButton.onclick = options.onOpen;
+  actions.appendChild(openButton);
+  main.appendChild(actions);
+  content.appendChild(main);
+  content.appendChild(createPaymentPlatformLogo(options.paymentOptions, theme));
+  panel.appendChild(content);
+  return panel;
+}
 var PaymentUI = class extends HostedFrameModal {
   constructor() {
     super(...arguments);
@@ -1390,6 +2018,127 @@ var PaymentUI = class extends HostedFrameModal {
     __publicField(this, "activeOrderId", null);
     __publicField(this, "paymentCompleted", false);
     __publicField(this, "cancelRequestedOrderId", null);
+    __publicField(this, "iframeFallbackPanel", null);
+    __publicField(this, "iframeLoadingPanel", null);
+    __publicField(this, "iframeLoadTimer", null);
+    __publicField(this, "iframeReady", false);
+  }
+  cleanupPaymentFrameState() {
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+    this.iframeLoadTimer = null;
+    this.iframeReady = false;
+  }
+  markPaymentIframeReady() {
+    if (this.iframeReady) return;
+    this.iframeReady = true;
+    if (typeof window !== "undefined" && this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+      this.iframeLoadTimer = null;
+    }
+    if (this.iframeFallbackPanel?.parentNode) {
+      this.iframeFallbackPanel.parentNode.removeChild(this.iframeFallbackPanel);
+    }
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeFallbackPanel = null;
+    this.iframeLoadingPanel = null;
+  }
+  showPaymentIframeLoading(container, options) {
+    if (this.iframeLoadingPanel || this.iframeReady) return;
+    const panel = createPaymentLoadingPanel(options);
+    this.iframeLoadingPanel = panel;
+    container.appendChild(panel);
+  }
+  openFallbackPaymentPage(finalUrl, options) {
+    if (typeof window === "undefined") return;
+    const popup = window.open(
+      finalUrl,
+      "youidian-payment-checkout",
+      "popup=yes,width=480,height=760,resizable=yes,scrollbars=yes"
+    );
+    if (popup) {
+      logPaymentInfo("Opened hosted checkout fallback page", {
+        checkoutUrl: finalUrl
+      });
+      options?.onFallbackOpen?.(finalUrl);
+      try {
+        popup.focus();
+      } catch {
+      }
+      return;
+    }
+    logPaymentWarn("Hosted checkout fallback popup was blocked", {
+      checkoutUrl: finalUrl
+    });
+    options?.onFallbackBlocked?.(finalUrl);
+    window.location.assign(finalUrl);
+  }
+  showPaymentIframeFallback(options) {
+    if (this.iframeReady || this.iframeFallbackPanel) return;
+    const { container, finalUrl, paymentOptions } = options;
+    logPaymentWarn("Hosted checkout iframe did not report ready in time", {
+      checkoutUrl: finalUrl
+    });
+    if (this.iframeLoadingPanel?.parentNode) {
+      this.iframeLoadingPanel.parentNode.removeChild(this.iframeLoadingPanel);
+    }
+    this.iframeLoadingPanel = null;
+    const fallbackText = getPaymentFallbackText(paymentOptions);
+    const panel = createPaymentFallbackPanel({
+      buttonText: fallbackText.buttonText,
+      description: fallbackText.description,
+      onOpen: () => {
+        this.openFallbackPaymentPage(finalUrl, paymentOptions);
+      },
+      onRetry: () => {
+        this.iframeFallbackPanel = null;
+        if (panel.parentNode) {
+          panel.parentNode.removeChild(panel);
+        }
+        this.iframeReady = false;
+        this.showPaymentIframeLoading(container, paymentOptions);
+        if (this.iframe) {
+          this.iframe.src = finalUrl;
+        }
+        this.startPaymentIframeWatchdog({
+          container,
+          finalUrl,
+          paymentOptions
+        });
+      },
+      paymentOptions,
+      retryText: fallbackText.retryText,
+      title: fallbackText.title
+    });
+    this.iframeFallbackPanel = panel;
+    container.appendChild(panel);
+    paymentOptions?.onFallbackVisible?.();
+  }
+  startPaymentIframeWatchdog(options) {
+    if (typeof window === "undefined") return;
+    if (this.iframeLoadTimer) {
+      window.clearTimeout(this.iframeLoadTimer);
+    }
+    const timeoutMs = getPaymentIframeLoadTimeoutMs(options.paymentOptions);
+    if (timeoutMs === 0) {
+      this.showPaymentIframeFallback(options);
+      return;
+    }
+    this.iframeLoadTimer = window.setTimeout(() => {
+      this.iframeLoadTimer = null;
+      this.showPaymentIframeFallback(options);
+    }, timeoutMs);
   }
   cancelHostedOrder(reason = "user_cancel", orderId) {
     const targetOrderId = orderId || this.activeOrderId;
@@ -1432,6 +2181,7 @@ var PaymentUI = class extends HostedFrameModal {
     this.activeOrderId = null;
     this.paymentCompleted = false;
     this.cancelRequestedOrderId = null;
+    this.cleanupPaymentFrameState();
     if (typeof urlOrParams === "string") {
       checkoutUrl = urlOrParams;
       try {
@@ -1500,14 +2250,21 @@ var PaymentUI = class extends HostedFrameModal {
       checkoutUrl,
       getAutoResolvedLocale(options?.locale)
     );
-    this.openHostedFrame(finalUrl, {
+    const hostedFrame = this.openHostedFrame(finalUrl, {
       allowedOrigin: options?.allowedOrigin,
+      height: "min(760px, calc(100vh - 32px))",
       onCloseButton: () => {
         this.cancelHostedOrder("modal_close");
         options?.onCancel?.(this.activeOrderId || void 0);
       },
-      onMessage: (data, container) => {
+      onMessage: (data, container, event) => {
+        const isIframeMessage = event.source === this.iframe?.contentWindow;
+        if (isIframeMessage && (data.type === "PAYMENT_READY" || data.type === "PAYMENT_RESIZE" || data.type === "PAYMENT_STARTED")) {
+          this.markPaymentIframeReady();
+        }
         switch (data.type) {
+          case "PAYMENT_READY":
+            break;
           case "PAYMENT_STARTED":
             if (data.orderId) {
               this.activeOrderId = data.orderId;
@@ -1522,11 +2279,6 @@ var PaymentUI = class extends HostedFrameModal {
             options?.onCancel?.(data.orderId);
             break;
           case "PAYMENT_RESIZE":
-            if (data.height) {
-              const maxHeight = window.innerHeight * 0.9;
-              const newHeight = Math.min(data.height, maxHeight);
-              container.style.height = `${newHeight}px`;
-            }
             break;
           case "PAYMENT_CLOSE":
             this.cancelHostedOrder("payment_close", data.orderId);
@@ -1534,8 +2286,21 @@ var PaymentUI = class extends HostedFrameModal {
             options?.onClose?.();
             break;
         }
-      }
+      },
+      width: "min(450px, 100%)"
     });
+    if (hostedFrame) {
+      this.showPaymentIframeLoading(hostedFrame.container, options);
+      this.startPaymentIframeWatchdog({
+        container: hostedFrame.container,
+        finalUrl,
+        paymentOptions: options
+      });
+    }
+  }
+  close() {
+    super.close();
+    this.cleanupPaymentFrameState();
   }
   /**
    * Poll order status from integrator's API endpoint
@@ -1581,14 +2346,39 @@ var PaymentUI = class extends HostedFrameModal {
     });
   }
 };
+var MessageUI = class {
+  openWechatBinding(options) {
+    const bindingUrl = options.bindingUrl?.trim();
+    if (!bindingUrl) {
+      throw new Error("bindingUrl is required");
+    }
+    if (options.displayMode === "popup") {
+      const popup = window.open(
+        bindingUrl,
+        options.popupName || "youidian-wechat-message-binding",
+        "width=480,height=720,noopener,noreferrer"
+      );
+      if (!popup) {
+        window.location.href = bindingUrl;
+      }
+      return;
+    }
+    window.location.href = bindingUrl;
+  }
+};
+function createMessageUI() {
+  return new MessageUI();
+}
 function createPaymentUI() {
   return new PaymentUI();
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   LoginUI,
+  MessageUI,
   PaymentUI,
   createLoginUI,
+  createMessageUI,
   createPaymentUI,
   detectLoginEnvironment,
   handleLoginCallbackIfPresent