JS通過調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法示例
本文實(shí)例講述了JS通過調(diào)用微信API實(shí)現(xiàn)微信支付功能的方法。分享給大家供大家參考,具體如下:
最近在做微信公眾號(hào)開發(fā),在微信支付上遇到一些問題,困惑了3天,今天終于搞定。期間要感謝一些大神的幫助,趁熱下面分享一下我的經(jīng)驗(yàn)。
在實(shí)現(xiàn)微信支付之前,需要到微信開發(fā)平臺(tái)認(rèn)證,這些認(rèn)證和配置信息我就不多說了,這里主要從代碼層面實(shí)現(xiàn)支付。
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" : "wx2421b1c4370ec43b", //公眾號(hào)名稱,由商戶傳入 "timeStamp":" 1395712654", //時(shí)間戳,自1970年以來的秒數(shù) "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 "package" : "prepay_id=u802345jgfjsdfgsdg888", //統(tǒng)一訂單號(hào) "signType" : "MD5", //微信簽名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付簽名 }, function(res){ alert(res.err_msg); if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對(duì)可靠。 } ); } 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。
下面對(duì)JS中的幾個(gè)參數(shù)做主要的講解:
在開發(fā)過程中,有4個(gè)非常重要的參數(shù):一個(gè)是appid,AppSecret,apikey和商戶號(hào)。上面js中的appID就是其中之一。timeStamp是一個(gè)時(shí)間戳,10位數(shù),nonceStr是隨機(jī)數(shù),32位以內(nèi),這里最重要的兩個(gè)參數(shù),也是最容易出錯(cuò)的就是package和paySign了。我一一說來。先說package,這里需要用到prepay_id,這個(gè)參數(shù)是微信生成的訂單號(hào),需要我們調(diào)用統(tǒng)一訂單接口來獲取。官方文檔:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1??梢詮奈臋n看到,要獲取prepay_id,需要很多參數(shù),這里面有一個(gè)非常重要的參數(shù)就是簽名。注意:這里的簽名和JS中的支付簽名和不同的。 簽名的算法文檔里有,我只是強(qiáng)調(diào)兩點(diǎn)。一個(gè)是參數(shù)的順序,一定一定要按照ASCII從小到大拼接,二是apikey一定不能錯(cuò),這個(gè)apikey在哪里呢?登入商戶平臺(tái)就可以設(shè)置了。
拼接好簽名需要的字符串后,進(jìn)行MD5加密就可以得到簽名了。然后把簽名和前面所有的參數(shù)組合成xml格式的字符串,調(diào)用給的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一個(gè)xml結(jié)果,解析出其中的prepay_id,這樣這個(gè)參數(shù)就成功獲取到了。
下面再說JS中的最后一個(gè)參數(shù)PaySign:支付簽名。支付簽名的算法也是一樣,把JS中的其他5個(gè)參數(shù)按照順序拼接,加上apikey,MD5加密,ok。
簽名的算法都是一樣的,只是參數(shù)值不同而已。這里需要注意一點(diǎn)。在支付簽名的時(shí)候,用到隨機(jī)數(shù)nonceStr,時(shí)間戳timeStamp,而簽名時(shí)使用的這兩個(gè)參數(shù)和JS中的這兩個(gè)參數(shù)的值要是一樣的,是同一個(gè)隨機(jī)數(shù),同一個(gè)時(shí)間戳。為什么呢?雖然文檔沒說,但是我的理解是:支付簽名是通過隨機(jī)數(shù)和時(shí)間戳來生成的,然后在支付的時(shí)候,把隨機(jī)數(shù),時(shí)間戳,支付簽名一起發(fā)送過去,那么在微信進(jìn)行驗(yàn)證的時(shí)候,也會(huì)根基js中的隨機(jī)數(shù)和時(shí)間戳生成簽名和你發(fā)送的支付簽名進(jìn)行比較,如果你在js中重新獲取新的隨機(jī)數(shù)、時(shí)間戳,那么算出來的簽名和你發(fā)送的簽名就會(huì)不一樣,就會(huì)報(bào)錯(cuò):簽名失敗。
到此,代碼層面的注意點(diǎn)就這些,當(dāng)然,還有其他的一些注意點(diǎn)。比如其中有用的openid,這個(gè)參數(shù)也是需要調(diào)用接口獲取到的,還有支付授權(quán)的目錄是否配置正確。
最后一句總結(jié):仔細(xì)看文檔,最后問別人,可以找微信支付相關(guān)的群,里面很多大神的,我之前就是遇到一個(gè)問題糾結(jié)了2天沒解決,(有時(shí)候光看文檔也不行),
然后怒加了8個(gè)微信開發(fā)的群,最終在高人的指點(diǎn)下終于搞出來了。再次表示感謝。程序員是一個(gè)熱愛分享的群體,他們非常樂意把自己知道的東西分享出去。所以不懂的時(shí)候,多問問。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02javascript模擬枚舉的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript模擬枚舉的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03javascript動(dòng)態(tài)控制服務(wù)器控件實(shí)例
在頁面中放入一個(gè)DropDownList控件,并添加一項(xiàng),用來分析其產(chǎn)生的HTML代碼,這樣在使用js進(jìn)行動(dòng)態(tài)控制時(shí),將會(huì)非常清晰2014-09-09js獲取url中的參數(shù)且參數(shù)為中文時(shí)通過js解碼
這篇文章主要介紹了url中傳遞中文參數(shù)的時(shí)候通過js解碼,需要的朋友可以參考下2014-03-03JS使用隊(duì)列對(duì)數(shù)組排列,基數(shù)排序算法示例
這篇文章主要介紹了JS使用隊(duì)列對(duì)數(shù)組排列,基數(shù)排序算法,涉及javascript隊(duì)列的定義、使用,基數(shù)排序?qū)崿F(xiàn)方法等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03JavaScript正則表達(dá)式匹配 div style標(biāo)簽
這篇文章主要介紹了JavaScript正則表達(dá)式匹配<div><style>標(biāo)簽 的相關(guān)資料,需要的朋友可以參考下2016-03-03prototype與__proto__區(qū)別詳細(xì)介紹
這篇文章主要介紹了prototype與__proto__區(qū)別詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2017-01-01BootStrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstrap的select2既可以查詢又可以輸入的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02