1. 程式人生 > >微信JS支付程式碼_前端呼叫微信支付介面

微信JS支付程式碼_前端呼叫微信支付介面

轉自:http://dditblog.com/itshare_553.html

跟大家分享一段微信支付的js程式碼片段、V3版的微信支付沒有paySignKey引數、基本上是直接複製就可以使用了、改一改自己的引數就好了、話不多說、直接上程式碼

 

支付按鈕的點選事件

複製程式碼

$(´.Save_Patient_Msg´).click(function(){
    $(´.Save_Patient_Msg´).off(´click´);
    var hrdfId = getOrderId();
    var txnAmt = $(´.sum_pay.font-red´).html(); 
     
    var data = {orderId: hrdfId, txnAmt: "0.01", 
        prodDesc: "遠端診斷服務", callType: "JSAPI",
        access_token: getUrlParam("access_token")
    };

    $.ajax({
        type: ´POST´,
        url: ´/hims/api/commonPay/queryTransNo?access_token=´ getUrlParam(´access_token´),
        dataType:´json´,
        contentType:´application/json´,
        data: JSON.stringify(data),
        success: function(Wxres){
          if(!Wxres){
            $.alert(´伺服器擁堵,請稍後訪問´)
          }else{
              console.log(Wxres);
              if(Wxres.data.respCode == ´fail´){
                $.alert(Wxres.data.respMsg);
              }else{
                 //10 微信支付介面
                    // 10.1 發起一個支付請求
                    // 注意:此 Demo 使用 2.7 版本支付介面實現,建議使用此介面時參考微信支付相關最新文件。
                    var param = Wxres.data;
                    wx.config({
                        debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
                        appId: ´wx403ead26691402fb´, // 必填,公眾號的唯一標識
                        timestamp: param.timestamp, // 必填,生成簽名的時間戳
                        nonceStr: param.noncestr, // 必填,生成簽名的隨機串
                        signature: param.signJs,// 必填,呼叫js簽名,
                        jsApiList: [´chooseWXPay´] // 必填,需要使用的JS介面列表,這裡只寫支付的
                    });
                    wx.chooseWXPay({
                        timestamp: param.timestamp, // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
                        nonceStr: param.noncestr, // 支付簽名隨機串,不長於 32 位
                        package: "prepay_id=" param.transNo, // 統一支付介面返回的prepay_id引數值,提交格式如:prepay_id=***)
                        signType: "MD5", // 簽名方式,預設為´SHA1´,使用新版支付需傳入´MD5´
                        paySign: param.sign, // 支付簽名
                        success: function (res) {
                            if(res.errMsg == "chooseWXPay:ok"){
                                //alert("支付成功");
                                window.location.href  = "/hims/weixin/pages/Order_ok.html?access_token=" getUrlParam("access_token");
                            }else{
                                alert(res.errMsg);
                            }
                        },
                        cancel: function(res){
                            //alert(´取消支付´);
                        }
                    });
                }
            }   
        },
        error:function(data){
            var msg =  data.message || data.status;
            $.alert(´伺服器錯誤´ msg);
        }
    });   
    return false;
});

複製程式碼

獲取url程式碼

複製程式碼

function getUrlParam(name){
    //構造一個含有目標引數的正則表示式物件
    var reg = new RegExp("(^|&)"  name  "=([^&]*)(&|$)");
    //匹配目標引數
    var r = window.location.search.substr(1).match(reg);
    //返回引數值
    if (r!=null) return unescape(r[2]); return null;
} 

複製程式碼

流程

步驟1:使用者在商戶APP中選擇商品,提交訂單,選擇微信支付。 
步驟2:商戶後臺收到使用者支付單,呼叫微信支付統一下單介面。參見

【統一下單API】。 
步驟3:統一下單介面返回正常的prepay_id,再按簽名規範重新生成簽名後,將資料傳輸給APP。參與簽名的欄位名為appid,partnerid,prepayid,noncestr,timestamp,package。注意:package的值格式為Sign=WXPay 
步驟4:商戶APP調起微信支付。api參見本章節【app端開發步驟說明】 
步驟5:商戶後臺接收支付通知。api參見【支付結果通知API】 
步驟6:商戶後臺查詢支付結果。api參見【查詢訂單API】