第三方支付平台竞品分析报告（中）

接上文。

四、支付界面分析

    支付功能是所有支付平台的核心，研究支付平台的支付功能可以帮助我行更好地理解不同支付方式带来的用户体验。这不仅有助于我行在未来优化支付功能设计，还可以让我行为用户提供更符合场景需求的支付体验，从而提升产品的竞争力和用户满意度。因此，本章特别详细对比各大平台在H5支付、APP内支付、扫码支付的支付逻辑和界面设计差异，通过这种对比分析，我们期望找到最适合我行用户群体的支付方式，提升用户粘性。

4.1 H5支付

    H5支付是指商户在移动端网页（触屏版手机浏览器）上集成了支付宝、微信支付或者其他第三方支付功能，当用户在该页面选择支付方式后，商户发起对应第三方支付服务的过程。目前，大部分H5支付支持的支付方式都是支付宝和微信支付，云闪付则暂未涉及。

4.1.1 支付宝

4.1.1.1 支付流程图

    从上图可以看出，支付宝H5支付的核心在于唤起一个官方的路由页面。在该页面上，用户可以进行支付方式的选择，从而以不同的路径完成支付动作。路由页面的布局如下图所示。

4.1.1.2 支付状态说明

    （1）在选择支付宝支付后，浏览器会自动调起支付宝提供的中间页。若用户已安装支付宝客户端，浏览器则弹窗尝试唤起支付宝客户端，如下图所示。点击打开，跳转到支付宝APP，在支付宝的确认支付界面完成支付；点击取消，则停留在当前支付宝支付路由页面（中间页）。

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

    若在支付宝中支付失败，用户手动回到浏览器中，则当前页面停留在支付宝支付路由页。

    （2）在弹窗中选择“取消”， 点击“打开支付宝APP付款”，浏览器将再次申请打开支付宝支付，重复（1）中的过程。

    （3）在弹窗中选择“取消”， 若用户未安装支付宝客户端，可点击“继续浏览器付款”。点击后，当前页面调起支付宝网页支付收银台，如下图所示。该页面展示支付订单号及金额，让用户登录支付宝账号，并提供注册账号的功能。登陆成功后，会展示让用户“确认付款”的界面。若用户支付成功，则展示支付宝网页端支付成功页，点击“完成”，当前页面刷新至商户自定义的“支付结果页”。

    （4）在弹窗中选择“取消”，若用户未安装支付宝客户端，可以选择“下载支付宝APP付款”，浏览器调起应用下载页面。

    （5）若用户支付后页面没有自动返回，可以在路由页面点击下方的“已支付完成返回查看订单”，若校验支付成功，则会展示商户自定义的“支付结果页”；若校验支付未完成，则弹窗提示，如下图所示。

4.1.2 微信支付

4.1.2.1 支付流程图

    从上图可以看出，微信支付没有专门设置官方路由页面，直接判断用户是否安装微信，打开微信付款。

4.1.2.2 支付状态说明

    若用户已安装微信，则跳转微信支付，如下图所示。支付成功后，切回浏览器中，页面刷新至商户自定义的“支付结果页”。支付失败，则继续停留在空白页，持续唤起微信支付。

4.1.3 总结

    针对上述比较结果，不难发现目前第三方支付平台在H5支付上都在极力引导用户使用APP支付，这种方式有很多优点，第一，较浏览器支付，APP支付的安全性更高，用户使用APP支付也可以获得比在页面支付更流畅的体验；第二，提升了APP下载量，增加了用户，对于平台其他增值服务的推广起到了正向作用。但是，这样的方式也会带来一些问题，例如，强行引导用户下载APP可能导致部分用户不愿意继续支付，同时，相比H5支付，下载并使用APP也增加了用户支付流程的复杂性。针对这样的问题，支付宝提供了供用户选择支付方式的中间页，而微信支付却不设置选项，只能强制使用APP支付。在这一点上，支付宝的体验会更胜一筹。

4.2 APP支付

    APP支付是指商户在移动端APP中集成了支付宝、微信支付、云闪付或者其他第三方支付功能。

4.2.1 支付宝

4.2.1.1 支付流程图

4.2.1.2 支付状态说明

    （1）模式1：内嵌

    在支持的APP（淘宝等阿里系APP）内选择支付宝支付，直接在APP内弹出半屏界面，不跳出APP。此时，会先让用户选择是否使用免密支付，若选择“使用免密支付方式”，点击确定后会直接付款；若选择“使用普通支付方式”，则会弹出下一个半页面弹窗进行支付，页面布局如下图所示。

    若支付成功，则直接收起弹窗，跳转至APP内的订单结果页；若取消支付，则继续停留在上一级页面。在该种方式中，展示的信息可以更加简单，且响应速度更快，用户无需跳出当前APP即可完成支付。

    （2）模式2：唤起

    在其他APP中选择支付宝支付，自动唤起手机内的支付宝APP完成支付。支付页面布局如下图所示，需要展示清楚唤起该支付操作APP、订单信息，并在支付页面设置选择支付方式（是否免密），最后标明技术提供商。

    若支付成功，则跳转回APP支付结果页；若支付失败，则返回APP，继续停留在当前支付页面。

    在支付宝中，无论是以上哪种模式，提供的支付方式都包括：信贷资金渠道（花呗）、支付工具（银行卡、亲情卡）、理财资金渠道（余额宝）、其他（找人周转）、账户余额、花呗分期等。将用户常用的支付方式放在前面，支持下拉选择。

4.2.2 微信

4.2.2.1 支付流程图

    和支付宝能够内嵌在淘宝、天猫等阿里系APP中使用半页面弹窗支付类似，在微信自己的生态（即微信小程序）内，也可以支持半页面弹窗支付，其流程图如下。

4.2.2.2 支付状态说明

    （1）模式1：内嵌

    在微信小程序内选择微信支付，直接在小程序内弹出半页面弹窗让用户进行支付，页面布局如下图所示。

    若支付成功，则跳转回小程序内的订单结果页；若取消支付，则继续停留在支付页面。与支付宝不同的是，微信没有询问是否免密支付；同时，微信小程序属于微信的生态系统，因此一般仅支持微信付款。

    （2）模式2：唤起

    在其他APP中选择微信支付，自动唤起手机内的微信APP完成支付。支付页面布局如下图所示。与支付宝不同的是，微信支付展示的信息更少，且密码输入框会在点击“立即支付”后新弹出一个与（1）中相同的半页面弹窗让用户进行支付。同时，微信为了博得用户信任，在支付界面下方添加了承保机构的描述。

    若支付成功，则跳转回APP支付结果页；若支付失败，则返回APP，继续停留在当前支付页面。

    在微信支付中，无论是以上哪种模式，提供的支付方式都包括：零钱、银行卡、外部应用，支持更换。

4.2.3 云闪付

4.2.3.1 支付流程图

    云闪付在APP内提供支付的方式一般有三种：①直接选择云闪付支付；②内嵌在银联的支付方式选择中；③内嵌在其他第三方支付平台（支付宝/微信）的支付方式选择中。无论何种途径，最终都只能跳转到云闪付APP中进行支付。三种途径的支付流程图如下。

4.2.3.2 支付状态说明

    （1）模式1：直接选择云闪付

    当APP支持云闪付直接支付时，可以在APP的支付界面上选择云闪付，直接跳转云闪付APP支付。支付界面布局如下图所示。

    若支付成功，则跳转回APP内的订单结果页；若取消支付，则继续停留在支付页面。能够按照该方式直接使用云闪付的APP较少。

    （2）模式2：内嵌——银联

    当APP支持银联支付时，可以在APP的支付方式中选择银联支付，在弹起的半页面弹窗中选择云闪付。此时会打开云闪付APP，跳转支付。

    若支付成功，则跳转回APP内的订单结果页；若取消支付，则继续停留在支付页面。

    （3）模式3：内嵌——其他第三方支付平台

    当支付环境拥有自己的生态，例如微信小程序、阿里系APP等，云闪付会内嵌在微信支付和支付宝的“付款方式选择”中，如下图所示。这种情况下，需要先选择微信支付或支付宝，再在弹窗中下拉选择付款方式为云闪付。然后，会前往云闪付APP完成支付。

    若支付成功，则跳转回APP内的订单结果页；若取消支付，则继续停留在支付页面。

4.2.4 总结

    从上述比较结果可以看出，三种支付平台都结合自己的特性，通过不同的途径来适配不同的APP。其中，最主要的方式依然是跳转到APP进行支付。除此之外，在自己的生态中，支付宝和微信可以通过内嵌半页面弹窗的方式来完成支付；而云闪付则只能内嵌于银联或其他第三方支付平台的付款方式选择中，再跳转APP支付。另外，云闪付一般都会折叠在支付方式里，且部分时候支付页面会有广告，可能降低用户体验。因此，在APP支付方面，云闪付还有很大的改动空间。

4.3 扫码支付

4.3.1 支付宝

4.3.1.1 支付流程图

    支付宝扫码支付的场景有两种，第一，收款方已经设定支付金额；第二，需要自己输入支付金额。 流程如下图所示。

4.3.1.2 支付状态说明

    （1）模式1：固定金额

    在支付宝APP内点击扫码支付图标，弹出的扫码界面布局如下图所示。扫码可支持直接扫取，也可支持扫描相册中保存的二维码图像。扫描成功后，弹出支付界面。

    若支付成功，则弹出支付宝APP的支付成功界面；若支付失败，则返回支付宝首页。

    （2）模式2：输入金额

    在支付宝APP内点击扫码支付图标，扫描二维码成功后，弹出输入付款金额的界面，该界面展示了收款账户，且支持添加备注，如下图所示。

    若支付成功，则弹出支付宝APP的支付成功界面；若支付失败，则返回付款界面。

4.3.2 微信支付

4.3.2.1 支付流程图

    与支付宝扫码支付场景相同。

4.3.2.2 支付状态说明

    （1）模式1：固定金额

    在微信APP内点击扫码支付，弹出的扫码界面布局如下图所示。扫码界面相比支付宝更为简单。扫描成功后，弹出支付界面。

    若支付成功，则弹出微信的支付成功界面；若支付失败，则返回微信聊天界面。

    （2）模式2：输入金额

    在微信APP内点击扫码支付图标，扫描二维码成功后，弹出输入付款金额的界面，该界面展示了收款账户，且支持添加备注，如下图所示。

    若支付成功，则弹出微信的支付成功界面；若支付失败，则返回付款界面。

4.3.3 云闪付

4.3.2.1 支付流程图

    与支付宝/微信支付不同的是，当使用云闪付扫描的收款码不支持时，会跳转到浏览器进行H5支付或直接显示不支持该服务。

4.3.2.2 支付状态说明

    （1）模式1：固定金额

    在微信APP内点击扫码支付，弹出的扫码界面布局如下图所示。扫码界面相比支付宝更为简单。扫描成功后，弹出支付界面。

    若支付成功，则弹出微信的支付成功界面；若支付失败，则返回微信聊天界面。

    （2）模式2：输入金额

    在云闪付APP内点击扫码支付图标，扫描二维码成功后，弹出输入付款金额的界面，该界面的主要元素与支付宝、微信支付相同，如下图所示。

    若支付成功，则弹出云闪付的支付成功界面；若支付失败，则返回付款界面。

    （3）不支持的收款码

    当使用云闪付扫描不支持的收款码时，若收款码来自网页浏览器，云闪付会提示打开浏览器进行付款，此时的模式变为H5支付，一般仅支持支付宝或微信支付，如下图所示。

    后续支付动作同4.1节的H5支付。

    而当收款码来自个人或其他不支持的途径时，云闪付会显示“404-该二维码对应服务暂不支持”的界面，无法完成支付。

4.3.4 总结

    通过比较发现，支付宝、微信支付和云闪付在扫码支付的功能和界面设计上均非常相似。然而，云闪付由于支持的APP较少，且部分商户二维码只支持支付宝和微信支付，因此云闪付在部分场景下需通过浏览器跳转至H5支付完成交易，或者在不支持的情况下直接显示不支持的界面，限制了其使用范围，降低了用户体验。

4.4 总结

    通过以上分析，可以看到三款产品均有自己的优势与不足，其中支付宝和微信支付两大巨头在支付这一核心功能上表现最佳；相比之下，云闪付则稍显逊色。对于我行的支付产品，建议在提供核心支付服务时，首先需要重点涵盖以上三种（H5支付、APP支付和扫码支付）最基础的支付方式，并以这三种支付方式为主干，继续延伸触及更多支付场景。与此同时，支付的流畅性、安全性和界面的简洁美观也十分重要，在设计我们自己的产品时，可以参考例如上述三种成熟产品支付的处理逻辑和界面设计。另外，我行也要在设计完善产品基础功能的同时逐步开发自己的生态，营造生态内的垄断。最后，积极加强与商户的合作，可以扩大支付的兼容性，提升用户体验。