vue2.0與支付我的總結

最近在使用vue寫webapp，app中要求能夠實現線上支付，研究了微信H5支付與支付寶H5支付。其中微信H5支付處在內測階段，須要申請，按照格式寫了郵件七個工做日也沒獲得回覆郵件，聽說微信H5支付對於單量和交易額有要求，知足要求後纔有很大概率開通。支付寶H5支付相對申請較爲簡單，人工技術客服強大，基本能解決不少問題，不得不說這點仍是阿里的產品更好，因此下面主要聊聊我所知道和碰見的支付寶H5支付的相關問題。

其實支付寶的支付原理很簡單，不管是H5支付仍是原生APP支付,前臺只須要使用服務器返回的數據調起支付就能夠了。

支付寶H5支付，基本流程就是在前臺使用服務器提供的接口建立訂單，服務器根據支付寶提供的SDK，進行簽名等一系列操做，具體能夠參見支付寶的官方文檔https://docs.open.alipay.com/203，當服務器完成這些操做後會會返回一個form表單，前臺拿到後家在這個form表單就能夠了。

讓我最困擾最耽誤時間的就是在使用返回的form數據
基本形式：
<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/ga...' method='POST'>
....

在vue中使用form的方式：

netTool.createdOrder(params).then(response => {

if (response.errno === '0') {
        console.log('輸出正確', response);
        this.datadorm = response.result.wappay;

        const div = document.createElement('div');
        div.innerHTML = this.datadorm;
        document.body.appendChild(div);
        document.forms.alipaysubmit.submit();
      } else {
        console.log('傳輸錯誤');
      }
    });

• netTool.createdOrder(params)是用來發送網絡請求

• 在response中接收返回的form表單數據，
  也就是this.datadorm = response.result.wappay進行接收；

• 將返回的表單掛到html上；

最後就是調用執行了，我是在created週期中調用的；

對於支付結果後臺須要與支付寶發起異步通知，而且驗籤，咱們還要在後臺添加一個同步通知(return_url)就是在前臺支付完成的跳轉結果通知頁面。