微信小程序/H5 调起确认收款界面

🧾 微信小程序/H5 调起确认收款界面详解(附代码+平台兼容处理)

场景:用户点击「收款」按钮后,系统调起微信收款组件,用户确认后完成转账或收款流程。该能力广泛用于现金营销、二手交易、佣金报酬、企业赔付等业务场景中。

[具体见官方文档]

💡 背景

微信官方在前俩月更新了 requestMerchantTransfer 接口,允许微信小程序H5 页面调起一个用户确认收款的界面,用户在完成确认后即可完成转账。

该 API 可用于实现:

  • 商户对用户打款时让用户确认(平台代发)
  • 用户向另一个用户确认收款(点对点收款)
  • 钱包提现类应用(先展示转账详情 → 用户同意 → 发起打款)
    ...

⚙️ 使用前提

✅ 申请前提:

  • 需要开通微信支付商户平台的 商家转账到零钱 产品权限;
  • 绑定到小程序或公众号;
  • 需要设置 mchId(商户号)、appId(当前小程序/公众号的 appid)、package(订单详情包)。

🔄 支持的平台:

平台 是否支持 调用方式说明
小程序端 ✅ 支持 原生 API wx.requestMerchantTransfer
微信内 H5 ✅ 支持 通过 WeixinJSBridge.invoke() 调用
外部浏览器 ❌ 不支持 必须在微信内打开网页
PC 端微信 ❌ 不支持 仅支持手机微信端

另外官方提示:低版本微信客户端、低版本小程序基础库 均不支持 requestMerchantTransfer 方法,需做好兼容性处理。

APP 另见官方文档,有 Android 和 iOS,这里不做详细说明


🔧 核心代码实现

以下使用 uniapp 为兼容小程序 + 微信 H5 两端的完整调用方式(复制后更换参数即可使用):

getMoney(item) 复制代码
  const that = this;
  // 判断平台  也可以使用(// #ifdef MP-WEIXIN    // #endif)
  if (app.globalData.platform === 'wx') {
    // ✅ 小程序端调用方式
    wx.requestMerchantTransfer({
      mchId: item.mchid, // 商户号,由微信支付生成并下发
      appId: item.appid, // 商户绑定的AppID(企业号corpid即为此AppID),由微信生成,可在公众号后台查看
      package: item.package_info,  // 对应发起转账接口应答参数中的 package_info(仅当转账单据状态为WAIT_USER_CONFIRM: 待收款用户确认时才返回),用于唤起用户确认收款页面。
      success(res) {
        console.log('用户确认收款成功', res);
        uni.showToast({
          title: '收款成功',
          icon: 'success'
        });
        that.getdata(false, 1); // 刷新数据
      },
      fail(res) {
        console.error('用户确认收款失败', res);
        uni.showToast({
          title: '收款失败',
          icon: 'error'
        });
      },
      complete(res) {
        console.log('请求完成', res);
      }
    });
  } else if (app.globalData.platform === 'h5') {   // 也可以使用(// #ifdef H5   // #endif)
    // ✅ H5调用方式(确保在微信环境中)
    wx.ready(function() {
      wx.checkJsApi({
        jsApiList: ['requestMerchantTransfer'],
        success: function(res) {
          if (res.checkResult['requestMerchantTransfer']) {
            // H5端通过 WeixinJSBridge 调用
            WeixinJSBridge.invoke('requestMerchantTransfer', {
              mchId: item.mchid,
              appId: item.appid,
              package: item.package_info,
            }, function(res) {
              if (res.err_msg === 'requestMerchantTransfer:ok') {
                uni.showToast({
                  title: '收款成功',
                  icon: 'success'
                });
                that.getdata();  // 刷新数据
              } else {
                console.warn('用户取消或收款失败', res);
              }
            });
          } else {
            alert('你的微信版本过低,请更新至最新版本。');
          }
        }
      });
    });
  }
}

🔍 解读(关键点说明)

参数/逻辑 含义/说明
mchId 微信商户平台下的商户号
appId 小程序或公众号的 AppID
package 微信支付平台返回的打款详情(经过加密)
wx.requestMerchantTransfer 小程序端内置 API,发起转账确认流程
WeixinJSBridge.invoke() 微信 H5 端的 JS 桥调用,用于唤起支付、收款等界面
checkJsApi() 检查当前微信版本是否支持该 JS API
err_msg: ok 表示用户确认了收款,才会执行成功逻辑

⚠️ 常见问题 & 踩坑提示

  • 小程序内请确保 AppID 已配置转账权限,否则会报「无权限」;
  • H5 调用必须在 wx.ready() 中进行,且前提是先注入 JS-SDK 签名
  • 微信版本低于 7.0.20 可能不支持该能力
  • 请勿在非微信浏览器中测试 H5 端,WeixinJSBridge 无法注入
  • package 参数要从后端获取,且务必注意加密与签名校验
相关推荐
烛阴31 分钟前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智44 分钟前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front1 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water1 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影2 小时前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
葱头的故事3 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节
Mintopia3 小时前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia3 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia3 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节