react 微信h5支付

官方文档：developers.weixin.qq.com/doc/offiacc…

微信公众号设置-功能设置-设置JS接口安全域名

在入口文件引入js文件
const script  = document.createElement('script');
script .type = 'text/javascript';
script .async = true;
script .src = 'http://res.wx.qq.com/open/js/jweixin-1.6.0.js';
document.head.appendChild(script );

判断当前环境

var ua = navigator.userAgent.toLocaleLowerCase();
//是否在微信中运行
var isWechat = /micromessenger/i.test(ua);

调用wx，加上window

从后端获取的时间戳，随机串，签名信息res
签名需要获取当前url
let myUrl = window.location.href.split('#')[0];

window.wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wx************4e0', // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature,// 必填，签名
      jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
    });

从后端获取的时间戳，随机串，支付参数，签名等信息payRes
 window.wx.chooseWXPay({
      timestamp: payRes.data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      nonceStr: payRes.data.nonce_str, // 支付签名随机串，不长于 32 位
      package: `prepay_id=${payRes.data.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
      signType: payRes.data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
      paySign: payRes.data.paySign, // 支付签名
      success: function (res) {
        // 支付成功后的回调函数
        console.log(res);
      }
    });
  };

也可以使用微信官方js-sdkwww.npmjs.com/package/wei…

npm install weixin-js-sdk