公眾號第三方授權 以及微信H5支付（前端）

由於公司業務需要，想用戶通過我們公眾號平台支付的金額直接進去用戶自己的賬戶，所以涉及到公眾號第三方授權；

 

 

由於涉及第三方，故需要在微信開放平台創建第三方平台；

1. 創建第三方平台：(申請頁面鏈接:https://open.weixin.qq.com)

 

 

 

 

 

 

 

 

 

 2，公眾號授權  api地址 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1453779503&token=&lang=zh_CN

授權有兩種方式:：

方式一：授權注冊頁面掃碼授權

方式二：點擊移動端鏈接快速授權

這里講的是方式一掃碼授權,前端方面比較簡單，

第一：通過掉后台接口拿到預授權碼（pre_auth_code）預授權碼是第三方平台方實現授權托管的必備信息

　　預授權碼是需要后台掉微信api去獲取，前端只負責找后台拿就行,這里后台還需要返回回調URL ，下一步需要

第二：拿到預授權后，直接通過預授權碼和第三方appId 也就是我們自己公眾號appid 參數 直接跳轉授權網址：

授權網址為:

　　 https://mp.weixin.qq.com/cgi-bin/componentloginpage?component\_appid=xxxx&pre\_auth\_code=xxxxx&redirect\_uri=xxxx&auth\_type=xxx。

 

this.$api.getPreCode(param).then((res) => {
        if (this.$util.checkCode(this, res)) {
          this.preAuthCode = res.data.preAuthCode;
          this.redirectUri = res.data.redirectUri;
          this.componentAppId=res.data.componentAppId
       　　window.location.href = 'https://mp.weixin.qq.com/cgi-bin/componentloginpage?component_appid='+this.componentAppId+'&pre_auth_code='+this.preAuthCode+'&redirect_uri='+this.redirectUri+'&auth_type=1'
       }
       }).catch((err) => {
         this.$util.showCatchErr(this, err, "預授權碼獲取失敗");
});

 此地址就是掃碼地址，掃碼后會自動提示需不需要授權，授權過程結束。

題外話：如果想要支付金額到用戶自己的賬戶，需要用戶的商戶號，所以也需要提供用戶填寫商戶號信息的頁面；具體看公司業務需求

 

由於公司業務需要，授權完成后，支付方式使用H5支付，以下是H5支付相關內容 ，可忽略。。。

第一：使用H5支付需要先在商戶號開通H5支付，還需要填寫支付域名

 

 

 第二：H5支付

H5支付是指商戶在微信客戶端外的移動端網頁展示商品或服務，用戶在前述頁面確認使用微信支付時，商戶發起本服務呼起微信客戶端進行支付。

主要用於觸屏版的手機瀏覽器請求微信支付的場景。可以方便的從部瀏覽器喚起微信支付。

請求后台統一下單接口，會返回mweb_url 支付跳轉url  ，然后直接頁面跳轉此url 完成支付就行

$.ajax({
            type: 'POST',
            url: window.baseurl+"/property/user/weChatPay/order",
            data: param,//JSON.stringify(param)
            dataType : "json",
            async:false, 
            success: function (res) {
                if(res.msgCode==0){
                    var appId=res.data.appId;
                    var signType=res.data.signType;
                    var package=res.data.package;
                    var timestamp=res.data.timestamp;
                    var nonceStr=res.data.nonceStr;
                    var paySign=res.data.paySign;
                    console.log(res.data.mweb_url)
                    window.location.href=res.data.mweb_url//跳轉微信H5支付頁面
                }else{
                    alert(res.msg)
                }
            }, error: function (res) {
               
            }
        })

 

 

 常見問題

一、回調頁面

假設您通過統一下單接口獲到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

則拼接后的地址為MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

注意：

  1.需對redirect_url進行urlencode處理

  2.由於設置redirect_url后,回跳指定頁面的操作可能發生在：1,微信支付中間頁調起微信收銀台后超過5秒 2,用戶點擊“取消支付“或支付完成后點“完成”按鈕。因此無法保證頁面回跳時，支付流程已結束，所以商戶設置的redirect_url地址不能自動執行查單操作，應讓用戶去點擊按鈕觸發查單操作。回跳頁面展示效果可參考下圖

正常流程用戶支付完成后會返回至發起支付的頁面，如需返回至指定頁面，則可以在MWEB_URL后拼接上redirect_url參數，來指定回調頁面。

如，您希望用戶支付完成后跳轉至https://www.wechatpay.com.cn，則可以做如下處理：