随着互联网技术和手机软硬件的快速发展，手机使用场景已经融入日常生活的方方面面。 购物用淘宝下单、饿了就叫美团外卖、出行用滴滴……这些涉及衣食住行的应用，都离不开一个核心环节：在线支付。 移动支付通常可以细分为“移动APP应用中集成支付功能”和“移动Web应用中集成支付功能”两种场景。 本文以支付宝和微信支付为例分析“移动Web应用中支付的交互体验设计（以下简称H5）”。

一、APP支付与H5支付的异同

1.什么是APP支付和H5支付？

APP支付是指“在手机APP中集成支付宝支付、微信支付或其他第三方支付功能的商户”。

H5支付是指“在移动网页（触摸屏手机浏览器）应用中集成支付宝支付、微信支付或其他第三方支付功能的商户”。

2.两种支付方式的异同

相同点：

它们都是调用第三方应用提供的支付功能。 应用内支付或调用第三方客户端支付取决于第三方提供的接口规则。 不同之处：

APP内支付流程的页面跳转路径清晰。 无论是跳转第三方客户端支付，还是APP内调用第三方网页支付，支付成功或失败都会在“订单支付”页面清晰告知。 订单状态。 H5支付是在手机浏览器中打开的网页。 在结算页面，选择支付方式，确认支付。 您可以选择当前页面或新页面来激活第三方支付。 而调用的第三方支付页面是由第三方决定的，商家只能在有限的规则内进行调整。 因为手机浏览器系统有自己的前进和后退按钮，并且通常没有办法限制系统自带的按钮。 这意味着H5支付，无论支付成功还是失败，都必须考虑用户点击系统后退按钮的跳转规则。

2. H5支付方式选择支付宝。

支付宝是淘宝网等阿里巴巴产品在线支付的唯一或主要支付方式，已成为中国市场份额最大的移动支付应用。 下面的例子说明了在移动网页上选择支付宝支付的交互体验设计。

1、任务流程图

从上面的支付流程我们可以明确以下两点：

（1）支付宝提供官方设置的中间页面，该页面无法自定义和删除，如下图。

（2）支付宝考虑的场景非常全面：如果用户安装了支付宝客户端，就可以直接打开支付宝完成支付。 如果用户尚未安装支付宝，则提供路径引导其到应用商店下载并安装支付宝（如下图1所示）； 他还可以选择在网页上打开“支付宝网络收银台”页面（如下图2所示），登录并输入账号密码后，完成支付。

2. 付款状态说明

具体支付过程中，会根据支付是否成功来决定页面跳转； 另外，移动网页无论是在当前页面还是新页面开始支付，对应的后备跳转规则都是不同的。

跳转至支付状态描述页面：

（1）如果用户安装了支付宝客户端，在订单支付页面点击“支付”，调出支付宝提供的中间页面，弹出框尝试调用支付宝客户端。 如下图：点击打开，跳转至支付宝APP。 在支付宝付款确认界面完成付款； 点击取消，停留在当前支付宝支付路由页面（中间页面）。

A。 如果支付宝支付成功，切换回浏览器，页面将刷新至商户定制的“支付结果页面”。

b. 如果支付宝支付失败，用户手动返回浏览器，当前页面会显示支付宝支付路由页面（官方提供的中间页面）：

点击“使用支付宝APP支付”并申请重新开通支付宝支付。

点击“继续浏览器支付”，当前页面会弹出支付宝网页支付收银台，如下图： 如果账户登录成功，在后续支付页面支付成功，则显示支付宝网页支付成功页面将显示。 点击“完成”，当前页面将刷新至商户定制的“支付结果页面”。

点击“支付完成”：如果支付成功，当前页面将刷新至商户自定义的“支付结果页面”。 如果支付失败，会出现弹框（如下图）。 点击继续付款。 当前页面会弹出支付宝网页收银页面。 后续流程同上； 单击取消保留在当前页面。

（2）如果用户未安装支付宝客户端，可以选择下载安装支付宝APP，或使用支付宝网页收银页面进行支付。 参见上面的流程。

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

在订单支付页面，如果选择当前页面调用支付宝支付，订单支付页面会跳转到支付宝支付路由页面（官方中间页面）。 无论最终订单是否支付成功，点击浏览器的后退按钮，页面都会一页一页地移动。 回去。 在订单支付页面，如果选择打开新页面调用支付宝支付，无论最终订单是否支付成功，都只支持返回支付宝支付路由页面（官方中间页面），因为该中间页面没有返回路径。 如果用户手动切换浏览器后台，返回上一个订单支付页面：如果支付成功，页面会刷新到商户定制的“支付结果页面”。 此时，如果点击系统回退按钮：页面将逐步回退。 这里注意：回滚过程中能否及时判断订单状态将决定是否回滚到最终页面。

如果支付不成功，页面将停留在“订单支付”页面。 此时，点击系统回滚按钮：页面将逐步回滚。 回滚页面的状态由具体需求决定。 例如，对于订单，先确认，然后付款。 若订单已确认提交但尚未支付，回滚后无需再次确认，可直接在后续流程中支付。

3、H5支付方式选择微信支付

微信基于社交属性初步积累了超过10亿用户，并逐步构建了微信生态系统。 近年来，微信支付已超越支付宝，成为国内市场份额第二大移动支付工具。 下面的例子说明了在移动网页上选择微信支付的交互体验设计。

1、任务流程图

在上述支付流程中，我们可以明确以下两点：

微信支付没有设置官方中间页面，目前显示为空白页面。 如下图所示，弹出框的背景是空白页。 对于未安装微信客户端的用户，需要选择其他支付方式进行支付。

2. 付款状态说明

跳转至支付状态描述页面：

（1）如果用户安装了微信客户端，在订单支付页面点击支付进入微信支付流程，会弹出框尝试激活微信客户端。 如下图： 点击打开，进入微信APP的支付界面； 点击取消，停留在当前空白页。

A、如果微信支付成功，切换回浏览器，页面会刷新至商户定制的“支付结果页面”。

B、如果微信支付失败，用户手动返回浏览器，当前页面将显示为微信支付官方提供的空白页面：

由于微信支付官方提供的中间页面是一个空白页面，我们不能让用户在没有支付成功的情况下看到这个空白页面。 所以这里有三个解决方案：

A。 订单支付页面直接调用微信客户端。 当出现调用微信客户端的弹框时，订单支付页面也会出现弹框：如果微信支付成功，返回页面，点击“支付完成”。 当前页面刷新至商户自定义支付结果页面； 如果微信支付被取消或支付不成功，请点击“支付完成”并刷新页面以确定订单状态。 若未付款，仍停留在商户订单支付页面。

b. 自定义页面：微信支付成功跳转规则同上。 如果微信支付取消或者支付不成功，当前空白页面会自动跳转到“商户定制中间页面”。 您可以点击这个中间页面引导用户查看订单并重新启动付款流程。 小米商城的做法见下图。

C。 自定义中间页：虽然微信支付官方提供的中间页是空白页面，但如果微信支付规则允许，商户可以自定义中间页（根据最近的一个实际项目，微信允许这种做法）。 如下图： 如果支付成功，点击“支付完成”，页面会刷新到商户自定义的支付结果页面。 如果支付失败，点击“支付完成”，页面将停留在当前中间页面。 点击“查看订单”，跳转至订单列表页面。

（2）如果用户未安装微信客户端，则会出现如下图的弹窗提示，用户只能选择其他支付方式进行支付。

系统自带后退按钮规则：应用场景、跳转逻辑规则及注意事项，类似于支付宝。

总结

以上通过支付宝和微信支付的两个具体案例来分析移动网页支付的跳转逻辑和注意事项。 有很多细节值得思考：

比如，为什么微信不像支付宝那样提供中间页面，而是把中间页面的设置留给商家自己？ 为什么微信不提供网页结账，为什么不下载微信APP就不能使用微信支付？ 在思考这些问题的时候，我们必须加上业务层面的考虑。

希望对您在后续项目中遇到类似的支付应用场景时有所帮助。

参考链接：

支付宝文档中心-手机网站支付

微信支付开放文档

#专栏作家#

专注电商领域的产品业务和用户体验，善于逻辑分析。