微信网页JSAPI支付

微信jspi支付只适用于微信内部浏览器使用 JSAPI支付官方文档

主要流程分以下一个步骤

1.根据官方文档的（开发步骤）进行一些相应的配置（域名）
2.进入支付界面后立即执行以下代码

window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid +'&redirect_uri=' + url +'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'

链接中的参数解析
appid:是微信支付平台官网的appid
url:是获取到code后要重定向的路由页面也就是支付页面

获取到code后支付页面的url中会携带code 类似于如下链接这种形式

https://xxxxx.com/wap/payOrder.html/?code=abc677adaduiadi7838&state=STATE

3.通过以下代码获取url中code值

getCode () {let a = window.location.hrefif (a.split('?').length > 1) {let str = a.split('?')[1]let arr = str.split('&')for (let i in arr) {if (typeof arr[i] === 'string') {if (arr[i].substring(0, 4) === 'code') {str = arr[i].substring(5)this.h5code = str}}}}
},

4.通过code调用后端接口获取支付参数
5.获取到支付参数后调用微信内置对象进行支付

 h5Pay(paymentData){console.log(666,paymentData)function onBridgeReady () {WeixinJSBridge.invoke('getBrandWCPayRequest', {'appId': paymentData.appid, //公众号名称，由商户传入     'timeStamp': paymentData.timeStamp, //时间戳，自1970年以来的秒数     'nonceStr': paymentData.nonceStr, //随机串     'package': paymentData.package,'signType': paymentData.signType, //微信签名方式：     'paySign': paymentData.paySign ,//微信签名 },function (res) {if (res.err_msg === 'get_brand_wcpay_request:ok') {console.log('支付成功')// uni.redirectTo({//     url: '/pages/pay/paycomplete'// })window.location.href = `/h5/#/pages/pay/paycomplete`}  else if (res.err_msg === 'get_brand_wcpay_request:cancel') {console.log('取消支付')// uni.reLaunch({//  url:`/pages/personal/myOrder?type=${''}&id=0`// })lwindow.location.href = `/h5/#/pages/personal/myOrder?type=${""}&id=0`} else {console.log('支付失败')uni.showToast({title:'支付失败',icon:'none'})uni.reLaunch({url:`/pages/personal/myOrder?type=${''}&id=0`})}})}if (typeof WeixinJSBridge !== 'undefined') {console.log(1)onBridgeReady(paymentData)} else {if (typeof WeixinJSBridge === 'undefined') {console.log(2)if (document.addEventListener) {console.log(3)document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)} else if (document.attachEvent) {console.log(4)document.attachEvent('WeixinJSBridgeReady', onBridgeReady)document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)}}}},

注意：支付完成或者取消支付后的跳转一定要用 window.location.href 跳转到指定页面

微信网页JSAPI支付相关推荐

微信网页端支付功能(前端)详解
微信支付功能其实与登录授权功能是有相通之处的,都是调用微信的JSAPI,直接搜索JSAPI就可以看见微信支付的文档.接下来我说一下支付功能我的思路. 首先 : 用户登录进入页面,支付调取统一下单接口, ...
C# 微信支付之JSAPI支付
前面说过微信支付的APP支付,这篇说说JSAPI的支付. JSAPI支付只能在微信浏览器里面使用,主要用于公众号里面的H5应用的支付. 开发前的准备微信公众平台:https://mp.weixin. ...
微信支付开发(5)--JSAPI支付开发详解
点此查看微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载本文目录 1. 场景 2. 普通商户支付 2.1 构建项目 2.2 编写配置类 2.3 网页授权获取openid 2.4 ...
C# .NETMVC 微信JSAPI支付
C# .NET MVC微信JSAPI支付经过本人不断翻找资料和百度终于结合一些大佬的经验和思路弄出来一个MVC的微信支付了. 再弄微信支付之前我们需要先有一个商户号,并且开通了微信支付的JSAPI支 ...
使用beecloud和easychat 做微信H5 微信公众号支付遇到的坑
首先我先来说明微信h5和微信公众号支付的区别微信H5指的是微信网页端支付.微信公众号支付指的是微信浏览器内发起微信支付,这种支付都是属于微信公众号支付.俩者本质的区别就是H5不需要微信网页授权,但是 ...
微信公众号开发，微信支付功能开发（网页JSAPI调用）
1.微信支付的流程如下三张手机截图,我们在微信网页端看到的支付,表面上看到的是 "点击支付按钮 - 弹出支付框 - 支付成功后出现提示页面",实际上的核心处理过程是: 点击支付按 ...
微信jsapi支付获取code_微信支付(公众号支付JSAPI)
微信公众号支付/微信浏览器支付(JSAPI) 一:获取微信支付四大参数步骤二:平台配置配置支付目录:商户平台. 配置此目录是代码中"微信支付"所在页面的地址,一级域名需ICP备 ...
jsapi支付签名_PHP实现微信支付(jsapi支付)流程步骤详解
最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微 ...
php如何接入微信支付接口,PHP实现微信支付(jsapi支付)流程的方法
最近接触到一个项目,涉及到微信支付,搞微信开发这么久以来,还没搞过支付,之前也就搞过公众号发红包,感谢前辈们的探索,我看了他们的博文,让我少走了很多弯路. 前期准备: 1.微信认证服务号,并且开通了微 ...

微信网页JSAPI支付

主要流程分以下一个步骤

微信网页JSAPI支付相关推荐

最新文章

热门文章