支付jsapi前端后端的坑，以及详细流程（前端VUE后端JAVA）
⽀付jsapi前端后端的坑，以及详细流程（前端VUE后端JAVA）
⾸先，⽀付需要通过⼀个特定的链接来获取到⽤户的code，再通过code获取到openid（openid是后⾯需要传⼊的参数）；先看⼀下跳转获取code的代码。（获取code需要在配置授权地址）
@RequestMapping("getCodeToChildOrder")
public static String getCodeToChildOrder(String scope,String url) throws Exception {
// scope 为获取授权类型，null为默认授权
if(scope == null){
scope ="snsapi_base";
工科热门专业
}else{
scope ="snsapi_userinfo";
}
String code ="open.weixin.qq/connect/oauth2/authorize?appid="+ WeiXinUtils.APP_ID +"&redirect_uri="+ de(url,"U TF-8")+"&response_type=code&scope="+ scope +"#wechat_redirect";
return code;
}
可见，获取code的这段代码是回跳转到另外⼀个路径的，参数中的url就是要跳转的路径，很多时候页⾯跳转需要传递参数，顺带说⼀下vue中参数的传递和获取参数的⽅法。（WeiXinUtils.APP_ID是的appid，打开需要收款的，在开发配置中查看）
var url  ="www.baidu/Pay_leftAll?orderNumber="+der_number
⽐如说以上这是你需要跳转的页⾯以及携带的参数，那么把这个链接当作参数传递到后端。在进⾏页⾯跳转的时候就在地址栏带了这些参数，前台这样获取参数。
getParams (){
var url = location.search;
var theRequest = new Object();
if(url.indexOf("?")!=-1){
var str = url.substr(1);
var strs = str.split("&");
for(var i =0;i < strs.length;i++){
theRequest[ strs[i].split("=")[0]]=(strs[i].split("=")[1]);
}
}
},
然后是前台code的获取⽅式
getQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)","i");
var r = window.location.search.substr(1).match(reg);
if(r != null)return unescape(r[2]);return null;
},
你需要在哪个⽅法使⽤再通过下⾯这种⽅式就获取到了
var code = QueryString("code");
然后将code和业务参数传递到后台（appsecret获取⽅法）
public Result orders(HttpServletRequest request, String code){
try {
//页⾯获取openId接⼝
//此处为的appid，需要与上⾯获取code的appid⼀致三国姜维
//appsecret须与appid对应的
String getopenid_url ="api.weixin.qq/sns/oauth2/access_token";
无领导小组讨论技巧String param="appid="+WeiXinUtils.APP_ID+"&secret="+WeiXinUtils.AppSecret+"&code="+code+"&grant_type=authorization_code";
//向服务器发送get请求获取openIdStr
String openIdStr = WeixinHttp.sendGet(getopenid_url, param);
JSONObject json = JSONObject.parseObject(openIdStr);//转成Json格式
String openId = String("openid");//获取openId摘抄好段
//拼接统⼀下单地址参数
Map<String, String> paraMap = new HashMap<String, String>();
//获取请求ip地址
String ip = Header("x-forwarded-for");
if(ip == null || ip.length()==0||"unknown".equalsIgnoreCase(ip)){
ip = Header("Proxy-Client-IP");
}
if(ip == null || ip.length()==0||"unknown".equalsIgnoreCase(ip)){
ip = Header("WL-Proxy-Client-IP");
}
if(ip == null || ip.length()==0||"unknown".equalsIgnoreCase(ip)){
ip = RemoteAddr();
}
if(ip.indexOf(",")!=-1){
String[] ips = ip.split(",");
ip = ips[0].trim();
}
//此处为的appid，需要与上⾯获取code的appid⼀致
paraMap.put("appid", WeiXinUtils.APP_ID);
paraMap.put("body","商品名称");
paraMap.put("mch_id","商户ID");
//如果没有⼦商户此项删掉，⼦商户id可在商户平台查看，前提是必须授权
paraMap.put("sub_mch_id","⼦商户ID");
//sdk中获取随机字符串的⽅法
paraMap.put("nonce_str", ateNonceStr());
paraMap.put("openid", openId);
paraMap.put("out_trade_no","商户订单号");//订单号
paraMap.put("spbill_create_ip", ip)
paraMap.put("total_fee","商品⾦额，单位是分 1为⼀分");
paraMap.put("trade_type","JSAPI");
paraMap.put("notify_url","");// 此路径是服务器调⽤⽀付结果通知路径
String sign = ateSignature(paraMap, WeiXinUtils.key);
paraMap.put("sign", sign);
String xml = WXPayUtil.mapToXml(paraMap);//将所有参数(map)转xml格式
// 统⼀下单 h.weixin.qq/pay/unifiedorder
String unifiedorder_url ="h.weixin.qq/pay/unifiedorder";
String xmlStr = WeixinHttp.sendPost(unifiedorder_url, xml);//发送post请求"统⼀下单接⼝"返回预⽀付id:prepay_id //以下内容是返回前端页⾯的json数据
String prepay_id ="";//预⽀付id
String prepay_id ="";//预⽀付id
if(xmlStr.indexOf("SUCCESS")!=-1){
Map<String, String> map = lToMap(xmlStr);
prepay_id =(String) ("prepay_id");
}
Map<String, String> payMap = new HashMap<String, String>();
//与上appid⼀致
payMap.put("appId", WeiXinUtils.APP_ID);
payMap.put("timeStamp", CurrentTimestamp()+"");
payMap.put("nonceStr", ateNonceStr());
payMap.put("signType","MD5");
payMap.put("package","prepay_id="+ prepay_id);
//WeiXinUtils.key为⽣成的32位密钥
柏树String paySign = ateSignature(payMap, WeiXinUtils.key);            payMap.put("paySign", paySign);
//到此为⽌会将所有的前台需要的参数拼接好返回给你，⼀共六个参数
//如果验签错误，或者appid与appsecret不符会报错注意查看返回的错误信息return new Result(1, StatusCode.OK,"ok",payMap);
} catch (Exception e){
e.printStackTrace();
return new Result(0, StatusCode.ERROR,"error","");
}
}
以上后端的代码就是全部的后端代码了。接下来是前台的
wxpay(){
var code = QueryString("code");
callWXpay({code:code})
.then(res =>{
//获取参数的⽅法我的⽐较low 各位⽤⾃⼰的写法
var appId = res.data.data.appId;
var time1 = res.data.data.timeStamp;
var non = res.Str;
var packag = res.data.data.package;
var signn = res.data.data.signType;
var paySin = res.data.data.paySign
if(typeof WeixinJSBridge =="undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', BridgeReady, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', BridgeReady);
document.attachEvent('onWeixinJSBridgeReady', BridgeReady);
}
}else{
//调⽤⽅法参数传递
}
}).catch((err)=>{
})
},
onBridgeReady(appId,time1,non,packag,signn,paySin){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{
"appId": appId,//名称，由商户传⼊
"timeStamp": time1,//时间戳，⾃1970年以来的秒数
"nonceStr": non,//随机串
"package": packag,
"signType": signn,//签名⽅式：
"paySign": paySin  //签名
},
function(res){
_msg =="get_brand_wcpay_request:ok"){
/
/付款成功跳转页⾯
window.location.href=""
}
描写动物的好词好句});
},
以上就是h5 jsapi⽀付的所有代码，⼯具类在官⽅的sdk都有，就不贴了，如有疑问，留⾔或者加q390584929联系。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。