cordova之支付宝手机网站支付方式实践

it2024-07-28 38

关于当前系统：

targetSdkVersion： 28 vue: 2.6.11 cordova-android: 8.1.0

手机网站支付流程

手机网站支付情景

用户已安装支付宝支付流程

步骤1：用户在浏览器中访问商家网页应用，选择商品下单、确认购买，进入支付环节，选择支付宝付款，用户点击去支付，如下图1；

步骤2：进入到支付宝支付路由页面，支付宝处理支付请求，并尝试唤起支付宝客户端，如下图2（此页无法自定义删除）；

步骤3：进入到支付宝页面，调起支付宝支付，出现确认支付界面，如下图3；

步骤4：用户确认收款方和金额，点击立即支付后出现输入密码界面，如下图4；步骤5：输入正确密码后，支付宝端显示支付结果，如下图5；步骤6：自动回跳到浏览器中，商家根据付款结果个性化展示订单处理结果，如下图6。

注意：

在iOS系统中，唤起支付宝App支付完成后，不会自动回到浏览器或商户App。用户可手工切回到浏览器或商户App。用户未安装支付宝支付流程

步骤1：若用户未安装支付宝客户端，用户可先点击支付宝支付路由页面里的点这里下载支付宝APP 蓝色链接，下载支付宝，如图 7；

步骤2：成功下载并安装支付宝客户端后，点击支付宝支付路由页面里的使用支付宝APP付款按钮进行付款，如图 8；

步骤3：点击使用支付宝APP付款按钮后，重新开始如上所述的“用户已安装支付宝支付流程”步骤。

材料准备

申请前必须拥有经过实名认证的支付宝账户；

企业或个体工商户可申请；

需提供真实有效的营业执照，且支付宝账户名称需与营业执照主体一致；

网站能正常访问且页面显示完整，网站需要明确经营内容且有完整的商品信息；

网站必须通过ICP备案。如为个体工商户，网站备案主体需要与支付宝账户主体名称一致；

如为个体工商户，则团购不开放，且古玩、珠宝等奢侈品、投资类行业无法申请本产品。

前端流程

1.根据流程示意图：

1.1给商户系统下单：及应的是用户点击确认付款，后端创建订单信息，返回前端一个支付请求：后端返回的数据具体格式内容如下,一段html代码：

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=dHlwcSlk4Ur9dK45n7XIEcfQHn9j9%2F9bMPb7yRQg%2BPY8etEM0BNdTHeoGast9vB2jRKlvOyGlu93AE6Pg0E52zQyZJhiKWrSMF6eDiSQBGhvZUpCXYrINk2hu1lwId%2BYvwFJLTQljiBchDzjKh8q0T4XLhgro%2ByRtRvxSWyNdAQM0JmatvXd%2B5RaXicc%2BYlhbmHq6y%2FTkH5e6BwH6SI8CpJ63vTEKhP%2FLkmRa0WsYczz4fUG%2F4YbrzjNw%2FD%2F1wfGYMffTYsGWGcgf77tOQX8%2B928lKf44bCMjXg%2FC2aLy4lNYVXZKb0QJVEAQalYOam91oV16GaU0J5SI4VSd5vM8g%3D%3D&return_url=https%3A%2F%2Fipts.zpmc.com%2Fpss%2Fapp-xionganxing%2Falipay-info.html&notify_url=https%3A%2F%2Fipts.zpmc.com%2Fpss%2Fet-service%2Falipay%2Fcallback&version=1.0&app_id=2021001192615405&sign_type=RSA2&timestamp=2020-09-09+23%3A17%3A51&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json"> <input type="hidden" name="biz_content" value="{"body":"null:null","out_trade_no":"316139466261528576","product_code":"ET order","subject":"7号南侧通道接驳点:D2组团1号口","timeout_express":"30m","total_amount":"5.03"}"> <input type="submit" value="立即支付" style="display:none" > 将html代码插入前端代码中，发现并没有展示h5进入支付宝的界面。解决的问题： form表单本身并不在html中占有实际位置，作用就是一个跳转链接，提交跳转后才显示支付宝付款页面，点击使用支付宝APP付款：如下 document.getElementById('app').innerHTML = data.data || ''; console.log('punchout_form:' + document.forms.punchout_form); // 重点：提交表单，不提交就不会进行跳转 document.forms.punchout_form.submit();

3.进入支付宝页面，就和前端没啥关系了：进入到支付宝页面，调起支付宝支付，出现确认支付界面 4.支付完成之后，设置后端设置的return_url（在完成支付后需要回到的前端地址），即可完成支付后的订单详细的展示。（前端只需要绘制订单详情的界面，订单中的信息，金额等可以解析return_url的路由地址解析中获取）：

成功跳转return_url会在return_url中带上支付相关信息，可以从total_amount字段拿到支付金额等相关信息

返回格式如下：

https://ipts.zpmc.com/pss/app-xiongan-h5/?charset=UTF-8&out_trade_no=316028058324697088&method=alipay.trade.wap.pay.return&total_amount=0.01&sign=E6c6U8Ba2YAq0BRNEvb7V5DQD%2F9ixT1vpoL1dQfa5yomgN74ywHhdewxkFpfK6dpqTdf3lbS3FSk7TaWKjVc1gpgIypGgmGFdhMXIk2Z%2BbSDR289AVTYolI3keazUtXjkyT0e%2FdPVNBSy56xLD9q9EdKFQWIPGiziyoAY6RgqQ88Tsadhd07RkkapDQJCCE0ivVkuJDwooyu2dOqqHHvAoAMZQYv3RCU2NqtiAq%2B2Kz2EfWsbKcMesT8T6uDVlnp2vhxKBcRL0vM6czzISRIDrlgohxH%2F%2Ba5bSRxNk9wjWKCOyZZRMnF9KP4IF5gq5SR5%2BdR6fpdxEyQnZz4WrGOhw%3D%3D&trade_no=2020090922001492831457917381&auth_app_id=2021001192615405&version=1.0&app_id=2021001192615405&sign_type=RSA2&seller_id=2088931446529562&timestamp=2020-09-09+16%3A53%3A43#/login

前端代码如下：

// 支付宝h5方式支付 // 获取订单支付信息，html数据 const [error, data] = await this.awaitWraper(api.et.alipayWeb(params)); console.log(error, data, 'data==='); if (error) { this.isPayment = false; console.log(error, '获取订单支付信息失败！'); this.$toast.error('获取订单支付信息失败！'); return; } // 将html插入代码 const div = document.createElement('div'); div.innerHTML = data.data || ''; document.body.appendChild(div); // 提交表单 document.forms.punchout_form.submit();

参考

支付宝手机网站支付文档

最新回复(0)