真香，微信公众号支付完整流程案例

作者:小柒

发表于 2020-11-29

| 分类于

支付

微信公众号支付，顾名思义就是必须在微信中实现支付，并且需要公众号配合。

由于我们使用的是第三方封装好的接口，这里省去了我们自己配置公众号。为什么用第三方？因为个人没有申请权限。

交互细节：

以下是支付场景的交互细节，请认真阅读，设计商户页面的逻辑：

用户打开商户网页选购商品，发起支付，在网页通过JavaScript调用getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程。
用户成功支付点击完成按钮后，商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。
商户后台收到来自微信开放平台的支付成功回调通知，标志该笔订单支付成功。

前端引入：

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

后台逻辑，基本上就这三步：

获取授权链接
根据 code 获取 openId
根据 openId 获取支付参数

/**
 * 获取授权链接，首先调用此方法
 * @return
 */
@GetMapping(value="getOauthUrl")
public void getOauthUrl(HttpServletResponse response) throws IOException {
    String url="https://xxx.xxxx.vip/pay/weiXin.html?a=1";
    String oauthUrl = WxPay.getWxOauthUrl(null, url);
    response.sendRedirect(oauthUrl);
}

/**
 * 根据 code 获取 openId
 * @param code
 * @return
 */
@PostMapping(value="getWxOauthInfo")
public Result getWxOauthInfo(String code) {
    WxOauthInfo wxOauthInfo = WxPay.getWxOauthInfo(code);
    return Result.ok(wxOauthInfo);
}

/**
 * 下单并获取请求参数
 * @return
 */
@PostMapping(value="jsApiPay")
public Result jsApiPay(Product product) {
    return wxPayService.jsApiPay(product);
}

前台逻辑：

<script th:inline="none">
var order = {};
var openId;
$(function(){
    var code = GetRequest()['code'];
    $.ajax({
        url:"/pay/getWxOauthInfo",
        type: "POST",
        data : {'code':code},
        success: function (result) {
            openId = result.msg.openId;
        }
    });
});
function callPay(){
    $.ajax({
        url:"/pay/jsApiPay",
        data : {
            productId:1,
            body:"胡列娜精美手办",
            totalFee:'1',
            openId:openId
        },
        type: "POST",
        success: function (result) {
            if(result.code==0){
                order = JSON.parse(result.msg);
                order.openId = openId;
                pay();
            }
        }
    });
}
function pay(){
  if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
           document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
       }else if (document.attachEvent){
           document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
           document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      }
  }else{
     onBridgeReady();
  }
}
function onBridgeReady(){
    WeixinJSBridge.invoke('getBrandWCPayRequest',order,function(res){
         //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
         if(res.err_msg == "get_brand_wcpay_request:ok"){
             //微信 自带 支付成功效果
         }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
             alert("用户取消支付!");
         }else if(res.err_msg == "get_brand_wcpay_request：fail"){
             alert("支付失败!");
         }
    })
}
function GetRequest() {
   var url = location.search;
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}

网址：https://pay.cloudbed.vip

账号：pay 密码：123456

支付服务：支付宝，微信，银联详细代码案例：

https://gitee.com/52itstyle/spring-boot-pay

有兴趣的小伙伴可以去测试一下，支付一分钱，满满的都是爱。你也可以直接识别下方二维码进入支付通道。