Redirect to a Local Payment Success Page After Receiving a WeChat Pay Notification

In a previous article on this site, I introduced theHow to receive and process WeChat payment notification messages in WordPress. This method can directly process the notification message and determine the payment status, and then process the order based on the payment status. However, it cannot feed the notification message back to the front end and notify the user of the payment status on the front end interface. Such processing is not user-friendly.

Improve the user experience of WeChat payment notification messages by proactively querying WeChat order payment status

While displaying the QR code, we can add a piece of JS code to regularly query the payment status of the order through Ajax, and then notify the user on the front-end interface based on the payment status returned by the server to improve the user experience. Below, I will introduce to you how to implement this process. Let’s first look at the implementation of the front-end JS code:

// 通过 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);
            }
        });
    }
};

Query the back-end implementation of WeChat payment interface

used hereWordPress DispatcherandOmnipayTo simplify the implementation of the query backend, a few simple lines of code can implement the functions we need to query the WeChat payment interface, which is very convenient and trouble-free. What needs to be noted here is: verify whether the payment is successful, use the WeChat payment interface to returntrade_stateField

/**
 * 查询微信支付订单
 */
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 );
		}

	},

] );

After implementing the above payment processing logic, the user experience of WeChat payment has been improved to another level, and the website will appear more professional and trustworthy. In addition to the above method, we can also use sockets to notify the front-end users after successful WeChat payment. However, this method is more complicated to implement. I have not had the opportunity to try this method yet. I will post an introduction after I have time to try it.