先去配置一下查询订单接口的地址 .. 在 config .. wxpay.js 这里 .. 在这个 api 里面,再添加一个 orderquery .. 对应的值就是微信支付查询订单接口的地址 .. api.mch.weixin.qq.com/pay/orderquery
回到 CheckoutController 控制器 .. 在这个 query 方法里面,我们可以去准备一下查询订单的时候需要带的数据 ..
可以在我们之前定义的 pay 这个方法里面去复制一下 .. 需要的是 appid,mch_id ,key .. 还有 out_trade_no ..
粘贴到 query 方法里面 .. 注意在执行查询的时候 .. 需要根据微信支付的订单号,或者我们自己应用里面的这个订单号去查询 .. 这个 out_trade_no 应该是我们自己系统里面的某个订单的编号 ..
因为我们还没有一个完整的订单系统,所以可以暂时先找个简单的方法 .. 在 pay 这个方法里面 .. 生成了订单号以后,可以把这个订单号放到用户的 session 里面存起来 ..
先把 session 解构出来 ..
然后可以再去用一下 session 的 put , 名字是 out_trade_no .. 对应的值是上面这个 out_trade_no .. 这样每次生成订单号的时候,都会把这个订单号放到 session 里面保存起来 ..
再回到 query 方法 .. 这个 out_trade_no 的值,我们可以使用 session 的 get 方法,获取到存储在用户 session 里的 out_trade_no ..
然后可以再把需要用的这个 session 解构出来 ..
这里还需要一个随机的字符 .. 可以再去复制一份 .. 放到 query 方法里面 ..
下面再添加一个 查询订单接口 .. 名字是 orderQueryApi .. 对应的值可以使用 Config.get .. 得到 wxpay.api.orderquery
再添加一个 order .. 里面包含 appid .. mch_id .. out_trade_no 还有 nonce_str
还需要一个签名数据 .. 添加一个 sign .. 用一下 this.wxPaySign .. 参与签名的数据是上面定义的 order .. 还需要一个 key ..
再去把要发送给查询订单接口的数据转换成 xml 格式的 .. xmlOrder .. 用一下 this.orderToXML .. 转换的是 order ,还有 sign ..
下面我们就可以去请求查询订单接口了 .. 添加一个 wxPayQueryResponse .. await 等待执行结果.. axios ,用一下 post ,地址是 orderQueryApi .. 要带的数据是 xmlOrder
得到的响应里的数据是 xml 格式的 .. 可以再转换一下 .. const result .. 用一下 this.xmlToJS .. 转换的是 wxPayQueryResponse 里的 data 属性的值 ..
这个查询结果可以输出到日志里再检查一下 .. logger.debug .. 输出 result ..
最后可以再 return 得到的这个 result ..
main.js
回到支付页面上的自定义脚本 .. 请求成功以后,得到的 response 里面,会包含 trade_state .. 它的值就是订单的状态 ..
比如 NOTPAY 表示未支付 .. SUCCESS 就表示支付成功 .. 这里用一个 switch .. 判断一下 response 里的 trade_state ..
如果它的值是 SUCCESS .. 表示支付成功 .. 我们可以把用户带到支付成功页面 .. window.location.href = '/checkout/completed' ..
默认情况我们可以把得到的 response 输出到控制台上 ..
再取消注释 pay 方法里的这个跳转页面的代码 ..