react hooks 接入微信JSAPI支付

JSAPI支付只支持微信内置浏览器

首先要根据以下链接获取code,使用 urlEncode 对 reduirect_url 进行处理,使用js方法 encodeURIComponent 就可以

window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid='公众号id'&redirect_uri=${encodeURIComponent('域名+/支付页面')}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`

先说明一下以上的参数

 "appId": '公众号Id',    
  "redirect_uri": '授权后重定向的回调链接地址',    
  "response_type": '返回类型,填写code就可以',   
  "scope":'业务需求一般都是不弹出授权页面,所以填写 snsapi_base ',
  "state": '个人觉得不重要,所有我写的是123',     
  "#wechat_redirect":'必须加上'

根据这个链接重定向到的 redirect_url 会带上code,页面获取code,并传递给服务端,服务端根据code, 获取到openId,去进行JSAPI下单,并且返回 前端调用微信支付时所需的参数

code 限时五分钟有效

 "appId": //公众号ID，由商户传入     
 "timeStamp"://时间戳，自1970年以来的秒数     
 "nonceStr"://随机串     
 "package":'prepay_id=服务端调用下单返回的prepay_id'
 "signType"://微信签名方式：     
 "paySign": //微信签名 

前端调用JSAPI支付

   if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    //根据前辈们的经验防止部分的android手机不跳转微信支付页面写的
                    setTimeout(() => {
                        onBridgeReady(参数)
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    }, 1000)
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady(参数));
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(参数));
                }
            } else {
                onBridgeReady(参数);
            }


function onBridgeReady(参数) {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": //公众号ID，由商户传入     
            "timeStamp": //时间戳，自1970年以来的秒数     
            "nonceStr"://随机串     
            "package": 
            "signType": //微信签名方式：     
            "paySign": //微信签名 
        },
            function (wxres: any) {
                if (wxres.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //wxres.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      //根据业务需求跳转页面,
                }
                if (wxres.err_msg == "get_brand_wcpay_request:cancel") {
                    //跳转支付页面
                }
                if (wxres.err_msg == "get_brand_wcpay_request:fail") {
                    //跳转支付页面
                }
            }
        )
    }

后续就靠服务端去调用微信的支付通知以及查询订单返回订单的最新状态了

网页授权 | 微信开放文档