微信支付，支付寶支付

老王可喜歡你了發表於2020-12-07

業務場景介紹：

H5移動端支援微信支付 [ 微信支付分為微信內支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付寶支付[手機網站支付轉 APP 支付 官方API ]

訂單生成邏輯：前端請求後端提交訂單，後端去和微信或者支付寶對接生成訂單（後續支付都是這個邏輯進行的對接

移動端微信支付

在移動端微信支付分為微信內支付和微信外支付。
1.在訂單元件中選擇支付方式之後在支付頁面先去判斷是否是在微信內：

//判斷是否微信
        is_weixn(){
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

2.觸發立即支付方法，根據微信內外的不同請求後端不同的介面，如果是微信外支付非常簡單了~
3.【微信外支付】下面先看微信外支付，官方文件也寫的很清楚，後端返回一個url地址，前端的工作就是拿到這個url地址進行跳轉就可以了，看一下2-3步程式碼：

 handelPay() {
          if
          (this.wechatpayType == 'wxpay'){
           // console.log("微信內支付")
            let data={
              amount:this.number,
            }
            this.$http.insideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                this.weChatParameter=res.data.data
               // console.log(this.weChatParameter,"微信內支付需要引數")
                this.weixinPay()
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          } else if(this.wechatpayType == 'wxpay_php'){
           // console.log("微信外支付")
            let data={
              amount:this.number,
            }
            this.$http.outsideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                let url=res.data.data
                window.location.replace(url)   //這裡是後端返回的URL直接進行跳轉即可完成微信外支付
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          }
        },

4.在調起支付的頁面監聽從其他頁面返回的事件，進行一些重新整理業務邏輯的實現即可，至此微信外支付已經完成。

document.addEventListener("visibilitychange", function() {
    //需要的操作
});

5.【微信內支付】微信內支付比起微信外支付稍微複雜一點，但是也不難，（3步驟程式碼裡面已經請求支付方式介面拿到了微信內支付所需要的引數）根據官方API
微信內建js物件 WeixinJSBridge，進行開發，至此微信瀏覽器內支付已經完成

		 //解決微信內建物件報錯
        weixinPay(data){
          var vm= this;
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
              document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
            }
          }else{
            vm.onBridgeReady();
          }
        },
        //微信內建瀏覽器類，weChatParameter物件中的引數是3.步驟程式碼中從後端獲取的資料
        onBridgeReady(){
          var  vm = this;
          var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              debug:true,
              "appId":vm.weChatParameter.appId,     //公眾號名稱，由商戶傳入
              "timeStamp":timestamp, //時間戳，自1970年以來的秒數
              "nonceStr":vm.weChatParameter.nonceStr, //隨機串
              "package":vm.weChatParameter.package,
              "signType":vm.weChatParameter.signType, //微信簽名方式：
              "paySign":vm.weChatParameter.paySign, //微信簽名
              jsApiList: [
                'chooseWXPay'
              ]
            },
            function(res){
              // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在使用者支付成功後返回ok，但並不保證它絕對可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                Toast({
                  message: '支付成功',
                  position: 'middle',
                  duration: 3000
                });
                vm.number=null
                vm.$router.go(-1)
                //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
              }else{
                Toast({
                  message: '支付失敗',
                  position: 'middle',
                  duration: 3000
                });
              }
            }
          );
        },

6.微信內部瀏覽器支付也可以封裝一下，在全域性都可以直接呼叫：


//微信瀏覽器支付
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)
       }
   ); 
  }

7.元件中呼叫微信支付：

this.commonUtils.wxpay(res.data.data,function(payResult){
 	if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
			//執行
     	} 
})

移動端支付寶支付

支付寶支付也有H5支付和支付寶瀏覽器支付，這裡只做H5支付，因為已經滿足了業務需求。

1.支付寶中的H5支付和PC端的一樣，主要是後端的工作量，後端完成訂單的生成之後返給前端的是form表單，前端只需要負責做頁面的跳轉即可：

	//立即支付按鈕
      onSubmit() {
        if (this.payWay == 1) {
        	//支付寶支付
          	this.$router.push({path: '/aliPay', query: {orderId: this.orderId}});
        } else if (this.payWay == 2) {
         //微信支付，這裡跳轉到本文的微信支付模組的3.步驟handelPay方法
        }
      },

2.選擇支付寶方式之後進入支付寶承載頁面：

<template>
  <div v-html="html"></div>
</template>
<script>
    export default {
      data(){
        return{
          html:''
        }
      },
      methods:{
        fetchVideoPay(){
          let param={
            orderId: this.$route.query.orderId
          };
          this.$api.orderpage.videoAliPay(param).then( res => {
            this.html = res.data;
            this.$nextTick(() => {
              document.forms[0].submit()   //渲染支付寶支付頁面
            })
          })
        }
      },
      mounted(){
        this.fetchVideoPay()
      }
    }
</script>

當然不想寫承載頁的還有其他方法調起支付，具體邏輯具體分析，根據不同的業務型別去變通比如：

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

相關文章