订单支付是电商很重要的一环，今天就来解析一下我们公司的支付是怎么做的，以及前端工程师在对接后端接口的时候需要做什么。
用到的支付方式是： 微信，支付宝
涉及支付的环境：
pc网页，移动端网页，微信网页，小程序网页，
页面
到这一步订单已经创建好了，可以拿到 订单号 number=xxxxx
点击支付按钮后，在当前页面弹窗alert，并且同时打开带有二维码支付的新页面
订单详情页面
支付宝支付页面
整体流程
在pc端的处理方式是：
在订单详情页面做轮训，不断查询订单支付情况，一旦查询到订单支付成功，即刻跳到成功页面，没有支付成功保持原样
扫码支付页面是一个公共页面，通过在url中传入订单号， 例如 xxxx?numberOrder=123456，然后在该页面通过订单号调取后端接口拿到
微信支付二维码（根据微信支付文档配置参数），微信可以拿到二维码，所以页面可以定制一下（如图）
支付宝支付页面无法直接定制，直接跳到支付宝页面（如图）
在 移动端的处理就稍微复杂一点了，因为支付场景变成了4种了，每个都需要特殊处理
即：
1普通网页微信支付 2微信中打开页面支付 3在微信小程序中打开页面用小程序支付 4普通网页支付宝支付
先简单介绍一下
1普通网页微信支付
需要在服务端生成一个吊起微信支付的 链接 直接 付给 location.href 因为这涉及到外部打开微信
2微信中打开页面支付
这种情况就不需要打开微信了，因为当前就在微信环境中，所以 支付方式是 调用微信客服端api进行支付
微信中打开页面支付
3在微信小程序中打开页面用小程序支付
因为我司在小程序中也要打开当前h5进行支付所以有这种场景，方案是 在h5中打开小程序页面进行支付
小程序支付
payMiddlePage/index 在小程序页面当中是这样调用支付的 这是小程序的支付api
小程序支付api
4普通网页支付宝支付
这个也是 在服务器端生成一个连接 直接给 location.href 因为这涉及到外部打开支付宝 通常外部打开 某某app 都是 生成连接给 location.href
下面是移动端点击支付按钮后大概的代码处理逻辑
总结：
这就是关于 使用微信支付宝支付，前端需要做什么，以及在代码方面要如何处理，
那么其他的工作就不是我前端的工作了，比如完整的链条就是，
首先产品经理要 通过公司资质申请 微信 支付宝的支付资格，拿到资格后，然后服务器端和前端在配合开发出完整支付功能
那么前端需要重点关注的工作是：
1轮训支付状态
2支付成功和失败的回调（涉及到后续处理）
3各种支付环境的api调用
网友评论