React实现微信公众号支付
  ttOzQgS7km1w 2023年12月12日 25 0


 请求后台接口获取weChatData数据

公众号

React实现微信公众号支付_微信公众号支付

请求后台接口获取weChatData数据

然后实现下面代码

/**
     * 微信公众号支付的数据
     */
    if (weChatData !== oldWeChatData && weChatData) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(weChatData), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(weChatData));
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(weChatData));
        }
      } else {
        this.onBridgeReady(weChatData);
      }
    }

 下面代码里面就是直接拉起微信支付,支付结果的操作

/**
   * 拉起微信公众号支付
   * @param response
   */
  onBridgeReady = (response) => {
    if (response.package === undefined) {
      return;
    }
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": response.appid,     //公众号名称,由商户传入
        "timeStamp": response.timestamp,         //时间戳,自1970年以来的秒数
        "nonceStr": response.nonce_str, //随机串
        "package": response.package,
        "signType": response.signType,         //微信签名方式:
        "paySign": response.paySign //微信签名
      },
      function (res) {
        if (res.err_msg === "get_brand_wcpay_request:ok") {
          router.push('/results/check');
        } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
          message.info("支付取消");
        } else if (res.err_msg === "get_brand_wcpay_request:fail") {
          router.push('/results/check');
        } else {
          message.info(res.err_msg);
        }
        WeixinJSBridge.log(response.err_msg);
      }
    );

  };

以上操作的过程中在android中会出现拉起微信支付慢的情况,考虑的android支付情况我们可以给微信请求数据成功后执行一个加载圈用户不能操作、知道用户取消支付、支付成功、失败才让加载圈隐藏。

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

上一篇: React实现支付宝支付代码 下一篇: 再见2018
  1. 分享:
最后一次编辑于 2023年12月12日 0

暂无评论

推荐阅读
ttOzQgS7km1w