The whole process of Java development WeChat official account payment

background configuration

wechat:
    pay:
        #秘钥
        key: #此处为商户平台配置的api秘钥 我用的apiv2接口 推荐v2 v3使用一样的秘钥
        #公众号 Appid
        subscriptionAppId: xxxx
        #公众号 商户id
        subscriptionMchId: xxxxx
        # 证书地址
        certPath: /cert/apiclient_cert.p12 #在商户平台下载的证书复制到resourcesd的cert目录下
        spbillCreateIp: #正常ip即可
   
callBack: #这两个地址需要在微信公众号后台添加白名单和配置
    notifyUrl: #通知地址
    returnUrl: #回调地址
/**
*自定义预支付方法 用于传给前端需要参数唤起微信支付
*/
@ApiOperation("支付接口")
@PostMapping("payMoney")
@RepeatSubmit(interval = 1000, message = "请求过于频繁")
public AjaxResult payMoney(@RequestBody ReqPayVO reqPayVO) {
    
    
    // 整理返回值map
    Map<String, Object> map = new HashMap<>(2);
    Map<String, Object> createAAssessTestOrderMap = businessPayService.createOrder(reqPayVO);
    map.put("orderId", createAAssessTestOrderMap.get("orderId"));
    map.put("wechatJsApiResult", createAAssessTestOrderMap.get("wechatJsApiResult"));
    return AjaxResult.success(map);
}

front code

The front end only needs to receive parameters and send requests.

//继续支付
payAgain() {
  console.log(this);
  const data = this._data.result;
  const params = {
    openId: data.openId,
    orderId: data.orderNum,
    payMoney: data.cost,
    body: data.body,
    type: data.type
  }
  payAgain(params).then(({data}) => {
    uni.hideLoading();
    console.log(params);
    uni.hideLoading();
    if (data.code == 200) {
      console.log(data);
      WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            // 公众号ID,由商户传入
            "appId": data.appId,
            // 时间戳,自1970年以来的秒数
            "timeStamp": data.timestamp,
            // 随机串
            "nonceStr":data.noncestr,
            "package":data.pack,
            // 微信签名方式
            "signType":"MD5",
            // 微信签名
            "paySign":data.paySign
          },
          function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
              // 使用以上方式判断前端返回,微信团队郑重提示:
              // res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            }
          });
    } else {
      console.log(data);
      console.log(666);
    }
  });
},

local test

Because the WeChat development assistant can't evoke WeChat payment, I had to find other testing methods, and finally found an idea.

Reference address: https://blog.csdn.net/w263756314/article/details/110014307

1. First penetrate the generated domain name of the local background service

2. Custom payment test code method

3. Use WeChat to open the test address and complete the test

(Send the test address to any chat box, just click on it)

Real machine debugging (it has nothing to do with testing WeChat payment, you don’t need to read it, just understand it)

  1. Download tbs studio tool, URL; https://x5.tencent.com/tbs/guide/debug/download.html

    (ps: I clicked several times to download successfully for the first time)

  2. For setting mobile phone debugging parameters, please refer to: https://blog.csdn.net/yishengyouni95/article/details/80719281

  3. Wechat downgrades version 8.0.21, you need to delete the new version before downgrading

    After the WeChat update version 8.0.22, the original debugmm.qq.com/?forcex5=true is opened and it shows that switching x5 kernel is not supported, so you need to roll back the WeChat version, please refer to: https://www.bilibili.com/read/cv16749069

    (Just click to install the kernel online and restart WeChat)

    4. Follow the instructions and click Debug

    (Put the official account to be debugged on the front of the phone: just open the official account and don’t move)
    insert image description here

You can also enter in Google Chrome: chrome://inspect/#devices

(tbs studio needs to always open Google browser to rely on this tool)

insert image description here

Click inspect, the proxy is needed for the first time,

5. Open the ladder of science

insert image description here

Open the Google extension, search for SwitchyOmega, the first one I choose feels like any one is fine

(By the way, I downloaded a few video website free vip plug-ins)

insert image description here
Then click inspect, the interface exactly the same as that of the mobile phone appears, and start debugging

insert image description here

Guess you like

Origin blog.csdn.net/weixin_52016779/article/details/125957938
Recommended