【zhifu】web開發中的支付寶支付和微信支付

一、支付類型：

支付寶支付：
　　　　支付寶app內的網頁支付；
　　　　app外(即普通瀏覽器)網頁支付；
微信支付：
　　　　微信app內的支付(在這里叫公眾號支付)
　　　　app外的支付(微信H5支付)；
　　　　微信公眾號的支付寶支付；

二、微信內支付

微信瀏覽器內調起微信支付也就是微信公眾號支付
有2種實現方式

1.使用微信的內置js對象 WeixinJSBridge(本人使用的此方法)交易類型：jsapi

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();
}

封裝

//微信瀏覽器支付
function wxpay(params,callback){
  if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
         document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
     }else if (document.attachEvent){
         document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); 
         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
     }
  }else{
     onBridgeReady(params,callback);
  } 
}

function onBridgeReady(params,callback){
    var that = this
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":params.appId,          
           "timeStamp":params.timeStamp,         
           "nonceStr":params.nonceStr, 
           "package":params.package,     
           "signType":params.signType, 
           "paySign":params.paySign 
       },
       function(res){  
          callback(res)
       }
   ); 
  }

2.引入微信jssdk調用里面的內置方法發起支付

2-1.在入口引入jssdk文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>

2-2.引入jssdk文件后權限驗證

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，企業號的唯一標識，此處填寫企業號corpid
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

2-3.通過相應的api驗證權限是否注入成功

wx.ready(function(){
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，
    所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

 2-4.驗證成功后jssdk里面的API接口就能夠調用了，里面有支付相關的接口

wx.chooseWXPay({  
    appId: 'wx23841cce7185b550',  
    timestamp: '1461300911', // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符  
    nonceStr: '5719aeafb587f', // 支付簽名隨機串，不長於 32 位  
    package: 'prepay_id=wx20160422125512b7d2205c9c0913643939', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）  
    signType: 'MD5', // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'  
    paySign: '5DAB1DDABE1AD34E8FF3386AE971B727', // 支付簽名  
    success: function(res) {  
        // 支付成功后的回調函數  
        if (res.errMsg == "chooseWXPay:ok") {  
            //支付成功  
            alert('支付成功');  
        } else {  
            alert(res.errMsg);  
        }  
     },  
    cancel: function(res) {  
        //支付取消  
        alert('支付取消');  
        }  
    });  

                    

3.判斷微信環境

3-1 是否為微信瀏覽器

原理：判斷 ua 中是否有字段 “micromessenger"

代碼

var userAgent = navigator.userAgent.toLowerCase();
var isWechat = userAgent.match(/micromessenger/i) == "micromessenger";

或者

function isWechat () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.indexOf('micromessenger') > -1) {
    return true
  }
  return false
}

3-2 判斷是否是微信的PC端

var userAgent = navigator.userAgent.toLowerCase();
var isWechat = userAgent.match(/micromessenger/i) == "micromessenger";
var isWindowsWechat = isWechat && userAgent.match(/windows/i) == "windows";

三 、微信h5支付(交易類型mweb)

前端只需拿到后台返回的mweb_url后進行跳轉

效果圖：

https://www.cnblogs.com/websmile/p/11165144.html

 四、PC端微信支付(交易類型native)

1、前端只需展示后台返回的支付二維碼
2、定時的去查詢訂單接口 支付成功后頁面跳轉或者其他操作

 案例1:唯品會

 

 

 案例2：京東支付

 

 

 

五、pc端支付寶支付

后台會返回一個form表單  前端在窗口打開就行（使用的document.write(‘form表單’)）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 或者（建議使用）

const div = document.createElement('div');
div.innerHTML = (results.data[0]);  //res.data是返回的表單
document.body.appendChild(div);;
document.forms.alipaysubmit.submit();

 

效果：

 

六、支付寶內支付

http://myjsapi.alipay.com/jsapi/index.html

 七、微信公眾號的支付寶支付

https://www.jianshu.com/p/9e8dba48b628

 八、支付寶手機網站支付

 

 相關資料：

• https://docs.open.alipay.com/
• http://myjsapi.alipay.com/jsapi/index.html
• https://www.jianshu.com/p/155757d2b9eb
• https://github.com/zxlie/WeixinApi