关于微信H5公众号支付我们踩过的坑(get_brand_wcpay_request:fail)

最近公司有了一个新的需求,学生在购买课时的时候,需要让家长或者朋友代付。这样的话我首先想到的就是微信的H5支付(微信内置浏览器调用支付模块)。当时想用这个支付的原因因为是前端代码十分简单。。 
然而恰恰是因为自己选择了这个方法,让自己连续两天陷入了困境。 
下面是正文跟代码截图 
首先咱们先来看下H5的支付文档说明 


微信官方的H5支付文档
咱们新手或者写过微信支付的童鞋都不难看懂 其实十分简单,需要的入参跟说明一目了然。但是H5支付的大前提很重要,就是需要用户的openid,不然你在调用微信统一下单的时候(其中交易类型:trade_type = JSAPI)它们会返回你说确实openid这个参数。问题是这个参数我们从哪来呢? 
我直接搜一些资料贴给大家; 
据我所知目前有两个方式: 
1.微信OAuth网页授权。服务号(订阅号不行)可以在公众号后台开通微信OAuth网页授权,用户在网页中进行授权操作时你会得到用户的openid 
2.接入服务器。微信允许接入服务器进行开发,配置好接入服务器(参考微信的开发文档)后,用户发给公众号的消息全部会以一个xml表单的形式被转发到你的服务器上。 
我使用的是第一种方式,其实很简单,大家可以参考微信的demo微信H5demo 
其中参考example/WxPay.JsApiPay.php里面的GetOpenid方法。 
这样获取到openid再去调用统一下单接口就没问题,如果再有其他问题,可以打日志看微信返回错误,一般这个地方的返回错误比较明显,很容易查到原因。最坑也是最泪崩的是以后的错误类型。 
我们看到我们调用统一接口成功之后会返现微信返回的结果里面有这些东西 


统一下单之后我们拿到的东西 


从结果里面我们不难看出调用微信支付的demo里面要的几个参数我们全部有了,包括sign签名(这是一个坑)。这样的话 我们只需要把这些参数返回给客户端直接组合数据应该就能成功了。 
此时我们把数据返回给客户端 ,客户端组合数据如下 


前端代码

我们测试之后发现。微信返回的是支付签名验证失败,一般通用错误类型会返回get_brand_wcpay_request:fail。这个时候 我又去看了一下文档,那个时间戳是十位,js这种方法是13位精确到毫秒的,于是我切割字符串,获得十位时间戳,这个时候再去测试仍然跟上次错误一样。于是我慢慢的冷静下来。开始在网上疯狂查资料。查找问题在哪?网上的答案一般是支付授权目录的问题,其实这个我早就设置好了的。没有问题的。于是我又一遍的啃起了他的官方文档,结合他们的demo重新理了一遍思路。原来文档里面几个参数中只有package这个参数会用统一下单返回的数据,真是中国文化博大精深啊,玩文字游戏啊。 
于是我猜想那么统一接口返回的sign也不能用楼。难不成所谓的sign是统一下单返回的结果重新用md5去生成么? 
我只能去测试验证我的结论了。不多说,贴代码 


 


这组代码是我从统一订单返回结果之后 按照文档的说明,(大小写别写错),重新生成了sign,然后返回客户端,包括时间戳也返回。这样的话再去测试,它不会再报get_brand_wcpay_request:fail。它会给我报了另外一个错误,提示我说当前页面为注册,同时弹了url出来(这一步,如果童鞋在公众号设置。微信支付-》支付授权目录)填写过的话,应该就没其他问题了。可以忽略。 
基本上H5内置浏览器调用微信支付模块就是这些东西。主要的坑在于签名。微信返回的错误类型是最坑爹的,全是通用的,根本不能快速定位

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 uni.app 中使用微信公众号 H5 支付,你可以按照以下步骤进行操作: 1. 首先,确保你已经配置好了微信公众号支付功能,并且已经获取到了支付的相关参数,例如订单号、支付金额等。 2. 在 uni-app 中,可以使用 `uni.request` 或其他网络请求库来发起支付请求。你需要向微信支付接口发送一个 POST 请求,包含支付相关的参数。 例如: ```javascript uni.request({ url: 'https://api.mch.weixin.qq.com/pay/unifiedorder', // 微信支付接口地址 method: 'POST', data: { // 支付参数,例如 appid、mch_id、nonce_str、body、out_trade_no、total_fee 等 }, success: (res) => { // 请求成功的回调函数 // 解析返回的数据,获取预支付交易会话标识 prepay_id const prepayId = res.data.prepay_id; // 调用 H5 支付接口进行支付 uni.requestPayment({ provider: 'wxpay', timeStamp: '', // 时间戳 nonceStr: '', // 随机字符串 package: '', // 统一下单接口返回的 prepay_id 参数值 signType: 'MD5', paySign: '', // 签名 success: (res) => { // 支付成功的回调函数 console.log(res); }, fail: (err) => { // 支付失败的回调函数 console.log(err); } }); }, fail: (err) => { // 请求失败的回调函数 console.log(err); } }); ``` 在上述代码中,你需要根据实际情况填写支付接口地址、支付参数、预支付交易会话标识 prepay_id 以及支付的回调函数。 3. 当用户点击支付按钮后,会触发支付请求,用户将会跳转到微信支付页面完成支付操作。 请注意,以上代码仅为示例,实际使用时需要根据 uni-app 中的具体语法和微信支付接口的要求进行相应的调整和处理。同时,确保在后端服务器中进行订单处理和验证,以确保支付的安全和准确性。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值