JS通過調(diào)用微信API實現(xiàn)微信支付功能的方法示例
本文實例講述了JS通過調(diào)用微信API實現(xiàn)微信支付功能的方法。分享給大家供大家參考,具體如下:
最近在做微信公眾號開發(fā),在微信支付上遇到一些問題,困惑了3天,今天終于搞定。期間要感謝一些大神的幫助,趁熱下面分享一下我的經(jīng)驗。
在實現(xiàn)微信支付之前,需要到微信開發(fā)平臺認證,這些認證和配置信息我就不多說了,這里主要從代碼層面實現(xiàn)支付。
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入
"timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù)
"nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機串
"package" : "prepay_id=u802345jgfjsdfgsdg888", //統(tǒng)一訂單號
"signType" : "MD5", //微信簽名方式:
"paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付簽名
},
function(res){
alert(res.err_msg);
if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判斷前端返回,微信團隊鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對可靠。
}
);
}
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();
}
上面的JS代碼是官方文檔上貼出來的,官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。
下面對JS中的幾個參數(shù)做主要的講解:
在開發(fā)過程中,有4個非常重要的參數(shù):一個是appid,AppSecret,apikey和商戶號。上面js中的appID就是其中之一。timeStamp是一個時間戳,10位數(shù),nonceStr是隨機數(shù),32位以內(nèi),這里最重要的兩個參數(shù),也是最容易出錯的就是package和paySign了。我一一說來。先說package,這里需要用到prepay_id,這個參數(shù)是微信生成的訂單號,需要我們調(diào)用統(tǒng)一訂單接口來獲取。官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1??梢詮奈臋n看到,要獲取prepay_id,需要很多參數(shù),這里面有一個非常重要的參數(shù)就是簽名。注意:這里的簽名和JS中的支付簽名和不同的。 簽名的算法文檔里有,我只是強調(diào)兩點。一個是參數(shù)的順序,一定一定要按照ASCII從小到大拼接,二是apikey一定不能錯,這個apikey在哪里呢?登入商戶平臺就可以設(shè)置了。

拼接好簽名需要的字符串后,進行MD5加密就可以得到簽名了。然后把簽名和前面所有的參數(shù)組合成xml格式的字符串,調(diào)用給的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一個xml結(jié)果,解析出其中的prepay_id,這樣這個參數(shù)就成功獲取到了。
下面再說JS中的最后一個參數(shù)PaySign:支付簽名。支付簽名的算法也是一樣,把JS中的其他5個參數(shù)按照順序拼接,加上apikey,MD5加密,ok。
簽名的算法都是一樣的,只是參數(shù)值不同而已。這里需要注意一點。在支付簽名的時候,用到隨機數(shù)nonceStr,時間戳timeStamp,而簽名時使用的這兩個參數(shù)和JS中的這兩個參數(shù)的值要是一樣的,是同一個隨機數(shù),同一個時間戳。為什么呢?雖然文檔沒說,但是我的理解是:支付簽名是通過隨機數(shù)和時間戳來生成的,然后在支付的時候,把隨機數(shù),時間戳,支付簽名一起發(fā)送過去,那么在微信進行驗證的時候,也會根基js中的隨機數(shù)和時間戳生成簽名和你發(fā)送的支付簽名進行比較,如果你在js中重新獲取新的隨機數(shù)、時間戳,那么算出來的簽名和你發(fā)送的簽名就會不一樣,就會報錯:簽名失敗。
到此,代碼層面的注意點就這些,當然,還有其他的一些注意點。比如其中有用的openid,這個參數(shù)也是需要調(diào)用接口獲取到的,還有支付授權(quán)的目錄是否配置正確。
最后一句總結(jié):仔細看文檔,最后問別人,可以找微信支付相關(guān)的群,里面很多大神的,我之前就是遇到一個問題糾結(jié)了2天沒解決,(有時候光看文檔也不行),
然后怒加了8個微信開發(fā)的群,最終在高人的指點下終于搞出來了。再次表示感謝。程序員是一個熱愛分享的群體,他們非常樂意把自己知道的東西分享出去。所以不懂的時候,多問問。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02
javascript動態(tài)控制服務(wù)器控件實例
在頁面中放入一個DropDownList控件,并添加一項,用來分析其產(chǎn)生的HTML代碼,這樣在使用js進行動態(tài)控制時,將會非常清晰2014-09-09
js獲取url中的參數(shù)且參數(shù)為中文時通過js解碼
這篇文章主要介紹了url中傳遞中文參數(shù)的時候通過js解碼,需要的朋友可以參考下2014-03-03
JS使用隊列對數(shù)組排列,基數(shù)排序算法示例
這篇文章主要介紹了JS使用隊列對數(shù)組排列,基數(shù)排序算法,涉及javascript隊列的定義、使用,基數(shù)排序?qū)崿F(xiàn)方法等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
BootStrap的select2既可以查詢又可以輸入的實現(xiàn)代碼
這篇文章主要介紹了bootstrap的select2既可以查詢又可以輸入的實現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02

