案例分析：H5支付交互体验设计（四）

前面给大家介绍了H5支付方式选择支付宝支付的案例，相信大家已经明白了。下面就来分析一下H5支付方式选择微信支付的实际案例。

H5支付方式选择微信支付

微信起初基于社交属性积累了超过10亿的用户量，逐步打造了微信生态，其中微信支付近年来也成为国内市场份额第二的移动支付工具，有超越支付宝的架势。以下举例说明手机网页中选择微信支付的交互体验设计。

1. 任务流程图
在以上支付流程中，我们能明确以下两点：

微信支付没有设置官方中间页，目前呈现的是空白页面，参见下图中弹框背景是空白页面。

对于未安装微信客户端的用户，需要选择其他支付方式付款。
2. 支付状态说明

根据支付状态说明页面跳转：

（1）若用户已安装微信客户端，在订单支付页面点击支付，进入微信支付流程，并出现弹框尝试唤起微信客户端，参见下图示意：点击打开，进入微信APP的支付界面；点击取消，停留在当前空白页面。
A. 若在微信中支付成功，切回至浏览器中，页面刷新至商户自定义的“支付结果页”。

B. 若在微信中支付失败，用户手动回到浏览器中，则当前页面呈现微信支付官方提供的空白页：

由于微信支付官方提供的中间页是空白页，而我们又不能让用户在未支付成功的情况下，看到这个空白页。所以这里提供三种解决方案。到底是哪三种解决方案呢？由于篇幅原因，下篇文章会继续详细介绍，赶紧去看看吧！

以上就是“案例分析：H5支付交互体验设计（四）”的内容了，如果你还想了解其他相关内容，可以来 产品壹佰 官方网站。