微信小程序/H5 调起确认收款界面
微信小程序/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 调起确认收款界面的更多相关文章
- 【微信小程序】调起微信支付完整demo
微信小程序调用微信支付接口 https://blog.csdn.net/u012667477/article/details/80940578
- 微信小程序H5预览页面框架(二维码不隐藏)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序要调数据 微信小程序 for 循环详解
现在要完成这样的效果: 我的代码是: <view class="l-setlist clr" > <template name="listab" ...
- 微信小程序调接口常见问题解决方法
第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序5 - 数据驱动界面
微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
随机推荐
- Delphi Cxgrid获取选中行列,排序规则,当前正在编辑的单元格内的值
本文转自以下网址,感谢作者分享 https://blog.csdn.net/pcent/article/details/8169112 cxGrid1DBTableView1.Controller.F ...
- RPM常用命令以及组合使用场景
本文分享自天翼云开发者社区<RPM常用命令以及组合使用场景>,作者:邬祥钊 当涉及到管理基于 Red Hat 系的 Linux 系统时,RPM (Red Hat Package Man ...
- 使用yarn安装依赖包出现“There appears to be trouble with your network connection. Retrying...”超时的提醒
我们在使用yarn安装依赖包文件的时候,可能会出现"There appears to be trouble with your network connection. Retrying... ...
- 修改NuGet包默认存放位置
默认情况下,NuGet下载的包存放在系统盘(C盘中),这样一来,时间长了下载的包越多,C盘占用的空间也就越多. 1.问题描述 默认情况下,NuGet下载的包存放在系统盘(C盘中,一般在路径C:\Use ...
- FLink写入Clickhouse优化
一.背景 ck因为有合并文件操作,适合批量写入.如单条插入则速度太慢 二.Flink写入ck优化 改为分批插入,代码如下 DataStream<Row> stream = ... stre ...
- Luogu P4588 数学运算 题解 [ 绿 ] [ 线段树 ]
Luogu P4588 数学运算. 虽然是一个很典的题,但里面的思想还是比较值得记录的. 假做法 一开始看到此题还以为是乘法逆元的模板题,但看到 \(m\) 与 \(M\) 不互质,就知道这种做法是假 ...
- 2025AI应用元年,DeepSeek让领域小模型训练成本急剧下降!
关注公众号回复1 获取一线.总监.高管<管理秘籍> 模型训练俗称炼丹,而炼丹是修士特权,这就显得模型训练离普通人很远了. 虽然是笑谈,但如果对其中情况不太了解确实也会因为其背后深厚.复杂的 ...
- 移动硬盘插入win10检测到却不显示盘符解决方法
1.开始菜单中的设置-----设备. 2.选择"蓝牙和其他设备" 3.在其他设备栏中就能看到检测到的移动硬盘,点击删除设备后重新插入移动硬盘即可在此电脑上显示盘符.
- QT5笔记: 25. 非模态的自定义对话框
窗口对象为QDialog 显示方法为 show(); locateCell->show(); 可以通过public方法或者信号槽机制获取非模态窗口的信息 例子:非模态窗口,为主窗口数据输入吧 v ...
- halcon中是怎么实现半导体/Led中的GoldenDie的检测方法的 基于局部可变形模板匹配 variation_model模型
原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/18739196 这篇简单介绍一下halcon中的print_check_single_chars ...