在本站之前的文章中，我介绍了在 WordPress 中接收并处理微信支付通知消息的方法。该方法可以直接处理通知消息并判断支付状态，然后根据支付状态处理订单，却不能把通知消息反馈到前端，在前端界面上通知用户支付状态。这样的处理对用户是不友好的。
通过主动查询微信订单支付状态来改善微信支付通知消息的用户体验
在显示二维码的同时，我们可以加入一段 JS 代码，通过 Ajax 定期查询订单的支付状态，然后根据服务器返回的支付状态在前端界面上通知用户，以此来提升用户体验。下面，我将为大家介绍一下实现这一处理过程的方法。我们先来看前端 JS 代码的实现：
// 通过 Ajax 提交订单，定然返回一个 json 数据，包含二维码图片和订单号
$("#form-checkout").submit(function () {
event.preventDefault();
var address_id = $('input[name="address_id"]:checked').val();
$.ajax({
url : '<?= home_url( 'orders/add' ); ?>',
type : 'POST',
dataType: 'json',
data : {
'address_id': address_id,
},
success : function (data) {
$("#qrcode").html('<img src="' + data.url + '">');
window.view.query(data.out_trade_no);
},
error : function (errorThrown) {
console.log(errorThrown);
}
});
return false;
});
// 定期查询微信支付状态查询接口，如果成功，跳转页面
window.view = {
query: function (out_trade_no) {
$.ajax({
type : "POST",
url : '<?php echo home_url( 'query-tid' ); ?>',
data : {
out_trade_no: out_trade_no
},
timeout : 6000,
cache : false,
dataType: 'json',
success : function (data) {
if (data && data.errcode == 0) {
location.href = data.errmsg;
return;
}
setTimeout(function () {
window.view.query(out_trade_no);
}, 2000);
},
error : function () {
setTimeout(function () {
window.view.query(out_trade_no);
}, 2000);
}
});
}
};查询微信支付接口的后端实现
在这里使用了 WordPress Dispatcher 和 Omnipay 来简化查询后端的实现，简单的几行代码就实现了我们查询微信支付接口需要的功能，非常方便省事。在这里需要注意的是：验证是否支付成功，使用微信支付接口返回的 trade_state 字段
/**
* 查询微信支付订单
*/
new Dispatch( [
// 添加订阅
'query-tid' => function ( $request ) {
$out_trade_no = $_POST[ 'out_trade_no' ];
$order_post_id = $_POST[ 'order_post_id' ];
$gateway = get_wechat_gateway();
// 查询微信支付订单
$response = $gateway->query( [
'out_trade_no' => $out_trade_no,
] )->send();
// 如果交易状态为交易成功，返回成功信息
if ( $response->getData()[ 'trade_state' ] === 'SUCCESS' ) {
$data = [
'errcode' => 0,
'errmsg' => get_permalink( $order_post_id ),
];
wp_send_json( $data );
}
},
] );实现了上面的支付处理逻辑，微信支付的处理上，用户体验又更进了一层，网站会显得更加专业和可以信赖，出了上面的方法，我们还可以通过 socket 的方式来实现微信支付成功后通知前端用户，不过这种方法实现起来就比较复杂了，我还没机会尝试这种方法，等有时间了尝试后，会发文介绍。
