微信支付接收通知消息后跳转到站内支付成功通知页面

关于在WordPress中处理微信支付通知消息的用户体验

在之前我介绍了在WordPress中接收并处理微信支付通知消息的方法。虽然该方法可以方便地直接处理通知消息并判断支付状态，然后根据支付状态处理订单，但是对于用户来说，没有及时反馈的支付状态是不友好的。

通过主动查询微信订单支付状态来改善微信支付通知消息的用户体验

为了提升用户体验，我们可以在显示二维码的同时，加入一段JS代码，通过Ajax定期查询订单的支付状态，然后根据服务器返回的支付状态在前端界面上通知用户。下面是前端JS代码的实现：

//通过Ajax提交订单，定然返回一个json数据，包含二维码图片和订单号
$("#form-checkout").submit(function(){
event.preventDefault();
var address_id = $('input[name="address_id"]:checked').val();

$.ajax({
url: '',
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: '',
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字段。

/**
*查询微信支付订单
*/
newDispatch([

	//添加订阅
	'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的方式来实现微信支付成功后通知前端用户，但相比前一种方法，这种方法难度较大。如果有机会尝试并实现，我会在未来的文章中介绍。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。