vue2.0與支付個人總結

sherlock221 發布于2019-08-20 18:10 / 735人閱讀

摘要：最近在使用寫，中要求可以實現線上支付，研究了微信支付與支付寶支付。其實支付寶的支付原理很簡單，無論是支付還是原生支付前臺只需要使用服務器返回的數據調起支付就可以了。

最近在使用vue寫webapp，app中要求可以實現線上支付，研究了微信H5支付與支付寶H5支付。其中微信H5支付處在內測階段，需要申請，按照格式寫了郵件七個工作日也沒得到回復郵件，據說微信H5支付對于單量和交易額有要求，滿足要求后才有很大幾率開通。支付寶H5支付相對申請較為簡單，人工技術客服強大，基本能解決很多問題，不得不說這點還是阿里的產品更好，所以下面主要聊聊我所知道和遇見的支付寶H5支付的相關問題。

其實支付寶的支付原理很簡單，無論是H5支付還是原生APP支付,前臺只需要使用服務器返回的數據調起支付就可以了。

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

讓我最困擾最耽誤時間的就是在使用返回的form數據
基本形式：

....

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

GPU云服務器云服務器 vue2.0 cdn 個人總結 api個人支付接口個人支付收款api接口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84162.html

第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

seanHai 2019-08-22 13:58 評論0 收藏0
第三方庫

摘要：微信支付，支付寶支付，銀聯支付三大支付總結支付寶植入總結支付寶的植基于和百度地圖的組件庫基于百度地圖封裝的組件庫，使用這個庫最好需要先了解和百度地圖。 Commento - 多說 & Disqus 開源替代品 Commento - 多說 & Disqus 開源替代品 anime.js 簡單入門教程強大輕量的動畫庫 anime.js 入門教程來自B站的開源的MagicaSakura源...

gityuan 2019-08-29 14:17 評論0 收藏0
使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

afishhhhh 2019-06-27 16:36 評論0 收藏0
使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

Taonce 2019-08-20 16:49 評論0 收藏0