微服务项目之电商--28.微信支付

待我称王封你为后i 2021-10-16 01:24 417阅读 0赞

**目录**

3.微信支付

3.1.介绍

3.2.开发流程

3.3.生成二维码

3.3.1.生成预交易链接

3.3.2.生成二维码

3.4.付款状态查询

3.4.1.页面循环查询支付状态

3.4.2.付款成功页面

--------------------

# 3.微信支付 #

## 3.1.介绍 ##

微信支付官方文档：[https://pay.weixin.qq.com/index.php/core/home/login?return\_url=%2F][https_pay.weixin.qq.com_index.php_core_home_login_return_url_2F]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70][]

我们选择开发文档，而后进入选择页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1][]

选择扫码支付：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2][]

此处我们使用模式二来开发：

## 3.2.开发流程 ##

模式二与模式一相比，流程更为简单，不依赖设置的回调支付URL。

商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code\_url；

商户后台系统将code\_url值生成二维码图片，用户使用微信客户端扫码后发起支付。

注意：code\_url有效期为2小时，过期后扫码不能再发起支付。

流程图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3][]

这里我们把商户（我们）要做的事情总结一下：

*  1、商户生成订单
 *  2、商户调用微信下单接口，获取预交易的链接
 *  3、商户将链接生成二维码图片，展示给用户；
 *  4、用户支付并确认
 *  5、支付结果通知：
    
     *  微信异步通知商户支付结果，商户告知微信支付接收情况
     *  商户如果没有收到通知，可以调用接口，查询支付状态
 *  6、如果支付成功，发货，修改订单状态

在前面的业务中，我们已经完成了：

*  1、生成订单

接下来，我们需要做的是：

*  2、调用微信接口，生成链接。
 *  3、并且生成二维码图片

## 3.3.生成二维码 ##

### 3.3.1.生成预交易链接 ###

我们先根据订单的编号，调用后台服务，生成交易链接，而后才能根据链接生成二维码。

在页面发起请求：

后台已经定义好生成付款地址的接口。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4][]

刷新页面查看：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5][]

### 3.3.2.生成二维码 ###

这里我们使用一个生成二维码的JS插件：qrcode，官网：[https://github.com/davidshimjs/qrcodejs][https_github.com_davidshimjs_qrcodejs]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6][]

我们把这个js脚本引入到项目中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7][]

官方使用案例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8][]

然后在页面引用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9][]

页面定义一个div，用于展示二维码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10][]

然后获取到付款链接后，根据链接生成二维码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11][]

// 判断登录状态
    ly.http.get("/auth/verify").then(() => {
        // 获取订单编号
        this.orderId = ly.getUrlParam("orderId");
        // 获取请求链接
        ly.http.get("/order/url/" + this.orderId)
            .then(resp => {
                new QRCode(document.getElementById("qrImage"), {
                    text: resp.data,
                    width: 250,
                    height: 250,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            })
    }).catch(() => {
        // 未登录，跳转至登录页
        location.href = "/login.html?returnUrl=" + location.href;
    })

刷新页面，查看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12][]

此时，客户用手机扫描二维码，可以看到付款页面。

## 3.4.付款状态查询 ##

跳转到支付页面后，我们等待用户付款，付款完成则跳转到付款成功页面。

### 3.4.1.页面循环查询支付状态 ###

不过，因为不清楚用户何时会付款，因此这里采用循环的方式，不断请求判断是否支付成功。

// 开启定时任务，查询付款状态
    const taskId = setInterval(() => {
        ly.http.get("/order/state/" + this.orderId)
            .then(resp => {
            let i = resp.data;
            if (i === 1) {
                // 付款成功
                clearInterval(taskId);
                // 跳转到付款成功页
                location.href = "/paysuccess.html?orderId=" + this.orderId;
            } else if (i === 2) {
                // 付款失败
                clearInterval(taskId);
                // 跳转到付款失败页
                location.href = "/payfail.html";
            }
        })
    }, 3000);

### 3.4.2.付款成功页面 ###

当付款成功后，自动跳转到付款成功页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13][]

[https_pay.weixin.qq.com_index.php_core_home_login_return_url_2F]: https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70]: /images/20211015/fc86471a95164766ac691628067315a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 1]: /images/20211015/598b1597911442efb10ef08c7bb07d0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 2]: /images/20211015/5585d4e916f44140bce88f0cff8dfa3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 3]: /images/20211015/f4363150dea8422da88728ccde3c09d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 4]: /images/20211015/dfbf360b68b34e06b69613499462a00e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 5]: /images/20211015/8adaaf9f35f54117aaf8e6e12e08cf2e.png
[https_github.com_davidshimjs_qrcodejs]: https://github.com/davidshimjs/qrcodejs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 6]: /images/20211015/6c0a54e447c449f4b3af1c0f22bb39bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 7]: /images/20211015/5424b6d5642e4dcf88f28b8f29e0671b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 8]: /images/20211015/ded86dae046f4f339792a0abe12615b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 9]: /images/20211015/0d9c0c08b3b14f47834e679c490a6a20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 10]: /images/20211015/056139f9713b44c7a1ff2bf02539c330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 11]: /images/20211015/5236ad5e0a4a42e79aaf50339d0a1aba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20190821110717376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA5NTA4_size_16_color_FFFFFF_t_70 13]: /images/20211015/c6f427243ea74b4dab1dd00609a7d1cb.png