vue 支付

 

支付寶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)就是在前臺支付完成的跳轉結果通知頁面。