微信小程序/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 ...
随机推荐
- gitblit 安装
github 私有代码库收费属于正常商业操作,毕竟现在鼓励开源,但是受到美国出口管制,这就有些不妙了. 所以有必要自己搭建一个私有的托管服务,经过比较并且,选择了gitblit(因为最近偶尔搞搞jav ...
- ORACLE事物隔离级别和脏读、幻读、不可重复读区别
一.事务和隔离级别 事务的概念:事务是把对数据库的一系列操作都看做一个整体,要么全部成功,要么全部失败,利用事务我们可以保证数据库的完整性,事务具有原子性. 隔离级别:隔离级别定义了事务与事务之间的隔 ...
- 小程序 uni-app动态更改标题
uni-app动态更改顶部标题 uni-app uni.setNavigationBarTitle({ title: '编辑班级荣誉' }) 小程序 wx.setNavigationBarTitle( ...
- API 设计之禅
API 设计之禅 译者按:本文翻译自 How to design a good API and why it matters.根据笔者经历,很多大厂程序员所写的代码和大厂内部封装的各种中间件.类库,毫 ...
- VLDB来啦!企业上云“搭子”天翼云TeleDB数据库有话说
近日,VLDB 2024(International Conference on Very Large Data Bases)在广州隆重举行,全球数据库领域顶尖学者汇聚一堂,围绕数据库行业前沿议题展开 ...
- P10353 [PA2024] Grupa permutacji 题解
神秘!在这些排列生成的置换群 \(G\) 里,若 \(\exists \pi \in G\) 使得 \(\pi_i=k,\pi_j=l\),则所有这些 \((k,l)\) 被同样数量的 \(\pi\i ...
- Flink客户端操作
一.mysql数据准备 mysql -hip -uroot -p密码 CREATE DATABASE flink; USE flink; CREATE TABLE user ( id INTEGER ...
- C#/.NET/.NET Core技术前沿周刊 | 第 25 期(2025年2.1-2.9)
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- 【vulhub】redis 4-unacc (redis未授权访问)
渗透环境 攻击机: IP: 192.168.66.130(Kali) 漏洞收录于:vulhub/redis/4-unacc 涉及知识点:redis未授权访问 影响版本:redis 版本 < ...
- Vigenere密码无密钥求解
0.前言 最近摸了很长时间的鱼,然后最近突然想搞一个Vigenere密码的自动求解,花了不到一天来实现了一下这个东西,不过受限于自己的水平,没有搞的太难.当然,代码部分不是全部都是从 0 开始的,关于 ...