关于前端微信支付功能如何实现

1.先提供微信的API说明文档

pay.weixin.qq.com/wiki/doc/ap...

前端的核心代码如下: 有的文档里提供了choosepayway这个方式,WeixinJSBridge就是对这个方法的一层包装。

javascript 复制代码
function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号ID,由商户传入     
         "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 (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();
}

说明

  • 1.上述方法是在微信浏览器内直接调用WeixinJSBridge,因为微信浏览器内置了wx的一些配置,所以可以直接使用该对象。如果是在别的浏览器,需要区分是否为wx环境。
  • 2.如果是在普通的h5环境,那么前端不需要做事,让后端去下单,商户后台系统先调用微信支付的H5下单接口,微信后台系统返回链接参数h5_url,用户使用微信外部的浏览器访问该h5_url地址调起微信支付中间页。 window.location.href = h5Url

开发步骤

  1. 首先使用调用wx的支付api需要授权获取用户信息,微信网页开发 / 网页授权 (qq.com),一共4个步骤,其实前端只需要关注第一步就行了,获取code,如果后端勤快,甚至连第一步都不需要看,前端只要访问后端的接口,拿到上面代码的核心几个参数就能顺利支付了。
  2. 下面说下第一步

1.获取code (2.通过code换取网页授权access_token 3. 4 后端处理)

参数说明

在你需要调用支付的页面,拼接到微信提供的完整URL后面即可,需要注意你的url是经过base64处理过的,

参数中 scope=snsapi_base 两种方式,这种是只拿一个code,另一个 snsapi_userinfo 会让用户感知一下,获取一些更多的信息,目前一个code就足够了。当你重定向到这个页面之后,微信也会返回到你的redirecturl,并且在url里拼上一个code回来,此时你只需要将code传给你的后端就行。

ini 复制代码
```
// 获取路径中的code,没有code 就去微信那里拿
const code = getQueryParam('code')

if (!code) {
    const url = encodeURIComponent(href)
    window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`)
} else {
    window.location.href = href
}

需要注意的是,多次重定向可能会导致,个别组件的返回上一页问题,所以授权的页面时机要定义好。

该参数是后端去调用wx的统一下单接口获取 pay.weixin.qq.com/wiki/doc/ap...

相关推荐
beelan1 分钟前
v-on的思考
前端
山河木马4 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502194 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平8 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄11 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵11 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾17 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove23 分钟前
常见 npm 报错问题
前端·npm
sunbyte24 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子25 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试