微信支付之內置瀏覽器的H5頁面支付

微信支付之內置瀏覽器的H5頁面支付

因為項目需要，要在H5頁面中加入微信支付，所以便去嘗試，只想說真的很坑，尤其調試起來不方便

這是微信的官方API文檔 微信API

微信支付的准備工作

• 申請公眾號，申請開通支付，這個很簡單，自行百度
• 申請好之后 在微信公眾平台頁面的“微信支付”頁面中的“開發配置”Tab上配置“支付授權目錄”，“測試授權目錄”，“測試白名單”
• 在微信公眾平台頁面的“開發者中心”中找到“AppID(應用ID)”和“AppSecret(應用密鑰)”
• 在商戶平台中找到微信支付分配的商戶號，以及自己配置一個商戶支付密鑰

具體步驟

• 首先通過微信支付的api 獲得支付用的prepay_id，這里需要用到上面提到的“AppID(應用ID)”，“AppSecret(應用密鑰)”，
  “微信支付分配的商戶號”，“商戶支付密鑰”以及其他的一些參數（具體參照微信開發文檔）用MD5加密成簽名（第一次簽名）
• 獲得prepay_id后，用prepay_id和一些其他參數（具體參照微信開發文檔）用MD5加密成簽名（第二次簽名）
• 然后在前端通過微信內置瀏覽器提供的js API，WeixinJSBridge.invoke來調用微信支付的彈出頁面，這里需要用到上面的第二次的簽名
  • 具體代碼如下

    $.get('/xxx',function(data){
  		if(data && data !== ""){
  			var _data = $.parseJSON(data)[0];
  			if(parseInt(_data.userAgent) < 5){
  				alert('您的微信版本低於5.0，無法使用微信支付！');
  				return false;
  			}
  			WeixinJSBridge.invoke('getBrandWCPayRequest',{
  				'appId': _data.appId,
  				'timeStamp': _data.timeStamp,
  				'nonceStr': _data.nonceStr,
  				'package': 'prepay_id=' + _data.packageOne,
  				'signType': _data.signType,
  				'paySign': _data.paySign
  				},function(res){
  					if(res.err_msg === 'get_brand_wcpay_request:ok'){
  						alert('支付成功，返回訂單列表！');
  					}else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
  						alert('取消支付！');
  					}
  			});
  			
  		}
  	});
  

幾個容易失敗點需要注意

• 支付鏈接和在開發平台配置的鏈接不匹配
• 總共需要2次簽名，並且所需的參數是不同的，在JS中用到的簽名是第二次簽名，不要混淆
• 參數傳遞的不能有錯
• 如果body中有中文需要轉義

其中還有一些問題沒有完全解決，就是位置支付沒有一個判斷失效的時間，如果在微信支付的彈出層停留時間太久了，可能這個訂單在我們網站上
已經失效了，可在微信支付中仍然能支付成功，如果有高人知道這個問題怎么解決的，希望能告訴解決辦法