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

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

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

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

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

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

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

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

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

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

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

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

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