JS微信支付功能實現總結

1.用戶同意授權,獲取code。用戶授權有兩種scope,以下采用snsapi_base靜默授權並自動跳轉到回調頁。另外一種scope有興趣可以根據API自行設置

訪問地址:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=(公衆號的appid)&redirect_uri=(回調的網址)&response_type=code&scope=snsapi_base&state=(隨意設置)#wechat_redirect

參數說明:
appid                公衆號的appid
                    (登錄公衆平臺  →  開發   →  基本配置  →  appid)
redirect_uri         爲回調的網址,則當用戶同意授權後會自動跳轉到的目標網址。
response_type        默認code不需要修改  
scope                授權方式,此處使用snsapi_base
state                隨意設置

回調的網址需要在公衆平臺上設置授權回調頁面域名,否則會出現redirect_uri 參數錯誤。
公衆平臺上設置授權回調頁面域名步驟如下:
 1)登錄公衆平臺 https://mp.weixin.qq.com/ 
 2)開發    →    接口權限    →    網頁服務    →    網頁賬號    →    網頁授權獲取用戶基本信息    →    修改

成功訪問上述鏈接後,頁面將會跳轉到redirect_uri指定的鏈接,並傳遞一個code參數,於是我們在回調後的邏輯裏需要接收code參數的值。

2.獲取openid

訪問地址:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=(公衆號的appid)&secret=(公衆號的appid下方的密鑰)&code=(回調後獲得的code)&grant_type=authorization_code

參數說明:
appid                公衆號的appid
secret               公衆號的appid下發的密鑰
code                 步驟1成功回調後獲得的code
grant_type           默認authorization_code

成功執行步驟2後將會獲得一個json數組,openid包含其中,需要我們自行解析獲取openid。

3.統一下單獲取prepay_id

URL地址:
https://api.mch.weixin.qq.com/pay/unifiedorder

參數說明:
appid               公衆號的appid
body                彈出支付窗口時的提示內容
mch_id              微信支付分配的商戶號
                   (登錄公衆平臺  →  微信支付   →  基本信息  → 商戶號 )
nonce_str           隨機字符串
notify_url          接收微信支付異步通知回調地址,通知url必須爲直接可訪問的url,
                    不能攜帶參數。 
openid              步驟2獲取的openid
out_trade_no        商戶系統內部的訂單號,可自定義
spbill_create_ip    用戶端實際ip
total_fee           訂單總金額,單位爲分
trade_type          支付類型,此處爲JSAPI
key                 微信商戶平臺(pay.weixin.qq.com) → 賬戶設置 → API安全
                     → 密鑰設置

sign                MD5加密上述參數

如:
    String sintrt = "appid=yourappid"+
                    "&body=yourbody"+
                    "&mch_id=yourmch_id"+
                    "&nonce_str=yournonceStr"+
                    "&notify_url=yournotify_url"+
                    "&openid=youropenid"+
                    "&out_trade_no=yourout_trade_no"+
                    "&spbill_create_ip=yourip"+
                    "&total_fee=yourtotal_fee"+
                    "&trade_type=JSAPI"+
                    "&key=yourkey";
    String sign = MD5.getMD5(sintrt).toUpperCase();


以XML的方式封裝以上參數,格式如下
<xml>
    <appid>appid</appid>
    <body>body</body>
    <mch_id>mch_id</mch_id>
    <nonce_str>nonceStr</nonce_str>
    <notify_url>notify_url</notify_url>
    <openid>openid</openid>"+
    <out_trade_no>out_trade_no</out_trade_no>"+
    <spbill_create_ip>spbill_create_ip</spbill_create_ip>"+
    <total_fee>total_fee</total_fee>
    <trade_type>JSAPI</trade_type>
    <sign>sign</sign>
</xml>  

以XML的方式訪問統一下單的URL地址獲取解析返回的數據,獲取prepay_id

4.網頁端調用js完成支付

WeixinJSBridge.invoke(
        'getBrandWCPayRequest', 
        {
        "appId":"appId",       
        "timeStamp":timestamp,         //時間戳,自1970年以來的秒數     
        "nonceStr":nonceStr,           //隨機串     
        "package":prepay_id            //步驟3獲取的prepay_id,     
        "signType":"MD5",              //微信簽名方式:     
        "paySign":sign                 //微信簽名 
        },
        function(res){     
             if(res.err_msg.indexOf("ok") > 0){
                     alert("支付完成!");
             }else{ 
                 alert(res.err_msg);
             }                       
        }
); 

參數說明:
appid               公衆號的appid
timeStamp           時間戳
nonceStr            隨機字符串
prepay_id           步驟3獲取的prepay_id
signType            默認MD5
paySign             參數簽名

簽名參考如下
var stringSignTemp="appId=wxd0030975ff3fb970"+
                    "&nonceStr="+nonceStr+
                    "&package=prepay_id="+prepay_id+
                    "&signType=MD5"+
                    "&timeStamp="+timestamp+
                    "&key=3d3d43eff711172a774101a26ae1b16b";
    //key微信商戶平臺(pay.weixin.qq.com) → 賬戶設置 → API安全→ 密鑰設置

var sign =hex_md5(stringSignTemp).toUpperCase();
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章