微信支付JSAPI支付

1.介紹ios

JSAPI支付是用戶在微信中打開商戶的H5頁面,商戶在H5頁面經過調用微信支付提供的JSAPI接口調起微信支付模塊完成支付。
應用場景有:
    ◆ 用戶在微信公衆帳號內進入商家公衆號,打開某個主頁面,完成支付
    ◆ 用戶的好友在朋友圈、聊天窗口等分享商家頁面鏈接,用戶點擊連接打開商家頁面,完成支付
    ◆ 將商戶頁面轉換成二維碼,用戶掃描二維碼後在微信瀏覽器中打開頁面後完成支付
 JSAPI支付只能用微信瀏覽器打開ajax

 

2.商戶號配置json

  在微信商戶平臺(pay.weixin.qq.com)設置您的JSAPI支付支付目錄,設置路徑:商戶平臺-->產品中心-->開發配置
  JSAPI支付在請求支付的時候會校驗請求來源是否有在商戶平臺作了配置,因此必須確保支付目錄已經正確的被配置,不然將驗證失敗,
請求支付不成功。api

 

3.在微信公衆平臺設置受權域名瀏覽器

     開發JSAPI支付時,在統一下單接口中要求必傳用戶openid,而獲取openid則須要您在公衆平臺設置獲取openid的域名
只有被設置過的域名纔是一個有效的獲取openid的域名,不然將獲取失敗。

緩存

注:使用微信jsapi支付必須先配置好以上信息,否則開發過程成中會有不少頁面錯誤提示報錯,爲了不,先配置好所須要的信息,安全

   網頁受權域名是用來向微信獲取code微信

 

4.微信網頁受權app

若是用戶在微信客戶端中訪問第三方網頁,公衆號能夠經過微信網頁受權機制,來獲取用戶基本信息,進而實現業務邏輯
關於網頁受權的兩種scope的區別說明
    一、以snsapi_base爲scope發起的網頁受權,是用來獲取進入頁面的用戶的openid的,而且是靜默受權並自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁(每每是業務頁面)
    二、以snsapi_userinfo爲scope發起的網頁受權,是用來獲取用戶的基本信息的。但這種受權須要用戶手動贊成,而且因爲用戶贊成過,因此無須關注,就可在受權後獲取該用戶的基本信息。
    三、用戶管理類接口中的「獲取用戶基本信息接口」,是在用戶和公衆號產生消息交互或關注後事件推送後,才能根據用戶OpenID來獲取用戶基本信息。這個接口,包括其餘微信接口,都是須要該用戶(即openid)關注了公衆號後,才能調用成功的。
官方連接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842微信公衆平臺

因爲咱們公司只須要獲取code調取後臺接口換取openid,而且不須要獲取用戶暱稱,頭像等信息,因此我只須要使用第一種方式便可

方法以下:

用戶贊成受權,獲取code

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示「該連接沒法訪問」,請檢查參數是否填寫錯誤,是否擁有scope參數對應的受權做用域權限。

注意:跳轉回調redirect_uri,應當使用https連接來確保受權code的安全性。

注意 代碼須要放到線上去運行,才能真的調取成功,在本地運行會報redirect_uri錯誤 提示

注意:code做爲換取access_token的票據,每次用戶受權帶上的code將不同,code只能使用一次,5分鐘未被使用自動過時  


5. 網頁受權成功了,那接下來就可使用支付了

微信JS-SDK是微信公衆平臺 面向網頁開發者提供的基於微信內的網頁開發工具包。
經過使用微信JS-SDK,網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,爲微信用戶提供更優質的網頁體驗。

因爲jsapi支付是微信JS-SDK工具包的一種方式,因此咱們先安裝JS-SDK工具包才能使用

第一步:綁定域名 因爲以前咱們已經在微信公衆號平臺設置了js接口安全域名,故已經綁定成功

第二步:引入js文件

在須要調用JS接口的頁面引入以下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需進一步提高服務穩定性,當上述資源不可訪問時,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。
備註:支持使用 AMD/CMD 標準模塊加載方法加載
第三步 :經過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來,若要查看傳入的參數,能夠在pc端打開,參數信息會經過log打出,僅在pc端時纔會打印。
    appId: '', // 必填,公衆號的惟一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名
    jsApiList: [] // 必填,須要使用的JS接口列表
});

6.最後能夠發起微信支付了

wx.chooseWXPay({
timestamp: 0, // 支付簽名時間戳,注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: '', // 支付簽名隨機串,不長於 32 位
package: '', // 統一支付接口返回的prepay_id參數值,提交格式如:prepay_id=\*\*\*)
signType: '', // 簽名方式,默認爲'SHA1',使用新版支付需傳入'MD5'
paySign: '', // 支付簽名
success: function (res) {
// 支付成功後的回調函數
}
});

完整實例以下:

var appid = 'appid';//appid爲公衆號appid
var local = window.location.href ;//當前跳轉路徑
var code = getParam('code');//獲取地址欄參數code
if (code === null || code === '') { 
    // 跳轉至受權地址,該地址只支持微信瀏覽器打開
       location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_base#wechat_redirect")
}else{
     getOpenId(code);//拿到了code 找後臺換取openid
}
//爲避免網頁受權會刷新界面,ios微信瀏覽器會出現白條切換按鈕會致使支付出錯 ,建議將以上方法寫在首頁中,不要寫在支付頁面
getConfig()//受權方法應放在支付頁面加載的時候。進入支付頁面就執行受權
wx.chooseWXPay({  //此方法應放在調用後臺統一下單接口成功後回調裏面,接口返回  timeStamp,nonceStr,package,paySign等參數
    timestamp: res.data.timeStamp, 
    nonceStr: res.data.nonceStr, 
    package: res.data.package,
    signType: 'MD5', 
    paySign: res.data.paySign, 
    appId:res.data.appId,  //此參數可不用
    success: function (r) {
     // 支付成功後的回調函數  
       if (r.errMsg == "chooseWXPay:ok") {  
          //支付成功  
        } else {  
            location.reload();//支付失敗 刷新界面
        }  
  },
  cancel: function(r) {  
        //支付取消  
   }  
});
//如下方法能夠放在common.js中
//獲取地址欄 指定參數名參數
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); //獲取url中"?"符後的字符串並正則匹配
    var context = ""; 
    if (r != null) 
       context = r[2]; 
    reg = null; 
    r = null;
    return context == null || context == "" || context == "undefined" ? "" : context; 
}
function getOpenId(code) {//咱們公司獲取openid接口
    $.ajax({
        type: "POST",
        url: window.baseurl+"/miniprogram/user/getOpenId?code="+code+"&type=2",//1 微信 2公衆號
        cache: false,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (res) {
            if (res.msgCode==0) {//成功
                localStorage.setItem('openId',res.data.openid)//將openid存入緩存
            } else {
                // alert('openid獲取失敗')
            }
        },
        error: function (res) {

        },
    })
}


function getConfig(){
    //獲取後臺簽名,向微信獲取受權 
    $.ajax({
        type: "POST",
        url: window.baseurl+"/miniprogram/user/getTicket",
        data:{"url":location.href.split("#")[0]},
        dataType: "json",
        success: function (data) {
            if (data.msgCode==0) {//成功
                wxConfig(data.data.timestamp,data.data.nonceStr,data.data.signature)
            } else {
                
            }
        },
        error: function (res) {
          
        },
        
    })
}
//獲取微信受權
function wxConfig(Timestamp,NonceStr,Signature){
    //經過config接口注入權限驗證配置
    wx.config({
        debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來,若要查看傳入的參數,能夠在pc端打開,參數信息會經過log打出,僅在pc端時纔會打印。
        appId: 'wx840b32f985622d8e', // 必填,公衆號的惟一標識
        timestamp: Timestamp, // 必填,生成簽名的時間戳
        nonceStr: NonceStr, // 必填,生成簽名的隨機串
        signature: Signature,// 必填,簽名
        jsApiList: ['chooseWXPay','scanQRCode'] // 必填,須要使用的JS接口列表 這裏是使用的是微信支付接口
    });
    //經過ready接口處理成功驗證
    wx.ready(function(){
        console.log('ready接口處理成功驗證')
       
    });
    //經過error接口處理失敗驗證
    wx.error(function(res){
        console.log('error接口處理失敗驗證')
    });
}

最後注意:(如下都是本人踩過的坑!!!)

1.因爲網頁受權會二次刷新頁面,ios手機微信底部會出現白條,故跳轉頁面方法最好使用window,location.replace()   能夠避免支付錯誤,好比  提示:調用支付jsapi缺乏參數: $key0$  這是因爲沒拿到openid致使

2.調用支付時,錯誤提示爲: 支付返回簽名錯誤  多是因爲後臺生成簽名時參數大小寫沒有按照官方文檔大小寫來生成簽名。故必定要嚴格按照官方文檔要求開發

3.若是signature簽名和微信校驗工具簽名一致,可是仍是報config:invalid signature 錯誤,多是公衆號後臺ip白名單沒有設置當前使用環境的ip 

相關文章
相關標籤/搜索