云计算百科
云计算领域专业知识百科平台

未来之窗昭和仙君(七十八)收银台扫码支付轮询保护—东方仙盟练气

电子支付收银台状态查询功能说明书

未来之窗昭和仙君 – cyberwin_fairyalliance_webquery

一、功能概述

此支付状态查询功能用于轮询订单的支付状态。支持自定义查询接口地址、查询间隔、最大重试次数等参数,同时提供了支付成功、支付失败和其他错误的回调函数。在首次调用时会弹出等待进程对话框,可自定义对话框的样式和提示信息。此外,还支持在支付成功后关闭窗口的功能。

二、调用格式

$cq.wlzc_pay_polling_payment(options);

$cq.未来之窗_支付交互_收银台查询结果(options);

$cq.fams_paystatusquery(options);

$cq.fams_wppp(options);

三、参数说明

参数类型是否必填默认值说明
apiUrl string "http://yourquery.com/" 自定义查询接口地址
onSuccess function 打印支付成功信息到控制台 支付成功回调函数,接收查询结果作为参数
onFail function 打印支付失败信息到控制台 支付失败回调函数,接收查询结果作为参数(状态码 9417 等终止性失败)
onError function 打印查询异常信息到控制台 其他错误回调函数,接收查询结果作为参数(非终止性错误/循环等待)
close: string Y Y/N 等待进程对话框中点击进行终止操作
barbg string '#1890ff' 主题色(用于提示框等)
interval number 1000 查询间隔(避免高频递归,单位:毫秒)
maxRetries number 30 最大重试次数(防止无限递归)
retryCount number 0 已重试次数(内部参数,无需手动传)
skin string "maskwait" 等待进程对话框的皮肤样式
wait_title string "等待完成支付" 等待进程对话框的标题
wait_tips string "请勿关闭等待完成" 等待进程对话框的提示信息
wait_centerText string "查询中" 等待进程对话框中间的文字
wait_result string "正在查询状态…….." 等待进程对话框的结果信息
onPoll function 打印正在查询信息到控制台 每次轮询时的回调函数,接收查询结果作为参数

四、返回值

五、使用示例

示例 1

function test1() {
$cq.wlzc_pay_polling_payment({
apiUrl: 'https://www.baidu.com/',
close: "Y",
barbg: 'rgb(6 21 33)',
interval: 2000,
maxRetries: 10,
wait_title: "等待支付完成,请勿着急",
wait_tips: "耐心等待支付结果,可点击终止",
onSuccess: function(result) {
console.log('自定义成功逻辑:', result);
alert('支付成功!订单号:' + result.current_order_id);
},
onFail: function(result) {
console.log('自定义交易失败::', result);
},
onError: function(result) {
console.log('自定义错误,请刷新页面重试:', result);
},
onPoll: function(result) {
console.log('自定义轮询:', result);
}
});
}

演示1

示例 2

function test2() {
$cq.wlzc_pay_polling_payment({
apiUrl: 'https://www.baidu.com/',
close: "Y",
barbg: 'rgb(255 102 0)',
interval: 2000,
maxRetries: 10,
wait_title: "请耐心等待支付完成",
wait_tips: "不要关闭窗口,等待支付结束,点击可终止",
onSuccess: function(result) {
console.log('自定义成功逻辑:', result);
alert('支付成功!订单号:' + result.current_order_id);
},
onFail: function(result) {
console.log('自定义交易失败::', result);
},
onError: function(result) {
console.log('自定义错误,请刷新页面重试:', result);
},
onPoll: function(result) {
console.log('自定义轮询:', result);
}
});
}

演示

六、注意事项

  • 当重试次数超过最大重试次数时,会终止查询并调用错误回调函数。
  • 在首次调用时会弹出等待进程对话框,可通过相关参数自定义对话框的样式和提示信息。
  • 若设置了 `close` 为 "Y",可在等待进程对话框中点击进行终止操作。

七、云支付连锁查询模块核心作用

 

持续向指定接口查询订单支付状态,兼容微信、支付宝、扫码等多支付方式;
根据查询结果(成功 / 失败 / 等待 / 异常)触发不同的回调逻辑,完成订单状态更新、窗口关闭、用户提示等联动操作;
适配连锁场景下的批量订单处理,支持多终端(电视 / 机顶盒)的基础兼容(ES5 语法 + 低版本 Chrome 适配)。
简单来说,它是收银台支付流程中 “确认用户是否付款” 的核心环节,能自动、稳定地完成支付状态核验,并联动后续的订单收尾操作。

八、模块核心优势

1. 兼容性与适配性优势
语法 / 环境兼容:全程使用 ES5 语法,兼容 Chrome 53 等低版本浏览器,适配电视、机顶盒等非标准 Web 终端(这类设备往往内置老旧内核,ES6 + 语法易出问题);
终端适配友好:代码中未依赖高版本 DOM API,调用的parent/window等全局方法、layer提示框均为传统前端方案,适配电视 / 机顶盒的交互逻辑(如窗口关闭、批量订单更新)。
2. 稳定性与鲁棒性优势
防无限轮询:通过maxRetries(最大重试次数)和interval(查询间隔)限制,避免高频请求压垮接口,也防止无限递归导致终端卡死;
边界校验完善:必传参数(订单 ID)校验、AJAX 请求失败重试、不同状态码的精准分流,覆盖 “参数缺失、网络异常、支付中、支付失败” 等全场景;
容错处理:对parent/art.dialog等跨窗口方法做存在性判断,避免终端环境无对应方法时代码崩溃。
3. 易用性与扩展性优势
配置化设计:通过options参数可自定义接口地址、查询间隔、提示主题色、是否关闭窗口等,无需修改核心代码即可适配不同收银台场景;
回调解耦:onSuccess/onFail/onError回调函数将 “状态查询” 与 “业务逻辑(如订单更新、用户提示)” 解耦,新手可快速替换回调内容适配自己的收银台;
多支付方式兼容:接口参数和状态码逻辑未绑定单一支付方式,可同时支持微信、支付宝、扫码支付的状态查询。

九、0 基础搭建自己的收银台(快速上手步骤)

1. 环境准备(0 基础友好)
无需复杂框架,只需准备:
一个文本编辑器(如 Notepad++、VS Code);
引入依赖:jQuery(或代码中的$cq)、layer 弹窗插件(前端提示用);
确保终端(电脑 / 电视 / 机顶盒)能运行 HTML+JS(大部分智能终端都支持)。
2. 核心步骤(复制 + 修改即可用)
引入依赖:在 HTML 中引入所需插件(示例):
html

预览

<script src="未来之窗开源收银台.js"></script>
 
 

十适配终端:

电视 / 机顶盒:确保页面尺寸适配大屏(用百分比布局),去掉鼠标交互(改用遥控器焦点);
无需修改核心查询函数,只需调整前端页面样式和交互逻辑。
四、初学者入门指南(从 0 到 1 掌握)
1. 先理解核心逻辑(不用先懂所有代码)
第一步:搞懂 “轮询” 的本质 —— 每隔一段时间问一次 “用户付款了吗?”,直到得到明确答案(成功 / 失败)或超时;
第二步:聚焦 3 个核心回调函数(onSuccess/onFail/onError),先学会修改这 3 个函数的内容,实现自己想要的提示 / 操作;
第三步:再逐步理解参数配置(如interval/maxRetries),调整查询频率和超时规则。
2. 入门实操建议
跑通基础示例:先复制上述代码,替换orderId和apiUrl为测试值,在浏览器中运行,看控制台是否打印 “查询中”;
修改提示逻辑:把layer.msg替换成自己能看懂的alert,直观看到不同状态的提示;
模拟测试:
模拟支付成功:让接口返回{status: 1},看是否触发onSuccess;
模拟支付失败:让接口返回{status: 9417},看是否触发onFail;
适配终端:先在电脑上调试通,再放到电视 / 机顶盒测试,遇到报错优先检查 “是否缺少依赖(如 layer)”“是否用了 ES6 语法”。
3. 避坑要点(初学者重点)
不要删除maxRetries:否则可能导致无限查询,终端卡死;
订单 ID 必须传:代码里有校验,不传会直接触发onError;
电视 / 机顶盒适配:优先用 ES5 语法,避免箭头函数、解构赋值等 ES6 特性,减少对鼠标事件的依赖。

东方仙盟:拥抱知识开源,共筑数字新生态

在全球化与数字化浪潮中,东方仙盟始终秉持开放协作、知识共享的理念,积极拥抱开源技术与开放标准。我们相信,唯有打破技术壁垒、汇聚全球智慧,才能真正推动行业的可持续发展。

开源赋能中小商户:通过将前端异常检测、跨系统数据互联等核心能力开源化,东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案,让更多商家能够平等享受数字转型的红利。
共建行业标准:我们积极参与国际技术社区,与全球开发者、合作伙伴共同制定开放协议与技术规范,推动跨境零售、文旅、餐饮等多业态的系统互联互通,构建更加公平、高效的数字生态。
知识普惠,共促发展:通过开源社区、技术文档与培训体系,东方仙盟致力于将前沿技术转化为可落地的行业实践,赋能全球合作伙伴,共同培育创新人才,推动数字经济 的普惠式增长

阿雪技术观

在科技发展浪潮中,我们不妨积极投身技术共享。不满足于做受益者,更要主动担当贡献者 。无论是分享代码、撰写技术博客,还是参与开源项目维护改进,每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地,我们携手在此探索硅基生命,为科技进步添砖加瓦。

Hey folks, in this wild tech – driven world, why not dive headfirst into the whole tech – sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open – source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon – based life thing, and in the process, we'll be fueling the growth of technology

赞(0)
未经允许不得转载:网硕互联帮助中心 » 未来之窗昭和仙君(七十八)收银台扫码支付轮询保护—东方仙盟练气
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!