简介

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

教程

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

交互细节：

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

用户打开商户网页选购商品，发起支付，在网页通过JavaScript调用getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程。

用户成功支付点击完成按钮后，商户的前端会收到JavaScript的返回值。商户可直接跳转到支付成功的静态页面进行展示。

商户后台收到来自微信开放平台的支付成功回调通知，标志该笔订单支付成功。

前端引入：

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

获取授权链接

根据 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);

}

前台逻辑：

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