H5中的微信支付、支付寶支付

微信支付的申請：

    公眾號支付、掃碼支付等在微信公眾平台。移動端的申請在微信開放平台

    公眾號支付流程：申請微信公眾號（服務號並完成微信認證）——申請微信支付商戶號（申請微信支付，資料審核通過以后，請前往商戶平台的賬號驗證）——在線簽署協議（開啟資金結算功能）

    掃碼支付流程：申請微信公眾號（服務號並完成微信認證）——申請微信支付商戶號（申請微信支付，資料審核通過以后，請前往商戶平台的賬號驗證）——在線簽署協議（開啟資金結算功能）

配置：（https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3）

1）設置支付目錄

  

2）設置授權域名

開發公眾號支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則需要您在公眾平台設置獲取openid的域名，只有被設置過的域名才是一個有效的獲取openid的域名，否則將獲取失敗

 

3）喚起支付

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"wx2421b1c4370ec43b",     //公眾號名稱，由商戶傳入     
           "timeStamp":"1395712654",         //時間戳，自1970年以來的秒數     
           "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
           "package":"prepay_id=u802345jgfjsdfgsdg888",     
           "signType":"MD5",         //微信簽名方式：     
           "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
       },
       function(res){     
           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();
}

　

表7.1 網頁端接口參數列表

名稱	變量名	必填	類型	示例值	描述
公眾號id	appId	是	String(16)	wx8888888888888888	商戶注冊具有支付權限的公眾號成功后即可獲得
時間戳	timeStamp	是	String(32)	1414561699	當前的時間，其他詳見時間戳規則
隨機字符串	nonceStr	是	String(32)	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	隨機字符串，不長於32位。推薦隨機數生成算法
訂單詳情擴展字符串	package	是	String(128)	prepay_id=123456789	統一下單接口返回的prepay_id參數值，提交格式如：prepay_id=***
簽名方式	signType	是	String(32)	MD5	簽名算法，暫支持MD5
簽名	paySign	是	String(64)	C380BEC2BFD727A4B6845133519F3AD6	簽名，詳見簽名生成算法

表7.2 網頁內支付接口err_msg返回結果值說明

返回值	描述
get_brand_wcpay_request:ok	支付成功
get_brand_wcpay_request:cancel	支付過程中用戶取消
get_brand_wcpay_request:fail	支付失敗

　

注：JS API的返回結果get_brand_wcpay_request:ok僅在用戶成功完成支付時返回。由於前端交互復雜，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以統一處理為用戶遇到錯誤或者主動放棄，不必細化區分。

一、微信支付

掃碼支付（通過訂單號，請求接口，后台會返回一個codeURL,通過codeURL繪成二維碼，用戶通過掃碼支付）

<div id="code"></div>

 

$(document).ready(function(){
            var options={};
            options.url=codeUrl; //二維碼的鏈接
            options.dom="#code";//二維碼生成的位置
            options.image=$('#img-buffer');//圖片id
           // options.render="canvas";//設置生成的二維碼是canvas格式，也有image、div格式
            options.render="image";//設置生成的二維碼是canvas格式，也有image、div格式
            xyqrcode(options);
        });

　　

//生成微信二維碼
function xyqrcode(options) {
    var settings = {
        dom:'',
        render: 'canvas',   //生成二維碼的格式還有image、div
        ecLevel:"H",
        text:"",
        background:"#ffffff",
        fill:"#333333", //二維碼紋路的顏色
        fontcolor:"#ff9818",
        fontname:"Ubuntu",
        image:{},
        label:"",
        mPosX:0.5,   //圖片在X軸的位置
        mPosY:0.5,    //圖片在X軸的位置
        mSize:0.27,   //圖片大小
        minVersion:10,
        mode:4,
        quiet:1,
        radius:1,
        size:400
    };
    if (options) {
        $.extend(settings, options);//options對象跟settings比較，相同的就替換，沒有的就添加

    }
    if(settings.dom.length==0){
        window.console.log("Error: dom empty!");
        return;
    }
    if(settings.url.length==0){
        window.console.log("Error: url empty!");
        return;
    }
    settings.text=settings.url; //在qrcode生成二維碼的地址是text。這里就把url賦值給text
    $(settings.dom).qrcode(settings);

}

　　

　掃碼支付

   

var redirect_uri=encodeURI('http://hd.fashionyuan.com/V1/pay/index.html?orderID='+orderID);

 

 window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx45fc30c3eb7a9ed8&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
// window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx45fc30c3eb7a9ed8&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";

　

 //微信瀏覽器支付
     if(code){
         $.ajax({
             type: 'GET',
             url: preURL + 'Pay/GetWXPayInfo?orderID='+orderID+"&type=2&code="+code,
             headers: headers,
             data:"",
             dataType: 'json',
             success: function (data){
                 $(".loading").css("display","none");
                 var _data=data.data;

                 function onBridgeReady(){
                     WeixinJSBridge.invoke(
                             'getBrandWCPayRequest', {
                                 "appId":_data.appId,     //公眾號名稱，由商戶傳入
                                 "timeStamp":_data.timestamp,         //時間戳，自1970年以來的秒數
                                 "nonceStr":_data.nonceStr, //隨機串
                                 "package":_data.package,
                                 "signType":"MD5",         //微信簽名方式：
                                 "paySign":_data.paySign //微信簽名
                             },
                             function(res){
                                 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();
                 }

             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                 console.log(XMLHttpRequest.status);
                 console.log(XMLHttpRequest.readyState);
                 console.log(textStatus);
             }

         })
     }

　　

支付寶支付

 var zfbURL=preURL + 'Pay/GetAliPayInfo?orderID='+orderID+"&usageScenarioEnum="+usageScenarioEnum;
 window.location.href=zfbURL;