微信h5支付在iframe中必然失效，因其强制要求用户主动触发且必须在顶层上下文执行；需将支付唤起逻辑移至父页面，通过postmessage传递参数并由父页调用weixinjsbridge；服务商模式还须开通点金计划并启用商家小票功能。
微信 H5 支付在 iframe 里直接失效，不是代码 bug
微信浏览器（包括微信内置 WebView）明确禁止在 iframe 中直接调起 H5 支付。这不是你 JS 写错了，也不是后端签名没配对，而是微信主动拦截：只要检测到当前上下文是 iframe 子页面，WeixinJSBridge 或 getBrandWCPayRequest 会静默失败，控制台通常无报错，err_msg 可能为空或返回 invalid transaction_id 这类误导性信息。
根本原因是微信支付要求“用户主动触发 + 顶层上下文”，而 iframe 子页面既不满足“顶层”（window === window.top 为 false），也无法通过用户手势穿透到父页面完成支付唤起。
必须把支付逻辑提到父页面执行
所有支付参数（appId、timeStamp、nonceStr、package、signType、paySign）仍可由子页面通过接口获取，但唤起动作必须由父页面完成。常见做法：
- 子页面用
window.parent.postMessage把支付参数发给父页面（注意校验event.origin） - 父页面监听
message事件，收到后立即调用WeixinJSBridge.invoke('getBrandWCPayRequest', ...) - 若父页面未注入 WeixinJSBridge，需提前加载微信 JS SDK 并确保
jsApiList包含chooseImage等至少一个接口以触发 bridge 初始化 - 避免在子页面中任何地方调用
getBrandWCPayRequest，哪怕加了 try/catch 也无效
服务商模式下必须开通点金计划 + 商家小票
如果你的 JSAPI 支付走的是服务商/特约商户路径（即 sub_mch_id 非空），2026 年起微信已强制回收支付后自动跳转能力。即使绕过 iframe 唤起成功，支付完成后页面也会被关闭——用户看不到你的成功页，订单状态无法同步。
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
解决路径只有一条：开通点金计划，并启用商家小票（SHOW_CUSTOM_PAGE）：
- 配置域名必须是父页面所在域名（不是 iframe 的 src 域名），且需在微信商户平台 → 点金计划 → 商家小票链接中填写 HTTPS 地址
- 该地址应指向你自己的 H5 成功页（如
https://your.com/pay-success?order_no=xxx），它将以内嵌iframe形式展示在微信支付结果页中 - 这个商家小票页可以发起 Ajax 请求查单、渲染订单详情、放「返回商城」按钮，且不会被关闭
- 注意：仅开通点金计划不够，必须单独打开「商家小票」开关；服务商还需为每个特约商户显式开启该功能
APP WebView 中 iframe 调微信支付的特殊处理
Android/iOS 原生 APP 的 WebView 加载含 iframe 的 H5 页面时，还会遇到第二层拦截：微信支付跳转的 weixin:// 协议无法被 WebView 默认处理。
必须重写 shouldOverrideUrlLoading（Android）或 decidePolicyForNavigationAction（iOS）：
- 识别出
url.startsWith('weixin://')或url.contains('weixin://') - 不再让 WebView 自己加载，而是构造
Intent（Android）或UIApplication.openURL（iOS）交由系统处理 - 不要尝试在 WebView 内用
window.location.href = 'weixin://...'，这在多数 WebView 实现中会被静默丢弃 - 同理，支付宝的
alipays://协议也要一并处理
真正容易被忽略的点是：微信支付在 iframe 场景下失败时，往往不抛异常也不走 fail 回调，而是卡在“准备中”或直接静默退出。排查时别只盯着 JS 控制台，要抓包看是否发出了 /pay/unifiedorder 请求、返回的 mweb_url 是否能正常访问，再确认父页面是否真的收到了 postMessage 并执行了唤起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
