微信支付【 wx.chooseWXPay、WeixinJSBridge.invoke】

微信支付【 WeChatPay 】

wx.chooseWXPay、WeixinJSBridge.invoke

业务需求：

现在涉及到微信相关的项目有很多，主要涉及到的功能有**【微信自定义分享、微信支付等】。开发微信公众号H5页面时，需要使用微信支付进行金融支付。当微信支付完成【支付成功点击“完成”】时，需要出发相应的业务逻辑；比如：支付成功时跳转到订单页面；支付失败时跳转到下订单页面；支付取消时保持当前订单页面不变等。
前期开发微信H5页面时，大多考虑的就是【支付成功】之后如何处理，因为是刚接触微信支付，大多都是采用刷新页面获取新数据的方式来更新支付状态。这种方式可以解决当时面临的问题，但是从业务逻辑来看，处理的方式不是很合理。
支付场景越来越多，对微信支付流程有了进一步的了解和认识，现在回过头来对过去项目中使用【微信支付】**的业务场景进行梳理和完善，进一步优化支付流程以及对支付后的不同状态做相应的处理和优化，并结合实际情况做相应的业务逻辑分析。

支付方式：

方式一：微信支付【微信公众号】
- 此支付方式需要在HTML页面中引入JS文件，即【 jweixin-1.6.0.js 】；
- 此JS文件链接支持http和https两种形式，引用时需要匹配当前项目的请求-响应协议（即http、https）；
- 该JS文件支持使用AMD/CMD标准模块加载方式加载。

let WeChatPay = function() {// 2、引入js后、获取公众号校验信息let timestamp = '',nonceStr = '',signature = '';let v = {// 用于换取微信校验信息的参数：要求不可以包含 “#” 号url: location.split('#')[0]};// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '', // 必填，签名jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表});axios.post('/wx/pay/orderPay_XXXX', data).then(res => {// 支付成功状态if (res.code == 200) {// 获取支付必备的参数let {nonceStr,package,signType,paySign} = res.data;// 4、通过ready接口处理成功验证wx.ready(function() {/* 微信支付 */wx.chooseWXPay({timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: nonceStr, // 支付签名随机串，不长于 32 位package: package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: paySign, // 支付签名success: function(res) {// 前端判断返回方式，微信团队郑重提示：不保证绝对可靠，切记！if (res.errMsg == 'chooseWXPay:ok') {// 【支付成功】 } else if (res.errMsg == 'chooseWXPay:cancel') {// 【支付取消】：用户取消支付不会进入这个判断，而是进入complate和cancel函数} else {}},complete: function(res) {// 接口调用完成时执行的回调函数，无论成功或失败都会执行if (res.errMsg == 'chooseWXPay:ok') {// 【支付成功】：支付成功提示页面，点击完成按钮之后wx.closeWindow(); /* 关闭微信窗口，调用时需要在config中进行校验 */} else if (res.errMsg == 'chooseWXPay:cancel') {// 【支付取消】} else {}/*** iOS和Android支付成功点击“完成”后都会进入success和complete函数，都返回'chooseWXPay:ok'* （也有人说Android支付成功不进入success函数，）* 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"}，iOS返回{"err_Info":"success","errMsg":"chooseWXPay:ok"}，故Android找不到success方法，导致失败】* */},fail: function(err) {// 接口调用失败},cancel: function(err) {// 用户点击取消时的回调函数：用户取消支付后实际上进入cancel 和 complate函数}});});}}).catch(err => {console.log('支付失败：', err);});
}

接口说明：【不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。】

success：接口调用成功时执行的回调函数。
fail：接口调用失败时执行的回调函数。
complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

方式二：微信支付【 JSAPI 支付】（常用支付方式）

function onBridgeReady() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": "wx2421b1c4370ec43b", //公众号名称，由商户传入     "timeStamp": "1395712654", //时间戳，自1970年以来的秒数     "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串     "package": "prepay_id=u802345jgfjsdfgsdg888","signType": "MD5", //微信签名方式：     "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 },function(res) {// 支付成功if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。}// 支付过程中用户取消if (res.err_msg == "get_brand_wcpay_request:cancel") {}// 支付失败if (res.err_msg == "get_brand_wcpay_request:fail") {}/*** 其它* 1、请检查预支付会话标识prepay_id是否已失效* 2、请求的appid与下单接口的appid是否一致* */if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {}});
}
// 检测支付环境中的 WeixinJSBridge
if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}
} else {onBridgeReady();
}

JSAPI调起支付注意事项：

在微信浏览器里打开H5网页中执行JS调起支付；
WeixinJSBridge是微信浏览器内置对象，在其他浏览器中无效；
调用支付传递的参数注意区分大小写。

微信支付【 wx.chooseWXPay、WeixinJSBridge.invoke】相关推荐

调用微信支付wx.chooseWXPay 详细流程
第一步:配置微信基本配置 /** 获取微信配置以下的参数后台提供这里切记,经常会报错,因为页面的url的问题,我这里是后台写死的,根据不同的环境配置不同url* */initWxConfig () { ...
微信公众平台 - 微信内置浏览器 WeixinJSBridge.invoke(‘xxx‘) API 报错：system:access_denied（常见于微信支付、分享朋友圈/转发好友等功能）解决方案
前言场景描述:做公众号网页项目,在微信内置浏览器中运行自己的 H5 网站,需要接入微信支付.微信分享等其他能力,因此使用 WeixinJSBridge 这个 API,不料却发生报错. 如下报错所示, ...
微信支付：chooseWXPay:fail, the permission value is offline verifying
在开发公众号微信支付的时候,到了支付那一步,页面上看到微信支付的loading一闪而过,但是没有出现微信支付的页面.控制台log显示错误信息:"chooseWXPay:fail, the p ...
公众号接入微信支付
公众号页面接入微信支付 1. 引入js文件 <script type="text/javascript" src="https://res2.wx.qq.com/ ...
前端微信支付步骤（笔记）
对接了两次微信支付,第一次对接的时候没有做记录下来,这一次把要记录下来一.获取openId 1.在微信公众平台配置相关信息,具体按照微信官方文档步骤进行配置:mp.weixin.qq.com/wik ...
jsSdk 微信配置config,调起微信支付
话不多说,首先第一步,获取config需要的参数 appid,noncestr ,timestamp ,url ,signature 1.编写controller /*** 微信配置获取config* ...
vue3前端实现微信支付
要在Vue3前端实现微信支付,你需要按照以下步骤进行操作: 在微信支付官网上注册一个商户号,并下载微信支付SDK. 在你的Vue3项目中安装微信支付的npm包,例如:npm install weixi ...
微信公众号支付php demo,200行代码实现微信支付-公众号支付，不再踩坑，附：demo...
开发微信支付需要认证服务号并且已经开通微信支付,获得微信支付商ID,设置apikey了的. 官方给了公众号支付的php源码SDK 但是这个SDK文件非常多,源码乱七八糟的,真的一开始接触的人拿着官方的 ...
php微信公众号支付实例教程,php微信支付之公众号支付功能
这篇文章主要为大家详细介绍了php微信支付之公众号支付功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下网上的很多PHP微信扫码支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后 ...