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

简介

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

教程

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

交互细节：

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

• 用户打开商户网页选购商品，发起支付，在网页通过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;
}

演示

网址：pay.cloudbed.vip/login.html

账号：pay 密码：123456

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

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