微信公众号h5调用微信支付

发布时间 2023-09-12 17:33:27作者: 明月南楼

微信公众号h5调用微信支付其实就是 JSAPI支付
目前jsapi支付分v2和v3,现在尽量接v3的api。因为v2前端调用wx.chooseWXPay的时候成功没有回调,导致后续业务逻辑跳转有问题(原因就是可恨的点金计划)点金计划就是支付成功之后跳转到一个官方小票+广告的页面,点金计划开通的门槛稍微有点高,所以建议大家直接接入v3的微信支付。

this.$wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
					appId: this.$appConfig.appid, // 必填,公众号的唯一标识
					timestamp: data.timeStamp, // 必填,生成签名的时间戳
					nonceStr: data.nonceStr, // 必填,生成签名的随机串
					signature: data.signature, // 必填,签名
					jsApiList: ['getBrandWCPayRequest'] // 必填,需要使用的JS接口列表});
				})
				this.$wx.ready(() => {
					this.$wx.invoke('getBrandWCPayRequest', {
							appId: this.$appConfig.appid, //公众号ID,由商户传入     
							timeStamp: data.timeStamp, //时间戳,自1970年以来的秒数     
							nonceStr: data.nonceStr, //随机串     
							package: data.package,
							signType: data.signType, //微信签名方式:     
							paySign: data.paySign
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
                                // 判断支付成功跳转到支付后续的业务的页面
								uni.navigateTo({
									url: `/pages/xxxx/xxxx`
								})
							}
						});
				})

代码中的appIdtimeStampnonceStrpackagesignTypepaySign参数均由后端返回。
其实前端调用支付特别简单,调一下方法就可以了。