浅谈Web开发中的移动支付

mobile payment

不管在移动开发还是App开发，涉及到费用问题就少不了移动支付，至少在国内微信、支付宝支付是必须接入，不然这个损失可想而知，原本是记得在某篇文章中涉及过相应的话题，无奈也只是印象中，这里浅谈Web开发中的移动支付，一来方便今后的Web开发，二来希望对大家有一定的帮助。

我们敬爱的周恩来总理在55年的万隆会议上提出了“求同存异”方针，惠及海内外。呃...貌似扯远了，我们这里主要谈谈在Web开发中微信支付和支付宝支付的“同”和“异”以及所遇到的一些问题，具体内容请往下浏览。

一、微信支付宝支付中的“同”：

在生活中我们移动支付完之后都可以看到几个比较重要的信息：金额、时间、订单号、交易流水号。其中订单号可以说是支付交易中的唯一标识，由于支付逻辑主力在后端，这里只涉及几个重要的前端支付接口：生成订单号api、生成二维码api、检核支付状态api、APP唤醒api。

1. 提交相应的商品信息，调用生成订单号api接口生成订单号。

2. 提交订单号信息，调用生成付款二维码api生成二维码图片。

生成二维码后，使用js定时器每隔相应的时间段检核支付状态。

示例Demo：

var setTimeInfo = function() {
    $.ajax({
        url: "/Api/CheckStatus/" + OrderNum, //订单号
        type: 'POST',
        dataType: 'json',
        data: {},
        success: function(data) {
            if(parseInt(data.code) == 1) { //成功后跳转
                window.location.href = "..."; 
            }
        }
    });
};
setInterval(setTimeInfo, 2000);

3. 点击唤醒按钮，调用生成订单号api接口生成新的订单号（订单号唯一性不能重复使用），调用APP唤醒api唤醒支付。

二、微信支付宝支付中的“异”：

1. 点击按钮唤醒后，微信依然需要js定时器校核支付状态成功并跳转，支付宝可以在后台设置成功跳转页面。

2. 在一些APP里面都有内置浏览器，比如支付宝内置UC，这里主体对QQ、微信、支付宝内置浏览器作分析，微信支付在这些主体里面都不能唤醒，很欣赏他一刀切的做法，但是支付宝可以在支付宝内置唤醒，其余则不可以。

PC端不存在唤醒，只需到生成二维码那步即可。

三、移动支付中遇到的问题：

1. 判断QQ、微信、支付宝内置浏览器问题。

通过js判断微信、QQ等内置浏览器并在外部浏览器打开

2. 某些情况Safari下按钮点击无效。

IOS下Safari中click点击事件无效

3. Safari下window.open()无效。

window.open在Safari中不能打开的问题

附. 问题的解决请移步后续更新的文章，第一时间附上链接，尽情期待。