微信公众号支付失败问题-微信支付提示 调用支付JSAPI缺少参数：appId

于 2020-02-28 19:04:25 发布
阅读量1.1w 收藏 4
点赞数 1
分类专栏： 玩转花生壳技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oray2013/article/details/104561422
版权

鉴于去年做过微信app支付，小程序支付，支付宝app支付，云闪付app支付等方面的功能和研究。最近要完成一个在微信公众号支付的场景。其中遇到了一个坑，坑了我足足一上午多的时间。所以我想写下来记录，以后遇到微信相关API调用的时候，就不会花这么久的时间了。

技术场景：微信公众号支付

本文不会详细讲解微信公众号支付的具体流程，因为官网文档已经说得很详细，至少比我写的详细。而且本文的目的是记录我自己遇到的坑，而不是写支付教程。放心，下次有时间多的话，我会手把手的写下相关教程步骤的。

技术概况

开发前的准备工作

  • 微信公众号服务号+微信支付商户号（都是需要企业资格）
  • 备案的域名一个
  • 后端支付程序部署测试： 1：本地服务+花生壳端口映射的方式（我采用的方案） 2：购买云服务器和购买域名并且通过备案

微信公众号需要是服务号认证，需要开通微信支付功能，这些都需要交钱 300大洋一年。这里就不多讲了，如果开通服务号，商户号，网上资料很多。

我选择花生壳的目的是：第一：本地调式程序速度快，虽然本人拥有很多台阿里云的服务器，而且我也熟悉后端程序发布，但是我还是选择在开发测试阶段，先用花生壳本地端口映射。第二：花生壳提供的域名是经过备案的，做做测试用还是可以的。

blob.jpg

看见没，花生壳端口映射的域名，支持外网80端口（只能提供一个80端口）和外网随机端口。内网主机的端口，你自定义定义。是不是非常方便和适合测试微信，支付宝，云闪付之类的开发测试呢？

开发阶段

因为本人需要自己搞定移动前端网页和后端支付接口，所以前端我采用我熟悉的技术栈React来开发，后端采用的是SpringBoot框架来开发。

后端接口程序

核心代码：微信公众号后端支付接口

接口URL: http://qq784602719.imwork.net/school/wxpay/webPay

请求参数：需要传入openId（微信公众号身份标识）和total_fee（支付金额）

/**
 * 公众号支付
 */
@RequestMapping(value ="/webPay",method = {RequestMethod.POST,RequestMethod.GET})
@ResponseBody
public AjaxResult webPay(
		HttpServletRequest request,
		HttpServletResponse response,
		@RequestParam("total_fee") 
		String total_fee,@RequestParam("openId") 
		String openId) {
	// openId，采用 网页授权获取 access_token API：SnsAccessTokenApi获取
	//String openId = (String) request.getSession().getAttribute("openId");
	System.out.println("openId:"+openId);
	System.out.println("total_fee:"+total_fee);
	if (StrKit.isBlank(openId)) {
		result.addError("openId is null");
		return result;
	}
	if (StrKit.isBlank(total_fee)) {
		result.addError("请输入数字金额");
		return result;
	}
	
	String ip = IpKit.getRealIp(request);
	System.out.println("ip:"+ip);
	if (StrKit.isBlank(ip)) {
		ip = "127.0.0.1";
	}
	System.out.println("AppId:"+WxPayApiConfigKit.getWxPayApiConfig().getAppId());
	System.out.println("MchId:"+WxPayApiConfigKit.getWxPayApiConfig().getMchId());
	System.out.println("PaternerKey:"+WxPayApiConfigKit.getWxPayApiConfig().getPaternerKey());
	System.out.println("notify_url:"+notify_url);
	Map<String, String> params = WxPayApiConfigKit.getWxPayApiConfig()
			.setAttach("微信公众号支付测试  -By arison")
			.setBody("微信公众号支付测试  -By arison")
			.setOpenId(openId)
			.setSpbillCreateIp(ip)
			.setTotalFee(total_fee)
			.setTradeType(TradeType.JSAPI)
			.setNotifyUrl(notify_url)
			.setOutTradeNo(String.valueOf(System.currentTimeMillis()))
			.build();
	String xmlResult = WxPayApi.pushOrder(false,params);
      log.info(xmlResult);
	Map<String, String> resultMap = PaymentKit.xmlToMap(xmlResult);
	String return_code = resultMap.get("return_code");
	String return_msg = resultMap.get("return_msg");
	if (!PaymentKit.codeIsOK(return_code)) {
		result.addError(return_msg);
		return result;
	}
	String result_code = resultMap.get("result_code");
	if (!PaymentKit.codeIsOK(result_code)) {
		result.addError(return_msg);
		return result;
	}
	// 以下字段在return_code 和result_code都为SUCCESS的时候有返回
	String prepay_id = resultMap.get("prepay_id");
	Map<String, String> packageParams = PaymentKit.prepayIdCreateSign(prepay_id);
	String jsonStr = JSON.toJSONString(packageParams);
	result.success(jsonStr);
	System.out.println("data:"+jsonStr);
	return result;
}

接口方法里面有些参数加密的方法用进行了封装（对微信公众号支付提供的demo中的工具类），在这里代码就不一一展示了。因为并不是很重要。

前端支付程序

这里用的是React技术，网络请求用的是fetchPost。请求的时候，后端需要配合处理下跨域问题。

这里的userOpenid是在前端项目绑定页面中绑定成功之后，把微信公众号给的openId通过Redux传给其它React界面。所以这里通过this.props.userOpenid就拿到了Redux传过来的openId。

 wxPayRequest = () => {
    Toast.loading("")
    // const data="wxpay/webPay"; this.props.userOpenid
    fetchPost("http://qq784602719.imwork.net/school/wxpay/webPay", {
        openId: this.props.userOpenid,
        total_fee: '1'
    }).then((response) => {
        Toast.hide();
        console.log("response:" + JSON.stringify(response));
        const data = response.data;
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data));
                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
            }
        } else {
            this.onBridgeReady(data);
        }
    }).catch((error) => {
        console.log("error:" + JSON.stringify(error));
    })
}
onBridgeReady = (json) => {
    const that = this;
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', JSON.parse(json),
        function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                Toast.success("支付成功！")
            } else {
                message.info("支付失败:" + res.err_msg)
                that.setState({
                    payInfo: json,
                    payResult: "支付失败:" + JSON.stringify(res)
                });
            }
        });
}

当我在前端写的支付界面中调用上面的 wxPayRequest 方法后，遇到了错误 get_brand_wcpay_request:fail

我马上通过JSON.stringify(res)把错误对象解析成字符串放入界面展示，为了看到更全的报错信息。如图：

blob.jpg

错误信息：

{"err_desc":"调用支付JSAP缺少参数appId","err_msg":"get_brand_wcpay_request:fail","err_code":"-1"}

我当时就在想，我openId在本地后端程序日志窗口打印发现，我参数传到后端接口方法是对的啊，而且我微信公众号和商户号也设置正确了。尤其是设置了商户平台的 支付授权目录。

支付授权目录是：你的支付界面访问路径

http://qq784602719.imwork.net/school/rechargeHome 去掉最后一个斜杠后面的字符串

支付授权目录 http://qq784602719.imwork.net/school/

但是我设置了正确的支付授权目录之后，还是提示上面那个问题，缺少参数appId。很是纳闷啊。不过我感觉是前端JS调用方面确实出现了问题，于是开始排查JS端写的代码。

后面经过多次排查，问题果然还是被我找到了，找到之后，发现居然是一个很简单的问题。不过还是最终解决了问题。

blob.jpg

问题的关键之处是我出问题的代码写成了如下：

onBridgeReady = (json) => {
    const that = this;
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', json,
        function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                Toast.success("支付成功！")
            } else {
                message.info("支付失败:" + res.err_msg)
                that.setState({
                    payInfo: json,
                    payResult: "支付失败:" + JSON.stringify(res)
                });
            }
        });
}

微信JSAP 接口 WeixinJSBridge.invoke中第二个参数是javascript对象，而不是json字符串！！！后面我用JSON.parse(json)把服务器接口给我的json字符串转化为javascript对象，就能顺利支付成功了。

贝锐
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
远程医疗新思路：向日葵助力轻量级云上医疗远程业务平台搭建
04-29 347
相比于基于视频采集卡构建的远程会诊，向日葵的远程会诊方案，直接围绕核心医疗设备展开，提供“远程观看+远程操作”的互动式能力，可以通过远程操作医疗设备，身临病患诊断一线，满足远端医生的实操需求，极大的提升诊断效率，提升远程会诊效果。传统的深度的“云上医疗远程业务平台”建设方案，往往定制化程度较高，医疗机构需要投入大量的建设成本，且建设周期偏长，从立项到实际的项目落地可能需要长达数个月甚至1年，这一过程不仅可见的成本很高，间接产生的时间等隐性成本也非常巨大。，更有利于远程会诊中多方医疗专家的接入合作。
博客
向日葵远程控制：企业IT管理如何实现“精细化授权”
04-29 228
这种情况下常见的策略是企业设置一个灵活的“访客帐号池”，这些帐号的权限设置按照外部远控需求进行设置，在有需求时分配出去，相关业务结束则收回，类似园区“访客证”的策略，保证外部远控需求可以及时被满足，同时始终处于企业的有效管理范围内。作为国民级远程控制品牌，贝锐向日葵就搭载了非常完善的授权体系，可以帮助企业针对自身的业务场景，为不同的业务场景制定合适的管理策略，为不同的业务角色（管理员、一线运维、普通员工、业务管理层等等）定制不同的远控权限，避免远程控制权限的混乱。
博客
异地组网、网络部署、无线覆盖，贝锐蒲公英一步到位
04-29 836
部署贝锐蒲公英桌面式路由器X5/X5 Pro、贝锐蒲公英S300P交换机，满足分部的网络使用需求，以及无线网络覆盖，同时设置异地组网，实现公司总部及各地分部局域网的远程互访。在不改变原有的网络架构前提下，通过旁路模式部署蒲公英企业路由器G300，实现异地组网，同时部署贝锐蒲公英交换机S300P、贝锐蒲公英云AP完成总部的无线网络覆盖。，无需改变网络架构，即使企业总部网络复杂，也只需将贝锐蒲公英路由器正确配置上网，并通过简单云端设置，就能实现分钟级异地组网。
博客
Meta新模型Llama3免费用，贝锐花生壳远程调用只需3步
04-28 192
如果想要快速使用Llama 3，使用免费的桌面端工具LM Studio是个不错的选择，支持一键安装，运行Llama 3模型，实现本地使用。在无需公网IP、不用端口映射、不设置路由/网关的情况下，搭配贝锐花生壳花生壳，就可以3步实现LM Studio接口的远程访问。然而，Local Server功能默认提供的是本地访问地址，为了快速远程调用，开发者们需要解决开发环境的远程访问难题。HTTPS：用于创建访问安全加密的站点映射，同时花生壳可自动云端部署证书，本地无需额外申请、设置，非常方便。
博客
国家级会议报道：贝锐蒲公英异地组网高效实现前方数据回传
04-26 605
首先，贝锐蒲公英不需要IT专业人士现场安装调试，通过非常简单的图形界面就能完成安装、部署，现场报道人员如果想访问单位业务系统，管理员完成云端配置后，只要安装蒲公英软件客户端，登录对应的账号即可，能够自行完成操作。最后，贝锐蒲公英一站式集成了信息安全防护能力，支持用户身份鉴权、认证，可控制不同人员的访问权限。在某次重要的会议报道期间，由于前方报道人员需要临时进行封闭管理，无法随意进出驻地，使得前方报道人员无法使用传统的虚拟专网方案高效访问到单位内部的业务系统，严重影响了会议报道的效率和时效性。
博客
大型企业高效内部协同，向日葵SDK私有化部署案例解析
04-26 266
在远程控制这个领域，如果我们将大家都比较熟悉的SaaS模式比作“打车”，那SDK嵌入式方案就可以看做是“为客户提供发动机”，对于规模较大的集团企业来说，采用这一模式意味着对于远程控制服务的完全自主掌握，可以完全契合自身需求，也有利于企业灵活调整远程控制在另一个更大战略布局里所占据的比重和位置。对于这一点，企业的管理层其实看得很明白，因此很多企业在发展到一定规模之后，就会着手搭建内部的企业级沟通协作一体化平台，即企业IM，通过技术手段提升内部沟通协作的效率，赋能一线业务。
博客
无网设备如何实施远程技术支持？“向日葵控控”提供稳定方案
04-26 412
安全性是远程医疗解决方案的关键。通过向日葵控控A2实施远程控制，无需在被控端安装任何软件，无需开放网络端口，即插即用，也无需被控端设备本身联网，远控网络经由控控A2独立传输，与被控端网络相互独立，无不必要的数据交换，且远控画面高清流畅，支持特种设备的独特分辨率。在医疗、能源等领域的无网专业设备，实际上也是可以依托远控控制技术实现远程技术支持的，贝锐向日葵远程控制就推出了一个硬件产品系列，可以实现无网设备的远程控制，进而帮助设备服务商搭建安全稳定的远程技术支持和专业设备运维体系。
博客
丰富企业远控业务生态，向日葵开放多种远程控制API集成方案
04-26 313
以连锁行业的收银设备运维场景为例，使用向日葵端API集成的企业，在门店收银设备中安装开放API接口的向日葵远程控制客户端，运维总部通过API接口自动获取被控端远控识别码等信息，快速发起远控。现在，为了进一步丰富企业远控业务生态，以上便是向日葵API集成方案的简单介绍，作为一种远控业务模式的补充，向日葵API集成将会帮助企业更好的搭建远程控制业务体系，为企业持续提供价值。总的来说，平台API更多面向远程控制的管理需求，而端API则更多面向远程控制业务侧的需求，企业可以根据自身需求，采用对应的API方案。
博客
异地组网、内部网络需求同时满足，贝锐企业路由器G300开箱体验
04-23 928
之所以选择贝锐蒲公英，是因为它与传统的虚拟专网方案不同，贝锐蒲公英的部署和使用过程都非常简单，只需要通过云端管理平台的图形化界面，就可以完成异地组网，设置过程极为简便，而且对网络环境没有要求，不依赖于运营商专线或固定公网IP，有网就能用，能够降低部署成本。此外，云端管理平台还提供了远程批量部署能力，可以建立设备的配置模板按需下发，相应设备上线后自动应用配置，并且路由器也支持云管理，支持远程更新固件、重启、调整设置等，能够实现零接触部署和维护。因此，在对比了多种方案后，选择了贝锐蒲公英的解决方案。
博客
免费语音转文字：自建Whisper，贝锐花生壳3步远程访问
04-21 328
以Whisper-WebUI为例，通过Whisper-WebUI本地部署后，搭配花生壳内网穿透，简单3步就能实现远程浏览器进行访问、使用。此外，与其他需要联网运行的商业语音识别服务相比，Whisper的独特之处在于其完全在本地运行，无需联网，从而确保了用户个人隐私的安全。HTTPS：用于创建访问安全加密的站点映射，同时花生壳可自动云端部署证书，本地无需额外申请、设置，非常方便。生成完成后，复制生成的访问地址，用浏览器访问链接，就可以远程访问Whisper了。
博客
向日葵云桌面：携手阿里云无影，专属云主机随时随地都能用
04-18 171
代码编译，不需要盯着等待，远程coding，丝般顺滑，不用频繁配置环境，手机也能随时监看，操作，传输文件。不同于大多数云桌面客户端，向日葵云桌面远程使用时，可享4K高清、4:4:4无损色彩、144Hz高帧率画面的传输，带来几乎与本地电脑相媲美的顺畅、高画质体验。有些软件开发的工作，尤其是发布的时候，是需要24小时待命的，任何时间、任何地点都能进行操作，私人电脑不想一直开着？，实现了一步到位的使用体验！同样，对于很多设计的朋友们，需要调整设计稿、剪辑视频、渲染3D模型，但出差、在外笔记本性能不够？
博客
如何通过远程控制实施批量设备运维管理？用好这几个功能很重要
04-18 358
远程运维的优势不言而喻，但单纯基础的远程控制在效率和企业管理层面，显然不足以满足批量设备运维的需求，引入合适的商用方案，并且善用其中的部分亮点功能，就变得非常重要。手动分组则更多的应用在有第三方服务商介入的情况：当定制安装包进行安装部署时，可以手动选择自己设备所在的分组，这一过程不再需要管理员在后台操作，相当于将分组权限下放。手动逐一调试部署的方案非常低效，需要占用IT运维人员大量的时间和精力，为此向日葵IT运维解决方案支持批量部署，可以快速将远程控制方案部署至需要运维的IT设备上。
博客
企业远程技术支持：客户不愿意安装远控软件怎么办？
04-18 328
向日葵远程控制作为国民级的远程控制软件，拥有超过8000W的注册用户，几乎现在装机必备的工具软件之一，很多客户可能本身就是向日葵个人版的用户。在这种情况下，企业对该客户实施技术支持，就不需要让客户额外安装企业客户端了，直接通过向日葵个人版软件即可，方便快捷。顾名思义，免安装SOS版向日葵无需安装即可使用，不会更改设备注册表，绿色运行，用完即删不留痕迹，满足业务设备的第三方软件使用规范。很多情况下，客户不希望安装新的软件，但如果使用已经安装的软件进行服务，则完全没有问题。1、客户嫌麻烦，不希望自己的电脑上“
博客
贝锐蒲公英企业路由器X5 Pro：无需专线和IT人员，分钟级异地组网
04-16 275
尽管将系统上云看起来是很好的解决方案，但这意味着需要重新部署、迁移数据，还要我们自己保障敏感信息的安全，而且购买云服务器也会产生一笔固定成本，虽然有首年优惠，但后续续费往往会有明显上涨，随着数据和业务规模的增加，会成为非常可观的数字。首先来看下外观，贝锐蒲公英X5 Pro采用了牛皮纸包装，简洁大气，在包装内部，用了高端感十足的黑色珍珠棉材质作为衬垫，贴合非常紧密，保证了产品在运输过程中的安全，除了电源适配器，还贴心的附上了壁挂安装螺丝，细节到位。所以，在对比不同方案后，我们最后选择了贝锐蒲公英。
博客
贝锐蒲公英自研异地组网新技术：远程视频监控，流畅度、清晰度大幅提升
04-15 605
在远程视频监控过程中，若遇到网络带宽若遇到网络波动，如：丢包、高延迟等，往往会导致视频流传输时发生数据丢失或延迟现象，从而严重影响视频画面的清晰度和流畅度。比如：在公司总部集中监看远程矿山或户外水文监测站点的视频监控画面，如何解决因为网络问题产生的模糊或卡顿呢？
博客
企业售后技术支持如何管理？远控行为如何追溯？
04-11 432
事实上，向日葵技术支持解决方案的能力远不止如此，本文只是从其中一个视角进行解读与介绍，作为一款全面的解决方案，向日葵技术支持解决方案可以帮助企业搭建一个完善专业的售后技术支持体系，覆盖桌面级、现场级、设备级的技术支持服务，帮助企业从售后服务层面实现破局，增强企业竞争力。此外，向日葵技术支持解决方案支持远控录屏功能，可以为事后追溯提供一手的参考资料，同时向日葵支持“云录像”功能，员工使用远程桌面时，自动进行录像并上传至云端，管理员可以前往向日葵管理平台【远控日志】处下载对应录像。
博客
企业如何搭建从工单到服务的闭环式远程技术支持方案？
04-11 437
贝锐向日葵易维具备成熟的ITSM平台体系，能够打通企业售后支持的各个环节的流程，整合各个环节的信息，自动化的推进需求，减少人工干预造成的疏漏，同时系统可以根据工单的优先级、紧急程度等因素，自动分配技术支持人员。这样，企业可以确保每个客户都能得到及时、专业的技术支持服务，同时避免资源的浪费。对于企业来说，售后技术支持是销售行为的延续，是企业在市场中形成竞争力的重要组成部分，优质的售后技术支持服务将带来更高的客户满意度，进而转化为稳定的订单和营收，因此构建一个高效、专业、成熟的一站式售后技术支持方案格外重要。
博客
户外无人值守设备如何高效运维？电源控制非常关键
04-11 250
为了防止这种情况的发生，让插座和设备各自独立入网就变得很有必要了。户外无人值守的商用设备，往往分布广泛，且现场经常没有可靠的网络接入，对这类设备实施运维管理的成本就比常规的设备要高出很多，因此远程运维就成为了最佳选择。远程电源管理最简单的方式，就是使用智能插座，但主流的智能插座普遍采用WiFi入网的方式实现远程控制，一旦户外场景没有稳定的网络，就很难发挥作用。作为国民级远程控制品牌，向日葵在远程运维这个场景下，不仅有专业的软件方案，还配备了出色的硬件产品，通过软硬结合的方式填补了纯软方案的短板。
博客
贝锐蒲公英X5 Pro开箱体验：分钟级异地组网，颠覆传统企业路由器
04-07 456
而且，它能与传统的虚拟专网路由器相比，X5 Pro大幅降低了组网门槛，就连个人也能使用，云端操作简单、快捷，不依赖成本高昂的固定公网IP或是专线网络，大大节省了我们的时间和金钱成本。另外，X5 Pro还有一个USB 3.0接口，支持U盘、移动硬盘这样存储设备，也支持打印机，可实现远程打印，还可连接4G上网设备，通过蜂窝网络联网，用于一些没有宽带的地方。另外，它还加上了2.5G网口，支持双WAN、支持WiFi6，如果同时有网络覆盖、网络接入和异地组网的需求，X5 Pro就很有性价比了，可以一步到位。
博客
向日葵x极致派联合解决方案入选2023年度企业数字化标杆案例榜
04-03 194
加快数字化发展，发展数字经济”，不仅是 “十四五” 期间中国自上而下的共识，而且拥有以消费零售、金融、先进制造等行业自下而上的市场需求，是传统企业从线下走向“云端”，实现数字化转型的自我革命，更为人工智能、云计算、大数据等新兴技术提供了丰富的应用场景，并催生了中国高科技企业加速成长期。本次入选榜单的案例，是贝锐向日葵赋能数字化商贸管理的标杆案例，其与“成都极致派”合作，在“极致派售后通”平台中通过SDK嵌入的方式引入向日葵专业的远程控制能力，赋能这一专业售后技术支持平台，提升客户的售后服务效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值