案例分析：H5支付交互体验设计
随着互联网技术和手机软硬件的高速发展 ， 手机的使用场景已经融入到日常生活的点滴中 。 购物用淘宝下单 ， 饿了在美团点外卖 ， 出行滴滴一下……这些关联衣食住行的应用 ， 都离不开一个核心环节：线上支付 。
手机支付通常可以细分为两种场景：“手机APP应用中集成支付功能”、“手机网页应用中集成支付功能” 。 本文以支付宝和微信支付举例分析“手机网页应用进行支付的交互体验设计” 。
文章图片
一、APP支付与H5支付的异同1.什么是APP支付和H5支付？
APP支付是指“商户在移动端APP中集成了支付宝支付、微信支付 ， 或者其他第三方支付功能” 。
H5支付是指“商户在移动端网页应用中集成了支付宝支付、微信支付 ， 或者其他第三方支付功能” 。
2.两种支付方式的异同
相同点：
都是调用第三方应用提供的支付功能 。
应用内支付或者调起第三方客户端支付 ， 取决于第三方提供的接口规则 。
不同点：
APP内支付流程的页面跳转路径是明确的 ， 无论是跳转至第三方客户端支付、还是在APP内调起第三方网页支付 ， 支付成功或失败 ， 都将在“订单支付”页面明确获知订单状态 。
H5支付是在手机浏览器中打开的网页 ， 在结算台页面选择支付方式确认支付 ， 可以选择当前页、或者选择新开页面调起第三方支付 。 并且调起的第三方支付页面由第三方决定 ， 商户只能在限定的规则内调整 。
由于手机浏览器系统自带前进与后退按钮 ， 并且通常情况下无法对系统自带的按钮做限制 。 这就意味着H5支付 ， 无论支付成功或失败 ， 都要考虑用户点击系统回退按钮的跳转规则 。
二、H5支付方式选择支付宝支付
支付宝是淘宝与阿里系其他产品线上支付的唯一或者主要支付方式 ， 已经成为国内市场份额第一的移动支付应用 。 以下举例说明手机网页中选择支付宝支付的交互体验设计 。
1.任务流程图
文章图片
从以上支付流程中 ， 我们能明确以下两点：
支付宝提供了官方设置的中间页 ， 并且此页无法自定义删除 ， 下图示意 。
文章图片
支付宝考虑的场景非常全面：若用户已安装支付宝客户端 ， 可直接打开支付宝完成支付 。 若用户未安装支付宝 ， 提供了引导至应用商店下载并安装支付宝的路径；也可以选择在网页端调起“支付宝网页收银台”页面 ， 登录账号输入密码之后完成支付 。
文章图片
文章图片
2.支付状态说明
具体支付过程中会根据支付是否成功 ， 决定页面的跳转；另外手机网页到底是当前页调起支付、还是新开页面调起支付 ， 对应的回退跳转规则是不同的 。
根据支付状态说明页面跳转：
若用户已安装支付宝客户端 ， 在订单支付页面点击支付 ， 调起支付宝提供的中间页 ， 并出现弹框尝试唤起支付宝客户端 ， 参见下图示意：点击打开 ， 跳转到支付宝APP ， 在支付宝的确认支付界面完成支付；点击取消 ， 停留在当前支付宝支付路由页面 。
文章图片
a.若在支付宝中支付成功 ， 则切回至浏览器中 ， 页面刷新至商户自定义的“支付结果页” 。
b.若在支付宝中支付失败 ， 用户手动回到浏览器中 ， 则当前页面呈现支付宝支付路由页面：
点击“使用支付宝APP付款” ， 再次申请打开支付宝支付 。
点击“继续浏览器付款” ， 当前页面调起支付宝网页支付收银台 ， 下图示意：若成功登录账号并且在后续付款页面支付成功 ， 则展示支付宝网页端支付成功页 ， 点击完成 ， 当前页面刷新至商户自定义的“支付结果页” 。
文章图片
点击“已完成付款”：若已经支付成功 ， 当前页刷新至商户自定义的“支付结果页” 。 若支付失败 ， 则出现弹框 ， 点击继续付款 ， 当前页调起支付宝网页收银台页面 ， 后续流程同上；点击取消 ， 停留在当前页面 。
文章图片
若用户未安装支付宝客户端 ， 可以选择下载安装支付宝APP ， 或者使用支付宝网页收银台页面支付 ， 参见上面的流程 。
系统自带的回退按钮规则：
在订单支付页面 ， 若选择当前页面调起支付宝支付 ， 则订单支付页面跳转为支付宝支付路由页面 ， 无论最终订单是否支付成功 ， 点击浏览器的回退按钮 ， 页面将逐页回退 。
在订单支付页面 ， 若选择新开页面调起支付宝支付 ， 无论最终订单是否支付成功 ， 仅支持回退到支付宝支付路由页面 ， 因为这个中间页再没有回退路径了 。 如果用户手动切换浏览器后台 ， 回到之前的订单支付页：
若已支付成功 ， 页面刷新至商户自定义的“支付结果页” ， 此时若点击系统回退按钮：页面将逐级回退 。 这里需要注意：回退过程中是否能够及时判断订单状态 ， 将决定回退到最终的页面 。
若未支付成功 ， 页面停留在“订单支付”页面 ， 此时点击系统回退按钮：页面将逐级回退 。 回退页面的状态由具体需求决定 ， 比如对于某个订单 ， 先确认后支付 ， 若已经确认提交了订单但未支付 ， 回退之后无需再次确认 ， 后续流程中直接支付即可 。
三、H5支付方式选择微信支付
微信起初基于社交属性积累了超过10亿的用户量 ， 逐步打造了微信生态 ， 其中微信支付近年来也成为国内市场份额第二的移动支付工具 ， 有超越支付宝的架势 。 以下举例说明手机网页中选择微信支付的交互体验设计 。
1.任务流程图
文章图片
在以上支付流程中 ， 我们能明确以下两点：
微信支付没有设置官方中间页 ， 目前呈现的是空白页面 ， 参见下图中弹框背景是空白页面 。
对于未安装微信客户端的用户 ， 需要选择其他支付方式付款 。
文章图片
2.支付状态说明
根据支付状态说明页面跳转：
若用户已安装微信客户端 ， 在订单支付页面点击支付 ， 进入微信支付流程 ， 并出现弹框尝试唤起微信客户端 ， 参见下图示意：点击打开 ， 进入微信APP的支付界面；点击取消 ， 停留在当前空白页面 。
文章图片
A.若在微信中支付成功 ， 切回至浏览器中 ， 页面刷新至商户自定义的“支付结果页” 。
B.若在微信中支付失败 ， 用户手动回到浏览器中 ， 则当前页面呈现微信支付官方提供的空白页：
由于微信支付官方提供的中间页是空白页 ， 而我们又不能让用户在未支付成功的情况下 ， 看到这个空白页 。 所以这里提供以下三种解决方案：
a.在订单支付页面直接唤起微信客户端 ， 当出现唤起微信客户端的弹框时 ， 在订单支付页面也出现一个弹框：若在微信中支付成功 ， 返回至该页面点击“已完成付款” ， 当前页面刷新至商户自定义的支付结果页；若取消支付或者在微信中没有支付成功 ， 点击“已完成付款” ， 刷新页面判断订单状态 ， 未支付则仍停留在商户的订单支付页 。
文章图片
b.自定义页面：在微信中支付成功的跳转规则同上 ， 若取消支付或者在微信中没有支付成功 ， 则当前空白页自动跳转为“商户自定义的中间页” ， 可以在此中间页引导用户查看订单 ， 重新发起支付流程 。 参见下图小米商城的做法 。
文章图片
c.自定义中间页：虽然微信支付官方提供的中间页是空白页 ， 如果微信支付的规则允许 ， 商户可以自定义中间页 。 参见下图示意：若支付成功 ， 点击“已完成付款” ， 页面刷新至商户自定义的支付结果页 。 若支付失败 ， 点击“已完成付款” ， 页面停留在当前中间页 ， 点击“查看订单”跳转至订单列表页 。
文章图片
【案例分析：H5支付交互体验设计】若用户未安装微信客户端 ， 会出现下图示意的弹框提示 ， 只能选择其他支付方式付款 。
文章图片
系统自带的回退按钮规则：应用场景、跳转逻辑规则和注意事项 ， 类似于支付宝 。
总结
以上通过支付宝和微信支付两个具体案例 ， 分析了手机网页支付存在的跳转逻辑和注意事项 。 其中有不少细节点值得大家思考：
比如为什么微信没有提供像支付宝那样的中间页 ， 而是把中间页的设置交给了商户自己决定？为什么微信没有提供网页端收银台 ， 没有下载微信APP就无法使用微信支付？思考这些问题 ， 肯定是要加入业务层面的考量 。
希望在后续项目中遇到类似支付应用场景时 ， 能够对你有所帮助 。
参考链接：
题图来自Unsplash ， 基于CC0协议 。
推荐阅读
![[央广网]商务部：“直播带货”必须合法合规](http://p2.cri.cn/M00/8E/65/CqgNOl3OWDSAWaVgAAAAAAAAAAA576.1024x586.jpg)
![[一人穷游中国]朋友圈说说五四寄语，最新5.4青年节短信祝福语大全](https://imgcdn.toutiaoyule.com/20200505/20200505163733382066a_t.jpeg)
- 支付宝、微信未必安全？手机出现这3种征兆，你或许已被黑客监听
- 英法院裁定印度首富亲弟败诉，需21天内向中资银行支付7.17亿美元
- 小鹏汽车P7正式亮相深圳 和支付宝达成战略合作
- 没密码就能扫走你的钱？微信支付一定要打开这个功能，要设置好
- 车载微信好用吗？全新交互体验，2020款哈弗F5 Fun-Life系统尝鲜
- 马云用12亿建支付宝大楼，为啥不选北上广，却偏爱这个二线城市？
- 马云又一预言成真？新支付方式强势崛起，扫码支付或将被取代
- 特朗普又不想“断供”世卫？美媒：以后和中国支付一样的费用
- 支付宝“最严”新规来了！用户出现这3种行为花呗恐将永久封停！
- 支付宝蚂蚁庄园5月23日正确答案 为什么很多人在下雨天会睡得更香？