微信小程序/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. Windows 快速启动器

    在日常工作和学习中,我们经常需要快速访问某些功能或资源,例如打开常用网站.启动应用程序或执行特定命令.Linux 用户可以通过 alias 快速实现这些操作,但在 Windows 上缺乏类似的原生支持 ...

  2. LVGL图形库

    一.LVGL实现思想 LVGL以结构体的形式来实现类 父子对象的关系 1.子对象会随着父对象移动 2.子对象超出父对象范围的部分不显示 二.基础对象部件 基础对象lv_obj可以作为父对象来创建其它对 ...

  3. DeepSeek-R1 技术全景解析:从原理到实践的“炼金术配方” ——附多阶段训练流程图与核心误区澄清

    字数:约3200字|预计阅读时间:8分钟 (调试着R1的API接口,看着控制台瀑布般流淌的思维链日志)此刻我仿佛看到AlphaGo的棋谱在代码世界重生--这是属于推理模型的AlphaZero时刻. D ...

  4. FOFA 图标哈希值大全

    FOFA 图标哈希值大全 服务 图标 哈希值 默认端口 Atlassian Crowd icon_hash="-1231308448" 8095 CouchDB icon_hash ...

  5. Layer子域名挖掘机

    Layer子域名挖掘机 Layer子域名挖掘机是一款功能强大的域名查询工具,主要用于提供网站子域名的查询服务. 域名与子域名 域名 域名,又称网域,是互联网上用于标识特定计算机或计算机组的一串由点分隔 ...

  6. Schreier–Sims 算法

    好看的实现. #include<bits/stdc++.h> using namespace std; #define int long long const int maxn=105; ...

  7. 使用必读-使用Iceberg数据湖需要注意的点

    一.开发注意事项 1.Iceberg选择合适的表版本 简述:Iceberg目前有两个表版本(V1和V2),根据数据选择合适的表版本. V1表只支持增量数据插入,适合做纯增量写入场景,如埋点数据. V2 ...

  8. Luogu P5298 PKUWC2018 Minimax 题解 [ 紫 ] [ 树形 dp ] [ 线段树合并 ] [ 概率 dp ]

    Minimax:线段树合并优化 dp 好题. 树形 dp 因为要求出每一个值的出现概率,首先我们可以想到一个很暴力的 dp 式子. 定义 \(dp_{i,j}\) 表示在节点 \(i\) 时,权值 \ ...

  9. [HEOI2014]大工程 题解

    发现可以直接建立虚树. 设 \(dp_{u,0/1/2}\) 表示第 \(u\) 个节点的子树内,所有选中节点到它的距离之和/选中节点中到它的最短距离/选中节点中到它的最长距离,\(as_{u,0/1 ...

  10. SpringBoot - [07] Web入门

    题记部分 一.Web 入门   SpringBoot将传统Web开发的mvc.json.tomcat等框架整合,提供了spring-boot-starter-web组件,简化了Web应用配置.创建Sp ...