前端如何支付
项目中做到鸿蒙app下单支付,记录一下支付流程。
后续业务又遇到支付相关,完善文档。
支付宝支付
如果是pc端web
生成支付二维码
- 调用后端接口,后端会生成一个订单号。
- 获取二维码链接:调用支付接口,传入订单号,后端会返回一个支付链接。
- 转化二维码:把支付链接转成一个二维码,可供手机扫码。(使用 qrcode.js 等库)
- 轮询查支付结果。当返回成功时,跳转成功页。否则一直轮询,因为不知道用户什么时候扫码。
跳转到支付宝的收银台(传统方式)
- 调用后端接口,后端会生成一个订单号。
- 获取支付宝收银台链接:调用支付接口,传入订单号,后端会返回一个支付宝的收银台链接。(通常是自动提交的form HTML)
- 跳转支付宝收银台(如果返回 formHtml:前端把它插入页面并自动 submit(),浏览器跳转到支付宝收银台;如果返回 payUrl:前端直接 window.location.href = payUrl。)
- 用户完成扫描支付后自动跳回return_url,这个页面是我们系统的页面,在这个页面查询支付状态。
如果是H5
和pc端web跳收银台的方式类似,只不过参数有些不同,本质上也是跳转到支付宝的收银台,由支付宝收银台页面负责调起支付宝app,完成支付后再跳转回return_url
如果是app
- 调用后端接口,后端会生成一个订单号。
- 获取支付链接:调用支付接口jspay,传入订单号,后端会返回一个支付链接。
- 跳转支付宝:app通过支付链接,跳转到支付宝支付页面。
- 回到app,判断已经点击过支付(模拟从支付宝回来),跳转支付结果页面,查询支付结果的接口,如果返回成功则展示支付成功信息。否则调3次,结果还是失败就展示失败信息。
微信支付
如果是pc端web
- 调用后端接口,后端会生成一个订单号。
- 获取支付链接(调用支付接口,传入订单号,后端调微信下单接口获取二维码链接 code_url。)
(这个支付链接可能是自己系统内部的一个统一中间页或收银台页面,在蜂采的时候是固定的https://www.beeselect.net/miniprogram?orderNo=&totalAmount=&goodsDesc=店铺续费&tradeType=T_MINIAPP&orderType=6 ) - 把二维码链接转成一个二维码,可供手机扫码。(使用 qrcode.js 等库)
- 轮询查支付结果。当返回成功时,跳转成功页。
移动端H5支付
- 调用后端接口,后端会生成一个订单号。
- 调用支付接口,获取一个用于跳转的中间页链接 (h5_url),window.location.href = h5_url跳转,浏览器跳转到该页面然后尝试唤起微信,完成支付。
- 支付后跳回 可以在 h5_url 后面拼接 redirect_url 参数,指定支付完成后浏览器要跳回哪个页面
- 查询支付结果。
JSAPI支付
微信内置浏览器,在网页内直接调起微信支付收银台,前端通过 WeixinJSBridge 调起支付。(如服务号中的支付)
- 调用后端接口,后端会生成一个订单号。
- 获取签名后的参数包。(后端调微信JSAPI下单接口,获取 prepay_id,并对调起支付所需参数进行二次签名,然后将签名后的参数包返回给前端)
- 前端通过 WeixinJSBridge 调起支付。需要传入的参数包括:appId、timeStamp、nonceStr、package(格式为 prepay_id=***)、signType、paySign。前端不能自己拼这些参数,签名必须由后端生成。
- 设置回调处理结果:调起时传入回调函数,微信返回的 err_msg 有三种可能:
get_brand_wcpay_request:ok:调起成功,仍需调用后端查单接口确认实际支付结果。
get_brand_wcpay_request:cancel:用户取消支付。
get_brand_wcpay_request:fail:支付失败。 - 前端回调后查单:无论哪种回调,都应调用后端查单接口获取支付状态。
app内支付
- 调用后端接口,后端会生成一个订单号。
- 调用支付接口,App 前端拿到参数后,通过集成好的微信 OpenSDK 的 sendReq 方法,发起支付请求。此时,你的 App 会跳转到微信 App,并弹出微信支付收银台。(绝对不要在前端直接调用微信的下单接口,因为签名所需的商户密钥必须保存在后端。)
- 用户在微信内完成支付
- 用户点击“完成”或直接返回,界面会自动跳回你的 App。同时,微信 OpenSDK 会触发你 App 内预先设置好的 onResp 回调函数,并传入一个 errCode。
- 前端查询后端确认真实结果:这是最关键的一步。onResp 回调中的 errCode 不能作为最终支付依据。前端必须在回调中,立即调用你自己后端的查单接口,由后端去和微信服务器确认订单的真实支付状态,然后前端再根据后端的返回展示最终结果。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 liang yong gang!

