1:h5微信支付

使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的

(1)：公司需要首先要配置公眾號微信支付地址和測試白名單(支付的時候顯示這個支付頁面沒許可權有可能是這個原因）

如上圖http://www.xxx.com/shop/pay/pay.html

只需要配置 http://www.xxx.com/shop/pay即可。這個資料夾下的頁面都可以喚起微信支付許可權

(2)：參考api

(3):<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  頁面中引入微信的內建js可以用WeixinJSBridge物件   

(4):js內容

$.ajax({
　　url:'向後臺的請求url地址。。。。',
　　type:'post',
　　dataType:'json',
　　data:{data},
　　success:function(data){
　　　  if(獲取資料成功){

　　　　　　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年以來的秒數 
　　　　　　　　　　"nonceStr":nonceStrVal, //隨機串 
　　　　　　　　　　"package":packageVal,   //訂單詳情擴充套件字串
　　　　　　　　　　"signType":signTypeVal, //微信簽名方式： 
　　　　　　　　　　"paySign":paySignVal //微信簽名 
　　　　　　　　},
　　　　　function(res){ 
　　　　　　　　if(res.err_msg == "get_brand_wcpay_request:ok" ) {
　　　　　　　　// 表示已經支付,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）：商戶後臺系統先呼叫微信支付的統一下單介面，微信後臺系統返回連結引數code_url，商戶後臺系統將code_url值生成二維碼圖片，使用者使用微信客戶端掃碼後發起支付。

注意：code_url有效期為2小時，過期後掃碼不能再發起支付。

（3）：前端只需向後臺發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：支付寶支付

對於前端都是後臺返回的一個發起支付寶的url（pc端和手機端url不同）

（1）pc端新開視窗開啟支付寶掃碼支付。window.open(注意ajax內部的攔截現象)

https://excashier.alipay.com/standard/auth.htm?payOrderId=。。。。。。。。。。

（2）h5瀏覽器。直接 window.location.href =locationurl;

直接可以發起支付寶app去支付。

（3）支付成功後臺設定成功回跳的url.支付成功頁面。

在url中攜帶一些引數

http://www.xxx.com/shop/pay/xxx.html?total_amount=xxx&timestamp=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

 通過引數獲取相應的資訊比如

total_amount支付總金額

out_trade_no訂單號 等等

可以去後臺查詢購買狀態