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

前面我们讲到了H5支付方式选择微信支付时的支付状态说明，下面就继续上篇文章的内容，一起来看看吧！

a. 在订单支付页面直接唤起微信客户端，当出现唤起微信客户端的弹框时，在订单支付页面也出现一个弹框：若在微信中支付成功，返回至该页面点击“已完成付款”，当前页面刷新至商户自定义的支付结果页；若取消支付或者在微信中没有支付成功，点击“已完成付款”，刷新页面判断订单状态，未支付则仍停留在商户的订单支付页。
b. 自定义页面：在微信中支付成功的跳转规则同上，若取消支付或者在微信中没有支付成功，则当前空白页自动跳转为“商户自定义的中间页”，可以在此中间页引导用户查看订单，重新发起支付流程。参见下图小米商城的做法。
c. 自定义中间页：虽然微信支付官方提供的中间页是空白页，如果微信支付的规则允许，商户可以自定义中间页（根据近期做的一个实践项目，微信允许这种做法）。参见下图示意：若支付成功，点击“已完成付款”，页面刷新至商户自定义的支付结果页。若支付失败，点击“已完成付款”，页面停留在当前中间页，点击“查看订单”跳转至订单列表页。
（2）若用户未安装微信客户端，会出现下图示意的弹框提示，只能选择其他支付方式付款。
系统自带的回退按钮规则：应用场景、跳转逻辑规则和注意事项，类似于支付宝。

总结

以上通过支付宝和微信支付两个具体案例，分析了手机网页支付存在的跳转逻辑和注意事项。其中有不少细节点值得大家思考：

比如为什么微信没有提供像支付宝那样的中间页，而是把中间页的设置交给了商户自己决定？为什么微信没有提供网页端收银台，没有下载微信APP就无法使用微信支付？思考这些问题，肯定是要加入业务层面的考量。

希望在后续项目中遇到类似支付应用场景时，能够对你有所帮助。大家也可以关注小编，每天都会分享一些干货内容。

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