真香，微信公众号支付完整流程案例
原创
<!--more-->
简介
微信公众号支付，顾名思义就是必须在微信中实现支付，并且需要公众号配合。
教程
由于我们使用的是第三方封装好的接口，这里省去了我们自己配置公众号。为什么用第三方？因为个人没有申请权限。
交互细节：
以下是支付场景的交互细节，请认真阅读，设计商户页面的逻辑：
- 用户打开商户网页选购商品，发起支付，在网页通过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 密码：123456
支付服务：支付宝，微信，银联详细 代码案例：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
