微信 && 支付宝&& 银联开发前的流程调研

前言：

最近接手做一个支付中心的的项目，需要接入微信和支付宝的pc 和 h5 两个平台的支付。因为之前支付相关的服务都是各个部门自己做，但现在为了统一公司形象以及统一管理，需要做一个公共项目接公司各个业务线的支付需求。

---

一、产品需求：

• pc场景：

在pc网页端支付步骤中的收银台处显示收款二维码，支持用户选择微信 / 支付宝，用户需要自行打开手机客户端，进行扫码支付，当用户成功支付或订单超时后返回到指定订单页面。（页面展现大致如下：）

• h5场景：

在h5浏览器支付步骤中的收银台进行支付时，支持用户选择微信 / 支付宝进行支付，当选择其中一种后，调起客户端完成支付，成功或失败后返回指定订单页面。（页面展现大致如下：）

---

二、文档列表：

通过前面我们知道了需求，那就对应找一下相关文档，当前只支持微信和支付宝两种类型，故只列出两种文档

微信支付产品文档：链接

pc端调用接口类型： Native 支付

h5端调用接口类型： H5 支付

---

支付宝支付产品文档：链接

pc端调用接口类型： 电脑网站支付

h5端调用接口类型： 手机网站支付

---

银联支付产品文档：链接

pc端调用接口类型： 二维码支付

h5端调用接口类型： WAP 支付

---

三、不同类型支付中的细节梳理

看过文档后，下面是我对每个支付进行的一个细节梳理，便于大家以最快的时间熟悉流程：

1. 微信之Native支付

介绍 && 适用场景

Native支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。Native支付适用于PC网站、实体店单品或订单、媒体广告支付等场景。

---

业务流程图：

---

使用示例

---

QA 常见问题：

1. pc端生成二维码，用户扫描二维码进行支付，是用jsapi 还是 native

如需实现pc端生成二维码，用户扫描二维码进行支付，建议用Native支付

2. Native 支付返回的二维码链接code_url过期后，在不改变订单的情况下，怎么刷新二维码？

使用原参数重新调用即可获取新的code_url

3. Native 支付返回的二维码链接code_url的有效期？

code_url有效期为两个小时，过期后扫码不能再发起支付

4. 当商户调用关闭订单接口后，用户还可以支付吗？

当商户调用关闭订单后，订单无法再进行调起支付

5. 在商户关闭订单后，二维码失效吗？

当关闭订单后，二维码就会失效，无法进行支付

6. 当我前一步查询订单，结果是未支付状态，正准备关闭，此时用户扫码支付了，如果他比我快，是否可以支付成功？

此时订单状态还未修改，是可以支付成功的

---

2. 微信之H5支付

介绍 && 适用场景

H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。H5支付主要用于触屏版的手机浏览器请求微信支付的场景，方便从外部浏览器唤起微信支付。

---

业务流程图：

---

使用示例

---

QA 常见问题：

1. 返回的跳转url可以直接唤起客户端吗？

h5_url为拉起微信支付收银台的中间页面，可通过访问该url来拉起微信客户端，完成支付，h5_url的有效期为5分钟如果用户安装了客户端，可以直接唤起客户端

2. 如果用户没有安装客户端，是否会有中间页面来提示用户安装客户端或者网页登录支付，商家是否需要关心？

会有中间页面来提示，商家不用关心这个页面

3. 支付完成后，是否可以跳转到指定页面

正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在h5_url后拼接上redirect_url参数，来指定回调页面

---

3. 支付宝之电脑网站支付

介绍 && 适用场景

电脑网站支付是指商户在电脑网页展示商品或服务，用户在商户页面确认使用支付宝支付时，通过调用支付宝的支付接口，返回支付 url，前端通过 url 生成二维码，用户使用手机客户端扫码完成支付。

---

业务流程图：

---

使用示例

• 跳转到网页版支付宝，登录支付宝账号进行支付

• 跳转到支付宝已有的网页版官方页面，使用手机进行扫码支付

---

QA

1. 如何获取到支付链接

可以调用alipay.trade.page.pay接口，以get形式提交，就会直接返回类似这样的支付链接了，接口地址

打印getBody 就可以得到链接，如下：

2. 如何获取支付状态

支付的状态是通过异步通知的，在支付接口设置一下notify_url参数，支付成功后会把支付的结果通知到设置的这个地址上，一般这个地址用后端接口设置接收一下即可，前端通过轮训去调用后端查询状态，如果后端没有接收到支付宝的通知，则调用支付宝的接口去查状态，如果后端接收到支付宝的回调后，更改订单状态，并在下次前端请求时返回给前端

3. 支付url 的有效期？

可以通过修改timeout_express（支付超时参数：在订单创建后开始生效，超时未支付订单将关闭）字段来设置，取值范围：1m～15d。电脑网站支付、手机网站支付和 App 支付默认订单超时时间为 15d，timeout_express<=15d，文档地址

4. 那么问题来了，我们的需求是在pc网站展示二维码，让用户使用手机进行扫码支付，上面两种形式似乎都不满足我们的场景，该怎么办？

在开始我们有阐述过我们的场景，我们有自己设计的网站样式，且需要在pc端展示二维码，但是上面两种形式都给到的是支付宝这边的定制页面，不能满足我们只获取一个二维码的需求，那么现在就需要提到支付宝的手机支付了，就是下面的这个 👇，因为我们最后的用户也是在手机进行支付的，使用下面的接口是可以直接活去到支付链接，用户使用支付宝客户端，打开扫一扫即可进行支付。

---

4. 支付宝之手机支付

介绍 && 适用场景

手机网站支付是指商户在移动端网页展示商品或服务，用户在商户页面确认使用支付宝支付时，浏览器自动跳转支付宝 App 或支付宝网页完成付款的支付产品。

---

业务流程图：

---

使用示例

---

QA 常见问题

1. 当h5支付后如何跳会商户

需要跳转的话，后端调用alipay.trade.wap.pay(手机网站支付接口 2.0)时可以设置下return_url，在支付完成后，即可跳回商户指定页面

2. h5 如何获取跳转链接，唤起客户端

调用支付接口的方式改为get即可，如下图：

3. 当场景为需要在pc端展示二维码，让用户通过扫码支付，需要用电脑支付还是h5?

用h5的支付接口即可，用户扫码后会支付会调起客户端来发起支付

4. 什么场景用pc的接口

如果你的支付场景为让用户在pc完成支付时，那就可以调用pc的接口，支付宝会返回一个pc端的支付页面(如下图)，直接跳转到支付宝的页面，输入账号密码登录后，即可完成支付流程

---

5. 银联之二维码支付

介绍 && 适用场景

持卡人仅需使用支持银联标准的APP，通过商户或持卡人扫一扫功能，即可完成支付。根据适用场景以及发起方式的不同， 二维码目前可以分为‘主扫模式’（付款人主读模式）和‘被扫模式’（付款人被读模式）。主扫模式指收款人展示二维码，付款人扫描二维码；被扫模式指付款人展示二维码，收款人扫描二维码。链接

---

业务流程图：

分为两种模式，一个是主扫模式，一个是被扫模式

被扫支付模式 ：指付款人展示二维码，收款人扫描二维码

主扫支付流程：指收款人展示二维码，付款人扫描二维码

---

使用示例

---

QA 常见问题

---

6. 银联之WAP支付

介绍 && 适用场景

手机网页支付（WAP 支付）产品是提供给商户的移动终端客户端或网页用来支付的产品，采用手机 WAP 网页方式实现无卡支付的产品。用户在银联签约商户的手机客户端 H5 页面或浏览器网页进行付款时，可选择银联手机网页支付（WAP 支付）进行安全、便捷的支付产品。链接

---

业务流程图：

---

使用示例

1)  用户在商户手机客户端 H5 页面或浏览器网页中选择商品提交订单，进入商户订单支付界面，选择银联支付入口，用户点击确认支付，如图 1；

2)  调起银联手机网页（WAP 支付页面），进入登录云闪付账户付款或者选择直接输入银行卡信息付款，如图 2-1、2-2；

3)  银联支付完成页面显示用户支付结果，如图 3；

4)  用户点击返回商户，回跳到商户手机客户端或浏览器网页中，商户可个性化展示订单支付处理结果，如图 4。

7. 银联之大商户聚合支付及综合对账解决方案

面向品牌商户提供跨产品、跨收单机构、跨平台的银行卡刷卡、微信、支付宝、银联二维码主被扫、小程序支付、js 支付、预付卡、银行数字人民币及其他第三方支付方式的聚合支付+综合对账能力，包括商户品牌门店管理、聚合支付、实时交易流水查询及下载、综合对账单下载及查询等个性化定制服务。

选择他们的理由

这个方案会出一个支付码，用户可以使用微信、支付宝、银联二维码、数字人民币 等多种支付方式，一码多付，收款便捷，这大大减少了我们的工作量，且支持跨收单机构，也就是说可以多个收单机构共用这个一套方案。

---

QA 常见问题

1. 银联与其他支付不同的是，单银联基础的支付无法自己接入

就像上面的二维码和 wap 这种基础的银联接入，他需要有机构帮我们带入网，单一商户是无法进行接入的

2. 针对我们的场景，使用哪种支付？

我们采用了最后一种大商户聚合支付及综合对账解决方案，因为我们当前的支付中心，后面会有多个部门进行接入，使用的支付方式也是多种多样，如果是只支持微信支付宝是一种解决方案，如果需要接入银联，即可采用这套方案

总结

内心感受：说实话，做开发也算时间长一点，对于移动端的涉猎少之又少，更别说支付了，所以，当听到这个项目需要我做的时候，有些新奇，又有点担心，虽然之前也接过这种外部api，但是还是有些忐忑，因为我不知道我该了解到哪个程度才能只能我完成这个任务。项目开展在 10 月 1 放假前的几天，上班查文档，下班看视频，串流程，这篇文章就是当时的产物，现在项目做的差不多了，正好再整理润色一下，留个记录。学习下来，发现好像没那么难，想对自己说：困难就像纸老虎，勇敢一点，再勇敢一点。