支付宝支付成功后通知在微信打开的提示页面

背景

正常情况下，在微信浏览器使用支付宝支付，会出现一大坨链接，让你手动的复制到浏览器打开去操作。

这样的用户体验，别说用户，就连没有审美的程序员也不能忍的。

于是阿力饼饼给出了方案，倒不是解决跳转的问题，只是把那个不友好的提示，通过判断，给出已给相对友好的提示。

在园友的文章：腾腾流氓，云云更流氓（问微信怎样接入支付宝支付），手贱的赶紧点，你会感谢我的 里，有详细的介绍。

等到你在浏览器里支付完成之后（如果有唤起支付宝APP，那么将在APP里支付），手动的关闭浏览器，回到微信。

这个时候，你会发现，微信上还是那个友好的提示页面。

关于这个问题，原文中也给出了办法：

首先呢，在pay方法中添加一个参数，可以为orderid，然后同加密后的url一起跳转到pay.htm，再然后，在pay.htm页面中获取到orderid，写个定时器，每隔几秒中去服务器查询订单的支付状态，如果支付成功了，就跳转到支付成功的页面。用户再返回微信的时候看到的就不会是“快到碗里来”的提示了。

这是个办法，这个办法同样的适用于，在PC端使用微信扫码支付后页面的跳转。见：https://www.zhihu.com/question/30355733

关于消息推送，可以看这篇文章获取更多信息：WebSocket与消息推送。文章中提到了SignalR：

SignalR是一个ASP .NET下的类库，可以在ASP .NET的Web项目中实现实时通信。在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用长轮询来保证达到相同效果。
官网：http://signalr.net/
源码：https://github.com/SignalR/SignalR

 

思路

那我们就尝试使用SignalR解决此问题，解决思路如下：

1.支付宝支付完成

2.支付宝会请求你设置的notify_url

3.在此方法中，处理你的业务逻辑，处理成功，则通知在微信里的提示页面

4.页面获取到通知信息，跳转到支付成功页面

5.等用户返回微信后，看到的就是支付成功页面了。

 

实现

首先我们下载官方demo:Tutorial: Getting Started with SignalR 2

是一个网页聊天的例子，我们加以改造。

新建hub类：

    public class TestHub : Hub
    {

    }

控制器代码：

  public class TestController : Controller
    {
        public void CallBack()
        {
            //模拟支付宝支付成功后，notify方法
            //业务逻辑......
            //通知客户端
            var context = GlobalHost.ConnectionManager.GetHubContext<TestHub>();
            context.Clients.All.addNewMessageToPage("ok");
        }

        public ActionResult Default()
        {
            return View();
        }
    }

View页面代码：

@{
    ViewBag.Title = "SignalR";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="/Theme/Css/Login.css">
<div class="main">
    接收到服务端的通知，我就跳转至博客园
</div>

<script src="~/Theme/Js/jquery.signalR-2.0.3.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {
        // Reference the auto-generated proxy for the hub.
        var chat = $.connection.chatHub;

        // Create a function that the hub can call back to display messages.
        chat.client.addNewMessageToPage = function (str) {
            //服务器返回
            if (str == "ok") {
                window.location.href = "https://www.cnblogs.com/";
            }
        };

        $.connection.hub.start().done(function () {
            //chat.server.send("ok");
        });
    });
</script>

这样的话，我们微信打开/Test/Default页面，再访问/Test/CallBack，就会发现/Test/Default页面跳转到博客园了。

（完）