项目复盘-支付功能前端需要做什么

订单支付是电商很重要的一环，今天就来解析一下我们公司的支付是怎么做的，以及前端工程师在对接后端接口的时候需要做什么。

用到的支付方式是： 微信，支付宝

涉及支付的环境：

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调用