公众号网页微信支付

下面是以 uniapp 项目中为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
export default {
  data() {
    return {
     
    }
  },
  methods: {
    // 判断是否是微信内浏览器
    isWxBrowser() {
      if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
        return true
      } else {
        return false
      }
    },
    // 支付
    goPay() {
      if (this.isWxBrowser()) {
        // 获取调起支付的参数
        xxxxxApi().then(res => {
          let data = res.data

          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": data.appId, // 公众号名称，由商户传入
              "timeStamp": data.timeStamp, // 时间戳     
              "nonceStr": data.nonceStr, // 随机串     
              "package": data.package,
              "signType": data.signType, // 微信签名方式  
              "paySign": data.paySign, // 微信签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                uni.showToast({
                  icon: 'success',
                  title: '支付成功'
                })
              } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                uni.showToast({
                  icon: "none",
                  title: "您已取消支付"
                })
              } else {
                uni.showToast({
                  icon: "none",
                  title: "支付失败"
                })
              }
            }
          );
        })
      } else {
        uni.showToast({
          title: '请在微信中打开支付！',
          icon: 'none'
        })
      }
    },
  }
}

在支付点击完成后我们会发现会把我们的网页给全部关闭并返回到公众号上去。

这时我们需要使用微信支付的 点金计划


点金计划的使用

首先需要按到 官方文档 进行配置。

下面我们就来将下商家小票链接的配置：

首先域名是需要备案的，这就不用强调了。

其次是我们需要将文件上传到服务器目录。

假设我们把文件放到服务器的 /usr/local/service/payCallBack 目录下。

然后需要对 nginx 进行配置：

1
2
3
location /payCallBack/ {
  alias /usr/local/service/payCallBack/;
}

这样我们就可以访问到那个文件了。

然后在商家小票链接这里就需要写：https://xxx.com/payCallBack/payCalllback.html

点击提交后，我们就需要写 payCalllback.html 文件并上传到服务器 /usr/local/service/payCallBack 目录下。

同时也要开启 特约商户管理 中的 点金计划 和 商家小票。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- payCalllback.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="referrer" content="origin">
  <meta name="viewport"
    content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <title>支付完成</title>
  <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
  </script>

  <script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <div>
    <div>xxxx</div>
    <div>支付完成</div>
    <div onclick="go()">返回首页</div>
  </div>

  <script>
    var homeLink = "https://xxx"; // 要跳转的地址

    init();

    function init() {
      //初始化
      var initData = {
        action: 'onIframeReady',
        displayStyle: 'SHOW_CUSTOM_PAGE'
      }
      var initPostData = JSON.stringify(initData)
      parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
    }

    function go() {
      var mchData = {
        action: 'jumpOut',
        jumpOutUrl: homeLink // 跳转的页面
      }
      var postData = JSON.stringify(mchData)
      parent.postMessage(postData, 'https://payapp.weixin.qq.com')
    }
  </script>
</body>

</html>

同时我们还需要在 nginx 添加如下配置：

1
2
3
location / {
  add_header X-Frame-Options "ALLOW-FROM https://payapp.weixin.qq.com";
}