最新實用的微信H5手機網(wǎng)站支付源碼實例
一徒蟆、設置支付目錄
請確保實際支付時的請求目錄與后臺配置的目錄一致，否則將無法成功喚起微信支付刮吧。
在微信商戶平臺（pay.weixin.qq.com）設置您的公眾號支付支付目錄钻洒，設置路徑：商戶平臺-->產(chǎn)品中心-->開發(fā)配置酗昼，如圖7.7所示。公眾號支付在請求支付的時候會校驗請求來源是否有在商戶平臺做了配置闺骚，所以必須確保支付目錄已經(jīng)正確的被配置彩扔，否則將驗證失敗，請求支付不成功僻爽。
支付目錄配置
圖7.7 微信公眾號支付-支付目錄配置
二虫碉、設置授權域名
開發(fā)公眾號支付時，在統(tǒng)一下單接口中要求必傳用戶openid胸梆，而獲取openid則需要您在公眾平臺設置獲取openid的域名敦捧，只有被設置過的域名才是一個有效的獲取openid的域名须板，否則將獲取失敗。具體界面如圖7.8所示：
微信網(wǎng)頁授權域名 微信網(wǎng)頁授權域名
圖7.8 微信網(wǎng)頁授權域名設置
代碼如下：
(3):<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 頁面中引入微信的內(nèi)置js可以用WeixinJSBridge對象
(4):js內(nèi)容
$.ajax({
url:'向后臺的請求url地址兢卵。习瑰。。秽荤。',
type:'post',
dataType:'json',
data:{data},
success:function(data){
if(獲取數(shù)據(jù)成功){
var appIdVal=data.data.appId;
var timeStampVal=data.data.timeStamp;
var nonceStrVal=data.data.nonceStr;
var packageVal=data.data.package;
var signTypeVal=data.data.signType;
var paySignVal=data.data.sign;
onBridgeReady();
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":appIdVal, //公眾號名稱甜奄，由商戶傳入
"timeStamp":timeStampVal, //時間戳，自1970年以來的秒數(shù)
"nonceStr":nonceStrVal, //隨機串
"package":packageVal, //訂單詳情擴展字符串
"signType":signTypeVal, //微信簽名方式：
"paySign":paySignVal //微信簽名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
// 表示已經(jīng)支付,res.err_msg將在用戶支付成功后返回 ok王滤。
window.location.href="回調成功的url,支付成功頁面";
}
}
);
}
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();
}
}
},
error:function(){
}
})
2:pc端微信支付
（1）用的是使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html 中的
（2）：商戶后臺系統(tǒng)先調用微信支付的統(tǒng)一下單接口贺嫂，微信后臺系統(tǒng)返回鏈接參數(shù)code_url滓鸠，商戶后臺系統(tǒng)將code_url值生成二維碼圖片雁乡，用戶使用微信客戶端掃碼后發(fā)起支付。
注意：code_url有效期為2小時糜俗，過期后掃碼不能再發(fā)起支付踱稍。
（3）：前端只需向后臺發(fā)ajax請求拿到code_url。對應鏈接格式：weixin：//wxpay/bizpayurl?sr=XXXXX悠抹。
利用基于jquery類庫的jquery.qrcode.js的 插件繪制二維碼展示到頁面中珠月。
生成二維碼之后設置定時器去查詢下訂單。訂單支付成功之后楔敌。跳轉window.location.href="回調成功的url,支付成功頁面";
generateQRCode("table",300, 300, erweima);
// 查詢接口
timer=setInterval(checkorderinfo, 3000);
3：支付寶支付
對于前端都是后臺返回的一個發(fā)起支付寶的url（pc端和手機端url不同）
（1）pc端新開窗口打開支付寶掃碼支付啤挎。window.open(注意ajax內(nèi)部的攔截現(xiàn)象)
https://excashier.alipay.com/standard/auth.htm?payOrderId=。卵凑。庆聘。。勺卢。伙判。。黑忱。宴抚。。
（2）h5瀏覽器甫煞。直接 window.location.href =locationurl;
直接可以發(fā)起支付寶app去支付菇曲。
（3）支付成功后臺設置成功回跳的url.支付成功頁面。
在url中攜帶一些參數(shù)
http://www.xxx.com/shop/pay/xxx.html?total_amount=xxx×tamp=2017-08-03+16%3A18%3A57&sign=Wc7Q3DQ1d7tdRKO0ZqDW8MkkiRH6HhRazZOplZc0AhdNu8K7%2BsbN11WYMITrZ9MMNWJHW2QKXHM6WyUKWurmtLj44bPv%2F91uOqtop9QCNAr1Vs5B%2BoflTdoPHw8JLsied5z8eYIsI07smiETI5fvOgqc1fRsNrU2WyfH7nSm4FLkkAVtkKJkYlSakNd0ALz9qTEOd1Cxrbi3GjyNEEoqZm0L2cz3glsMf%2Fk9RnW8dOEXbvrdfGDMAgrCRkzeUOCkdXnweW60YojZHISDrtyisFcBrnuybKvPU9XWVSFdf0NwuwI0v%2BWnSd6ep9MNZWMtBNZNImop8pZWXnb4TVp9aQ%3D%3D&trade_no=xxxxxx&sign_type=xxx&auth_app_id=xxxxxx&charset=utf-8&seller_id=xxx&method=alipay.trade.page.pay.return&app_id=xxx&out_trade_no=xxx&version=1.0
通過參數(shù)獲取相應的信息比如
total_amount支付總金額
out_trade_no訂單號 等等
可以去后臺查詢購買狀態(tài)
