微信jsapi支付详解

首先：需要先判断环境，如果不是微信环境下就切换成H5浏览器环境下支付。
前提配置：公众号要设置好支付域名，网页授权域名，企业账号，商户号，开通jsapi支付权限。

H5通过调用微信提供的JSbridge（WeixinJSBridge.invoke()）来唤起微信支付控件。
JSBridge，一个js桥帮助H5和Native之间的通信，因为js是运行在一个js容器里，与原生运行环境隔离，所以需要这种机制来实现这两个的双向通信。
第一步：我这边是要通过微信code发送请求给后端获取唤起微信弹窗参数。

引导微信用户授权获取code(访问特定的微信链接获取):

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号APPID&redirect_uri=授权后重定向回调的链接地址&response_type=code&scope=应用授权作用域&state=STATE#wechat_redirect

Tips:回调链接地址需要urlencode转码处理如 let url=urlencode(window.location.href)
授权后的code是拼接在回调地址上的参数也是code

 getQuery(name) {var result = window.location.search.match(new RegExp('[\\?\\&]' + name + '=([^\\&]+)', 'i'))if (result === null || result.length < 1) {return false}return result[1]}
getQuery('code'）

发起请求：

发起请求 axios({method:'get',url:'/GW/URL',params:{产品Id,用户手机号，订购类型，微信code，交易流水号
},
}).then(res=>{
res.微信弹窗参数
})

第二步：获取到微信支付弹窗的参数：如appId,时间戳，随机窜，微信签名方式，微信签名。判断环境

   // 支付只能在微信内置浏览器才有效果,在其他浏览器里面是无效的，进行判断if (typeof WeixinJSBridge == "undefined") {console.log("请在微信客户端打开");if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数),false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数));document.attachEvent("onWeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数));}} else {this.onBridgeReady(微信弹窗参数);}

第三步：唤起支付弹窗

    onBridgeReady(微信弹窗参数) {let that = this;WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: 微信弹窗参数.weixinAppId, //公众号ID，由商户传入timeStamp: 微信弹窗参数.weixinTimestamp, //时间戳，自1970年以来的秒数nonceStr: 微信弹窗参数.weixinNonceStr, //随机串package: 微信弹窗参数.weixinPackage,signType: 微信弹窗参数.weixinSignType, //微信签名方式：paySign: 微信弹窗参数.weixinSign //微信签名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。that.$alertMsg("支付成功");} else {that.$alertMsg("支付取消");}});}

微信jsapi支付详解相关推荐

微信统一支付详解，坑太多，不得不写
最近开发app支付,支付宝按照开发文档很快搞定,本想微信支付开发也一样的容易,结果我错了,一路踩坑不断,到最后终于完成,耗了不少时间和精力,所以想写一篇关于微信统一支付的开发过程,希望大家能少走弯路 ...
app接入微信第三方支付详解以及坑
上一篇文章我们介绍了支付宝的接入,这一篇我们正式介绍一下app怎么接入微信支付功能正文微信sdk下载微信支付文档微信签名工具app 首先我们微信和支付宝一样,都需要导入相应的sdk 微信sdk ...
Java=微信支付详解与日志记录详解
一.二维码: (1)什么是二维码二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示 ...
对接微信支付之网页支付详解
对接微信支付之网页支付详解声明:转载请注明出处阅读对象:本文针对的是网页中的扫码支付温馨提示:微信支付坑比较多,阅读时请仔细一些,不要放过所有需要注意的内容 , 本人一路踩坑过来,希望大家引以为 ...
微信支付 php详解,微信支付之公众号支付详解
本文主要和大家分享微信支付之公众号支付详解,随着微信支付的流行,大多产品都开发了自己的公众号.小程序等,产品的营销需要支付的支撑,最近做了个微信公号号支付,采坑无数,今天给大家分享一下,希望能帮助到大 ...
字节跳动小程序支付详解
微信支付详解 1.为什么要写这篇文章参考了字节跳动官方的文档之后发现写的太简单,完全一头雾水摸不清头脑,后来在百度了别人的实现方案,才得以总结出来. 2.背景我司要开发一个头条小程序,需要支持支付 ...
php微信jsapi支付小结,ThinkPHP接入微信支付 - JSAPI支付
一.支付准备二.获取用户openid 首先,到微信公众平台后台 - 设置 - 网页授权域名(别忘了添加开发者) // 在头部引入WechatPubService.php文件,见附录一 use app ...
微信JSAPI支付跟所遇到的那些坑
首先介绍一下我在调用微信支付接口使用的是 weixin.senparc SDK,非常方便好用开源的一个微信开发SDK. weixin.senparc SDK 官网:http://weixin.senp ...
微信JSApi支付~订单号和微信交易号
返回目录谈谈transactionId和out_trade_no 前一篇微信JSApi支付~坑和如何填坑文章反映不错,所以又写了个后篇,呵呵. 每个第三方在线支付系统中都会有至少两类订单号,其一为支 ...

微信jsapi支付详解

微信jsapi支付详解相关推荐

最新文章

热门文章