微信支付——小程序支付和H5支付

一、小程序支付

参考链接：pay.weixin.qq.com/wiki/doc/ap…

方式：JSAPI下单
步骤：

1. 先调用一个接口看看账号有没有绑定微信，有信息返回就代表有返回（根据实际情况）
2. 有绑定的话就就调用生成订单接口，获取orderId;没绑定的话就让用户点击微信授权登录；
3. 调用预支付接口，payChannel传”weixin”,deviceType传”JSAPI”，接口返回paymentInfo
4. 调用Taro.requestPayment，具体传参如下
   注意：V3版本的signType仅支持RSA，V2版本支持MD5

微信公众平台
需要在后台开通微信支付，绑定商户号

二、微信浏览器H5支付
参考链接：pay.weixin.qq.com/wiki/doc/ap…
方式：JSAPI下单

步骤：

1. 判断是否为微信内部登录

   var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      return true; //是微信内部
    } else {
      setIsWeChat(false);
      return false;
    }
   

2. 如果不是微信内部打开就提示要在微信打开

3. 如果是微信内部打开则正常请求信息，支付流程跟小程序基本一样，只是预支付返回的paymentInfo不是用在Taro.requestPayment，而是用onBridgeReady的方式，详细如下：

   const pay = (orderId) => {
    const param = {
      orderId,
      ......
    };
    // 预支付接口
    api.eduExchangeOrderPayPrepare(param).then((res) => {
      if (res.code === 1) {
        const paymentInfo = JSON.parse(res.content.paymentInfo);
        weixinPay(paymentInfo);
      }
    });
   };
   

   //搭桥前先解决微信内置对象报错
   const weixinPay = (params) => {
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener(
          "WeixinJSBridgeReady",
          onBridgeReady(params),
          false
        );
      } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", onBridgeReady(params));
        document.attachEvent("onWeixinJSBridgeReady", onBridgeReady(params));
      }
    } else {
      onBridgeReady(params);
    }
   };
   

   注意：WeixinJSBridge内置对象在其他浏览器中无效

   const onBridgeReady = (paymentInfo) => {
    WeixinJSBridge.invoke(
      "getBrandWCPayRequest",
      {
        appId: paymentInfo.appid,
        timeStamp: paymentInfo.timestamp.toString(),
        nonceStr: paymentInfo.noncestr,
        package: "prepay_id=" + paymentInfo.prepayid,
        paySign: paymentInfo.sign,
        signType: "RSA",
      },
      function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        } else {
          // 支付失败
        }
      }
    );
   };
   

公众号网页授权：

参考链接：developers.weixin.qq.com/doc/offiacc…

一般来说步骤如下：
需要跳转到https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=${encodeURIComponent('xxx')}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect进行授权获取code，再用这个code传给后端，获取openId（redirect_uri就是要跳转的url）

公众号设置：

1. 公众号需要是已认证过的服务号，订阅号不行。然后添加域名，最多两个，如果超出的话，跟后端说，让后端做代理

2. 开通微信支付，绑定商户号

商户平台设置：
登录微信商户平台-产品中心-开发配置，配置支付授权路径。注意：后面的 / 一定要加上，表示该路径下的页面都可以调起微信的支付接口

三、外部浏览器H5支付
方式：H5支付
参考链接：pay.weixin.qq.com/wiki/doc/ap…
调用下单接口，返回一个Url，然后在外部浏览器打开那个url即可