关闭

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

前面给大家详细分析了H5支付选择支付宝支付的案例,下面就接着上篇文章的内容继续介绍。
前面给大家详细分析了H5支付选择支付宝支付的案例,下面就接着上篇文章的内容继续介绍。

a.若在支付宝中支付成功,则切回至浏览器中,页面刷新至商户自定义的“支付结果页”。

b.若在支付宝中支付失败,用户手动回到浏览器中,则当前页面呈现支付宝支付路由页面(官方提供的中间页):

点击“使用支付宝APP付款”,再次申请打开支付宝支付。

点击“继续浏览器付款”,当前页面调起支付宝网页支付收银台,下图示意:若成功登录账号并且在后续付款页面支付成功,则展示支付宝网页端支付成功页,点击完成,当前页面刷新至商户自定义的“支付结果页”。
1点击“已完成付款”:若已经支付成功,当前页刷新至商户自定义的“支付结果页”。若支付失败,则出现弹框(下图示意),点击继续付款,当前页调起支付宝网页收银台页面,后续流程同上;点击取消,停留在当前页面。
2(2)若用户未安装支付宝客户端,可以选择下载安装支付宝APP,或者使用支付宝网页收银台页面支付,参见上面的流程。

系统自带的回退按钮规则:

在订单支付页面,若选择当前页面调起支付宝支付,则订单支付页面跳转为支付宝支付路由页面(官方中间页),无论最终订单是否支付成功,点击浏览器的回退按钮,页面将逐页回退。

在订单支付页面,若选择新开页面调起支付宝支付,无论最终订单是否支付成功,仅支持回退到支付宝支付路由页面(官方中间页),因为这个中间页再没有回退路径了。如果用户手动切换浏览器后台,回到之前的订单支付页:

若已支付成功,页面刷新至商户自定义的“支付结果页”,此时若点击系统回退按钮:页面将逐级回退。这里需要注意:回退过程中是否能够及时判断订单状态,将决定回退到最终的页面。

若未支付成功,页面停留在“订单支付”页面,此时点击系统回退按钮:页面将逐级回退。回退页面的状态由具体需求决定,比如对于某个订单,先确认后支付,若已经确认提交了订单但未支付,回退之后无需再次确认,后续流程中直接支付即可。

支付宝的案例就介绍到这里了,下篇文章给大家介绍H5支付方式选择微信支付的案例,感兴趣的话可以继续去看看。

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

0条评论 添加新讨论

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