2020年总结之微信支付记

前几日公司项目需求需要做支付宝和微信支付,由于支付宝这边是后台直接返回form表单,然后再操作,相对来说比较简单,但是有没有其他的方法,由于时间紧我没有深入看,今天突然想把之前研究了好几天的微信支付记录下来,期待有缘人来看!

首先做支付的时候需要跟后台(java)看好公司具体需求,你们做的是JSPAI支付还是H5支付,因为这两个支付不一样。H5支付指的是在微信内置浏览器以外的浏览器打开的移动网页调用微信支付,JSAPI指的是通过微信内置浏览器打开的网页调用微信支付。

搞清自己的需求,和自己需要用的技术之外就可以开发了。(~~~我这里就是当时没跟后台沟通好,我前端传的参是JSAPI的参数,后台用的是App的参数接受,所以当时一直报错,后来后台又接入了H5的支付,还是不行,直到最后我说我们应该调用JSAPI之后,后台又重新改代码,之后才调用成功)

废话不多说,直接上代码

    const isWechat = () => {
        return (
          String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger'
        );
      };
      if (isWechat()) {
        if (this.getOpenId()) {
          //有openid
          const { dispatch, index: { payAmount, checkInCount }} = this.props;
          dispatch({
            type: postPreOrder,
            payload: {},
            callback: info => {
              router.push({
                pathname: '/campList/campPay',
              });
            },
          });
        } else {
          //没有openid
          const {
            dispatch,
            index: { payAmount, checkInCount },
          } = this.props;
          dispatch({
            type: postPreOrder,
            payload: {},
            callback: info => {
              window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
            },
          });
        }
      }

1. 第一步为了安全起见,判断一下是不是在微信里面打开的
2. 因为微信那边需要我们授权,拿到code码去换openid
   3.我们这边的逻辑是,接口返回openid,就直接到支付页面。如果后台没有返回,那么就去授权拿code。
   4.授权这儿我目前找到的方法就是直接打开微信的一个连接,之后就会弹出授权,点击确认即可,然后这个连接的参数里面还有一个重定向的URL,需要我们提前写好,授权成功之后会自动跳到这个页面,一般默认是支付页,重定向的页面URL会是https://www.mobilub.cn/cawser/?code=041JtLFa1WEBcA0eXyJa1yfijS2JtLF-&state=1,然后通过JS方法去拿到code码并存起来,因为这个要传给后台来换取调起微信支付的参数的。 以上步骤都完成之后,那么就要开始调用微信方法了(到这里应该就能拿到微信需要的6个参数了)

   window.WeixinJSBridge.invoke(
            'getBrandWCPayRequest',
            {
              appId: appId, //公众号名称，由商户传入
              timeStamp: timestamp, //时间戳，自1970年以来的秒数
              nonceStr: nonceStr, //随机串
              package: package, //这里需要自己拼接一下 `prepay_id=${package}`
              signType: signType, //微信签名方式：
              paySign: paySign, //微信签名
            },
            function(res) {
              if (res.err_msg == 'get_brand_wcpay_request:ok') {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                router.push('/campList/campPaySuccess');
              } else {
                console.log('支付失败');
              }
            },
          );

1.微信API里面给的是WeixinJSBridge.invoke,但是这个会报错,所以需要我们自己加上window
2.确定把以上的几个参数传对了,那么到这里你的支付就成功了。
3.如果你觉得对你有所帮助,可以点赞收藏噢!也可以私信我一起交流。
4.如果各位大佬有更好的解决方案,可以评论出来!