简介
微信公众号支付,顾名思义就是必须在微信中实现支付,并且需要公众号配合。
教程
由于我们使用的是第三方封装好的接口,这里省去了我们自己配置公众号。为什么用第三方?因为个人没有申请权限。
交互细节:
以下是支付场景的交互细节,请认真阅读,设计商户页面的逻辑:
用户打开商户网页选购商品,发起支付,在网页通过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
支付服务:支付宝,微信,银联详细 代码案例:
/52itstyle/spring-boot-pay