前端：微信支付和支付寶支付在pc端和h5頁面中的應用

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訂單號 等等

能夠去後臺查詢購買狀態