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

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

具体见官方文档

背景

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

该 API 可用于实现:

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

    ...

⚙️ 使用前提

申请前提:

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

调用方式:

平台 调用方式说明
小程序端 原生 API wx.requestMerchantTransfer
微信内 H5 通过 WeixinJSBridge.invoke() 调用

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 参数要从后端获取,且务必注意加密与签名校验;

参考链接:

微信开放文档:requestMerchantTransfer

微信小程序/H5 调起确认收款界面的更多相关文章

  1. 【微信小程序】调起微信支付完整demo

    微信小程序调用微信支付接口 https://blog.csdn.net/u012667477/article/details/80940578

  2. 微信小程序H5预览页面框架(二维码不隐藏)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 微信小程序H5预览页面框架

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 微信小程序要调数据 微信小程序 for 循环详解

    现在要完成这样的效果: 我的代码是: <view class="l-setlist clr" > <template name="listab" ...

  5. 微信小程序调接口常见问题解决方法

    第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...

  6. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  7. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  8. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 微信小程序5 - 数据驱动界面

    微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...

  10. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

随机推荐

  1. Delphi Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值

    本文转自以下网址,感谢作者分享 https://blog.csdn.net/pcent/article/details/8169112 cxGrid1DBTableView1.Controller.F ...

  2. RPM常用命令以及组合使用场景

    本文分享自天翼云开发者社区<RPM常用命令以及组合使用场景>,作者:邬祥钊   当涉及到管理基于 Red Hat 系的 Linux 系统时,RPM (Red Hat Package Man ...

  3. 使用yarn安装依赖包出现“There appears to be trouble with your network connection. Retrying...”超时的提醒

    我们在使用yarn安装依赖包文件的时候,可能会出现"There appears to be trouble with your network connection. Retrying... ...

  4. 修改NuGet包默认存放位置

    默认情况下,NuGet下载的包存放在系统盘(C盘中),这样一来,时间长了下载的包越多,C盘占用的空间也就越多. 1.问题描述 默认情况下,NuGet下载的包存放在系统盘(C盘中,一般在路径C:\Use ...

  5. FLink写入Clickhouse优化

    一.背景 ck因为有合并文件操作,适合批量写入.如单条插入则速度太慢 二.Flink写入ck优化 改为分批插入,代码如下 DataStream<Row> stream = ... stre ...

  6. Luogu P4588 数学运算 题解 [ 绿 ] [ 线段树 ]

    Luogu P4588 数学运算. 虽然是一个很典的题,但里面的思想还是比较值得记录的. 假做法 一开始看到此题还以为是乘法逆元的模板题,但看到 \(m\) 与 \(M\) 不互质,就知道这种做法是假 ...

  7. 2025AI应用元年,DeepSeek让领域小模型训练成本急剧下降!

    关注公众号回复1 获取一线.总监.高管<管理秘籍> 模型训练俗称炼丹,而炼丹是修士特权,这就显得模型训练离普通人很远了. 虽然是笑谈,但如果对其中情况不太了解确实也会因为其背后深厚.复杂的 ...

  8. 移动硬盘插入win10检测到却不显示盘符解决方法

    1.开始菜单中的设置-----设备. 2.选择"蓝牙和其他设备" 3.在其他设备栏中就能看到检测到的移动硬盘,点击删除设备后重新插入移动硬盘即可在此电脑上显示盘符.

  9. QT5笔记: 25. 非模态的自定义对话框

    窗口对象为QDialog 显示方法为 show(); locateCell->show(); 可以通过public方法或者信号槽机制获取非模态窗口的信息 例子:非模态窗口,为主窗口数据输入吧 v ...

  10. halcon中是怎么实现半导体/Led中的GoldenDie的检测方法的 基于局部可变形模板匹配 variation_model模型

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/18739196 这篇简单介绍一下halcon中的print_check_single_chars ...