【微信支付】前端 JSAPI 时序图及代码实现 Hook，微信内置浏览器，公众号开发

主要参数都是从后端获取的，非常考验后端的签名，签名不对就要调试很久，切记官方的 java-sdk 可能是有问题的总是签名失败，当然也许是我们的后端使用方式不对

import { useState } from "react";

const usePay = (success: () => void, failed?: () => void) => {
  const [payLoading, setPayLoading] = useState(false);
  // jsapi方法
  const onBridgeReady = (appId: any, timeStamp: any, nonceStr: any, pkg: any, paySign: any, signType: any) => {
    try {
      console.log("Pay log", {appId, timeStamp, nonceStr, pkg, signType, paySign });
      (window as any).WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: appId, // 需要在微信绑定商户号，成功之后会生成有appid
          timeStamp: timeStamp, // 时间戳，自1970年以来的秒数，前端需要从后台获取该数据
          nonceStr: nonceStr, // 随机串，前端需要从后台获取该数据
          package: pkg, // 前端需要从后台获取该数据
          signType: signType, // 微信签名方式,默认为"MD5",也可以从后台获取
          paySign: paySign, // 微信签名，前端需要从后台获取该数据
        },
        function (res) {
          console.log(res.err_msg);
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            console.log("购买成功");
            success();
          } // 使用以上方式判断前端返回, 微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
          else {
            console.log("购买失败");
            failed?.();
          }
          setPayLoading(false);
        }
      );
    } catch (error) {
      console.log("usePay-onBridgeReady error:", error);
      setPayLoading(false);
    }
  };

  const payAction = async (payParams: {
    appId: string;
    timeStamp: string;
    nonceStr: string;
    pkg: string;
    paySign: string;
    signType: string;
  }) => {
    try {
      setPayLoading(true);
      const { appId, timeStamp, nonceStr, pkg, paySign, signType } = payParams;
      const pay = () => {
      	onBridgeReady(appId, timeStamp, nonceStr, pkg, paySign, signType);
      }
      if (typeof (window as any).WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          (document.addEventListener as any)("WeixinJSBridgeReady", pay, false);
        } else if ((document as any).attachEvent) {
          (document as any).attachEvent("WeixinJSBridgeReady", pay);
          (document as any).attachEvent("onWeixinJSBridgeReady", pay);
        }
      } else {
        // 传入下面参数,这些参数需要从后台获取 (下单接口获取, 问后台要)
        pay()
      }
    } catch (error) {
      console.log("usePay-payAction error:", error);
      setPayLoading(false);
    }
  };

  return { payAction, payLoading };
};
export default usePay;