微信公众号H5支付的两种方式

1.老版微信支付,通过微信APP自带的浏览器中的WeixinJSBridge支付

这种方式无需引入任何js,但必须在微信中打开

    wxPay(payInfo){ //老版微信支付,通过微信浏览器中的WeixinJSBridge支付function onBridgeReady() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": payInfo.appId, //公众号名称，由商户传入     "timeStamp": payInfo.timeStamp, //时间戳，自1970年以来的秒数     "nonceStr": payInfo.nonceStr, //随机串     "package": payInfo.package,"signType": payInfo.signType, //微信签名方式：     "paySign": payInfo.sign //微信签名 },function(res) {if(res.err_msg == "get_brand_wcpay_request:ok") {console.log('支付成功')//在这里做后续操作} else if(res.err_msg == "get_brand_wcpay_request:cancel" || res.err_msg == "get_brand_wcpay_request:fail") {console.log('取消支付');}});}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()                   ;}},

2.新版微信支付,通过weixin-js-sdk支付

这种方式需要安装npm install weixin-js-sdk --save 并引入import wx from 'weixin-js-sdk'

通过后端(获取签名需要的参数需要在后端存储以便多次使用)接口获取微信配置参数

    wxPay2(payInfo){ //新版微信支付,通过wx-jssdk支付const url=location.href //.split('#')[0]  根据需要看是否需要截取#前面的axios({url:'/weixin/getWxConfig?url='+url}).then(res => {console.log(res)let data=res.datawx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appid,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: data.signature,jsApiList: ['checkJsApi', 'chooseWXPay']});wx.ready(() => {console.log('配置成功')wx.checkJsApi({jsApiList: ['chooseWXPay'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,success: function(res) {// 以键值对的形式返回，可用的 api 值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}console.log('验证chooseWXPay结果:',res)}});wx.chooseWXPay({timestamp: data.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致paySign: data.sign, // 支付签名success: function (res) {// 支付成功后的回调函数console.log('支付结果:' + JSON.stringify(res));if(res.errMsg==='chooseWXPay:ok'){console.log('支付成功')}},});})wx.error(function (res) {console.log(res)});}).catch(err => {console.error(err);});},

参考:微信jssdk官方文档

微信公众号H5支付的两种方式相关推荐

php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
微信公众号H5支付遇到的那些坑
简史官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...
php 公众号打开小程序,微信公众号图文消息新增两种进入小程序的方式
终于不再是凌晨--就在刚刚,微信宣布小程序的能力再次升级.除了添加小程序卡片外,公众号图文消息新增两种进入小程序的方式:支持通过蓝色文字链接或图片链接跳转到小程序. 1.推送形式更多样公众号运营者在 ...
微信公众号开发小记——4.两种邀请用户的方式扫码链接
描述假设的我们的服务号有这么一些功能,比如底部有按钮,点击会有一些复杂的功能,这时候可能就需要一个用户系统,有用户系统就经常想要做什么分享邀请新用户之类的,这时候就又有几种方式,1.直接一个连接,让 ...
PHP实现微信公众号H5支付
开发前配置进行代码接入前,需在微信后台填写授权回调域名,此域名必须经过ICP备案开发主要流程用户下单时选择微信支付商户进行业务逻辑处理并调用微信统一下单接口,微信H5交易类型为:trade_t ...
uni-app微信公众号H5支付页面
准备工作初始化公众平台测试账号系统. 地址: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 登录后,会得到一个测试公众 ...
微信公众号h5支付完后无返回值，整个h5页面被关闭
最近做个挂在公众号下的h5项目,刚开始的微信支付,整个流程没什么问题,支付完后回调也没问题,但后面客户要求支付走第三方的东西,收到的钱什么的由第三方接管,就遇到问题了,支付完后,点完成,整个h5都被关 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
微信公众号新手运营指南——四种类别如何选择
最近接到很多粉丝的提问,如何申请.如何运营微信公众号成为了很多人关注的话题,微信公众号2012年第一次出现到现在也将近五年了,还有那么多人选择涉足这个领域,申请微信公众号来运营,足见这个平台的魅力.当 ...
java微信公众号JSAPI支付以及所遇到的坑
java微信公众号JSAPI支付以及所遇到的坑上周做了个支付宝微信扫码支付,今天总结一下.微信相比支付宝要麻烦许多由于涉及到代理商,没办法,让我写个详细的申请流程,懵逼啊. 笔记地址 http:/ ...

微信公众号H5支付的两种方式

1.老版微信支付,通过微信APP自带的浏览器中的WeixinJSBridge支付

2.新版微信支付,通过weixin-js-sdk支付

微信公众号H5支付的两种方式相关推荐

最新文章

热门文章