欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...

程序员文章站 2022-04-26 15:13:42
...

vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数…

这或许是你看到最完的整微信H5支付几大问题的解决方案


因为项目中使用到了支付,当前国内支付无非就支付宝、微信、银联这几种方式,支付宝和银联支付今天暂时不讨论,搞过的都清楚,支付宝还是比较简单的,相对于前端来说,不会太复杂,几乎接近于完美(这么说人也是做支付的),而微信就真的额有很多坑了!

1.商家存在未配置的参数,请联系商家解决

说起来,真是欲哭为泪,尤其是使用vue react等单页面应用开发项目的,多少一开始都很头大,我一开始也遇到了这个问题,各种百度无果,最后还是研究文档发现了其中的问题!

首先,先看微信对于这个错误的解释:

vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...
我们直接看第一个提示1.当前调起H5支付的referer为空导致,一般是因为直接访问页面调起H5支付,请按正常流程进行页面跳转后发起支付,或自行抓包确认referer值是否为空


先说这个问题的解决办法:

不管你是用的vue还是react ,找到你项目里的 index.html,一般在public **文件夹下,

vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...

index.html 中的 注释掉
vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...

这句代码的意思是 发起的请求将不会携带 referer

那如何理解这个referer呢?

关于Referer

Referer是HTTP 请求header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器该网页是从哪个页面链接过来的,服务器因此可以获得一些信息用于处理。例如:你在百度搜索语雀点,可以看到控制台网络,有Referer:https://www.yuque.com/dashboard 它表示一个来源。
vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...


Referer的作用我就不具体细说了,一般是作为防盗链,防止恶意请求的,下一期我可以单独出一个关于referer的介绍。

vue react一开始用脚手架生成的时候,默认referer是用不携带的,所以,涉及到支付的时候,一定要查看一下index.html!!!

2.商家存在未配置的参数,请联系商家解决

先看下微信文档的解释:
vue react 微信H5支付填坑 商家参数格式错误,存在未配置的参数...

意思说的很明白就是域名没有配置正确, ”这个问题是跟着上一个问题来的,当你配置好了referer,微信也能获取到你的源,也就能获取到你原地址中的域名,如果你在微信开放平台中授权H5的支付安全域名与referer中的不一致,就会报这个错误。
如果你能要保证已在微信开放平台 授权h5支付安全域名,且域名已经备案,那大概率是不会出现这种问题。

在微信开放平台中, 授权h5支付安全域名的时候,一般它会告诉你,设置一级域名或者二级域名,来说,设置一级域名以后,二级域名 三级域名会自动通过,无需配置二级 三级域名,可还是有很多人,分不清什么是一级域名和二级域名

一级域名和二级域名的区别

1、定义不同
*域(或一级域名),英语:Top-level domains,first-level domains(TLDs),也翻译为国际*域名。是互联网DNS等级之中7a686964616fe78988e69d8331333431373165的*的域;


二级域(或称二级域名;英语:Second-level domain;英文缩写:SLD)是互联网DNS等级之中,处于*域名之下的域。二级域名是域名的倒数第二个部分,例如在域名example.baidu.com中,二级域名是Baidu


2、域名组成不同
一级域名是由一个合法的字符串+域名后缀组成,例如:lisp.com这种形式的域名才是一级域名,lisp是域名主体,.com是域名后缀,可以是.net也是域名后缀;


二级域名是一个一级域名下面的主机名,它是在一级域名前面加上一个字符串,比如asdx.lisp.com


二级域名是依附在一级域名的存在而存在的,也就是说*域名消失了,二级域名也会不复存在,反而来说,二级域名网站不做了,主域名不受影响的。

3.同一订单号调用统一下单接口后未支付 再到另一个支付方式支付 报:201 重复下单 错误


这个错误一般发生在后台,php或者java端,微信在处理订单的时候和支付宝不同,例如你已经用native的方式,调用了统一下单接口,但是并未进行支付,这时,如果你拿同样的参数再去调用H5支付的统一下单接口,势必回报这个错误。

这个问题解决起来也好办,在调用统一下单接口给$out_trade_no形参时 给它加上区别字符,如 :

$out_trade_no = 'MWEB'.$out_trade_no; //H5支付
$out_trade_no = 'WWEB'.$out_trade_no; //native支付

这样就不会报错了

注意: 在支付成功回调逻辑处理的时候 别忘记把 $out_trade_no 的前几位标识符 去掉

最后

在前端代码中获取到支付链接以后直接

 window.location.href= MWEB_URL + '&redirect_url=' + encodeURIComponent(redirect_url);


完事,收工!