关闭

案例分析:H5支付交互体验设计(五)

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

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

总结

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

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

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

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

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表