前端在h5頁面調起微信支付接口和支付寶接口（平常筆記）

微信支付

結合微信支付的api文檔進行配置。參考JSAPI支付開發者文檔——微信內H5調起支付

微信文檔中的例子以下。

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

咱們主要是從後臺中獲取數據傳入onBridgeReady這個方法中。
因此第一步是獲取數據，第二步是把獲取到的數據傳入到onBridgeReady方法
第一步：發送請求獲取後臺數據
1.在對應的api文件下封裝請求（get）

export function wechatPay(type, vid, token, point, discount) {
  let discount_type = discount || null
  return axios.get(`${Host}/api/save_mobile`,{
    params: {
      pay_type: type,
      video_id: vid,
      token,
      point,
      discount_type
    }
  })
}

2.在對應的組件調用請求

<p @click="_wechatPay(paytype, $route.query.video_id, info.token, info.points)" class="submit">發送支付請求</p>

import { wechatPay } from '../../../api/pay.js'

export default {
  name: 'payfooter',
  computed: {
    info() {
      return this.$store.state.user.info
    },
    // 獲取選擇支付的方式
    paytype() {
      return this.$store.state.pay.paytype
    }
  },
  methods: {
    _wechatPay(type, vid, token, point) {
       wechatPay(type, vid, token, point).then(res => {
            console.log(res) // 這個res就是後臺返回的數據
       })
    }
  }
}

3.後臺返回的json格式數據以下（這不是console出來，方便顯示我就直接把json數據複製過來）

{
    "code": 0,
    "data": {
        "appId": "wx5beac*******7c40c",
        "nonceStr": "8491k3******Rs5",
        "package": "prepay_id=wx07**************2653",
        "paySign": "CDE21B*************40C1A",
        "signType": "MD5",
        "timeStamp": "15******1"
    },
    "msg": null
}

第二步：把數據傳給onBridgeReady函數
因此真正須要獲取的內容是 res.data.data，而後再把res.data.data的值傳給onBridgeReady函數
4.從新整理一下代碼就是

methods: {
    _wechatPay(type, vid, token, point) {
       wechatPay(type, vid, token, point).then(res => {
            res = res.data
            if(res.code === 0) {
                this.onBridgeReady(res.data) // 這樣就把res.data傳給onBridgeReady函數
            }
       })
    },
    // 微信支付api相關配置文檔
    onBridgeReady(data) {
      if (typeof WeixinJSBridge === 'undefined') {
        this.$toast({ message: '請使用微信內置瀏覽器進行支付' })
      } else {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: data.appId, // 公衆號名稱，由商戶傳入
            timeStamp: data.timeStamp, // 時間戳，自1970年以來的秒數
            nonceStr: data.nonceStr, // 隨機串
            package: data.package,
            signType: data.signType, // 微信簽名方式：
            paySign: data.paySign // 微信簽名
          },
          res => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$toast({ message: '支付成功' })
              this.$router.push({path: '/videoplayer', query: { video_id: this.$route.query.video_id }}) // 支付成功以後跳轉的路由
            } else {
              this.$toast({ message: '支付失敗' })
            }
          }
        )
      } 
    },
  }

支付寶支付

與微信支付不一樣的是，支付寶支付後臺是返回form格式的數據，以下

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=DEpMkI**********************eWUs6EW3QKlt9OHYv%2FqkporO8Sr5%2Bay5VA9dpx3pAbIiPPajQ2gEcWHvz5bm*******kxH8ZvHUXahQL9S69p9wKNXpXOxYadlsxE8QKGUc4cO5rrgGq08%2BpiOq%2FOz4fLogEBWANXILUMWXNzJn8YryNifZ416Pd%2BxkKgXs%2Fo%2FQDcqEUg*********VXXPRq7IGRGQg%2FpZkOhxCH%2Fq%2B9hnWEncAfQLlAXfPqjdcQTNJ0TJdVr1X1ENOdAr5LQkydWw2EQ8g%3D%3D&return_url=+https%3A%2F%2**********&notify_url=+https%3A%2F%*********Fpub%2Fapi%2Fv1%2F********allback1&version=1.0&app_id=20********57&sign_type=R***&timestamp=2019-0******55&alipay_sdk=al*******.49.ALL&format=json">
    <input type="hidden" name="biz_content" value="{&quot;body&quot;:&quot;&quot;,&quot;enable_pay_channels&quot;:&quot;balance,moneyFund,bankPay,debitCardExpress,creditCardExpress,creditCard,pcredit,pcreditpayInstallment,coupon,point,voucher,mdiscount,honeyPay&quot;,&quot;out_trade_no&quot;:&quot;132ecf937ad84487aa6cbaeb2ec157fe&quot;,&quot;product_code&quot;:&quot;13&quot;,&quot;subject&quot;:&quot;SpringBoot 2.x微信支付在線教育網站項目實戰&quot;,&quot;timeout_express&quot;:&quot;20m&quot;,&quot;total_amount&quot;:&quot;98&quot;}">
    <input type="submit" value="當即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

那麼在處理後臺數據的時候用下面的方法（參考網絡大神）

_wechatPay(type, vid, token, point) {
     wechatPay(type, vid, token, point).then(res => {
        const form = res.data
        const div = document.createElement('div')
        div.id = 'alipay'
        div.innerHTML = form
        document.body.appendChild(div)
        document.querySelector('#alipay').children[0].submit() // 執行後會喚起支付寶
     })
}