歡迎您光臨本站 註冊首頁

Vue項目接入Paypal實現示例詳解

←手機掃碼閱讀     bom485332 @ 2020-06-08 , reply:0

一、支付流程
 

在paypal的官網上給出了這個按鈕內部封裝的流程,整個流程只需要用戶點擊按鈕,觸發創建訂單事件,然後我們再監聽用戶支付成功的回調,拿到訂單id傳給後端,讓後端再進行一次校驗。

二、實現方案

接入方式優點缺點相關資料
在html中插入paypal的script腳本實現方式比較簡單1、安全性問題:公司的client_id會暴露在代碼中
       2、引用的按鈕樣式比較難自定義
官方文檔:https://developer.paypal.com/docs/checkout/integrate/#
       更詳細的說明:https://www.jb51.net/article/188049.htm
使用官方提供的npm包(有好幾個)1、可以自定義,不需要使用官方給定的button,可以在自己的按鈕上綁定創建事件
       2、不會把client_id暴露出來
1、需要仔細閱讀文檔,開發難度會大一點
       2、有的需要配合node一起開發
github:https://github.com/paypal/paypal-checkout-components
       node-sdk:https://github.com/paypal/Pay...
使用別人封裝好的npm包1、使用起來方便
       2、文檔比較清晰
1、可能存在沒人維護的風險
       2、可自定義的部分不多
       3、使用的是Paypalv1版接口,官網上用的是v2接口,但是應該不影響
github:https://github.com/khoanguyen96/vue-paypal-checkout

這是我目前總結的幾種實現方案,如果有更好的方案,歡迎在評論區告訴我~

三、項目中實現
 

由於我是在vue項目實現,經過考慮,別人封裝的vue-paypal-checkout庫可以滿足開發需求,而且使用起來比較簡單,所以暫時選擇採取這個方案,接下來我們看看代碼實現吧!

  npm install vue-paypal-checkout

 

  import PayPal from 'vue-paypal-checkout'    export default {   data() {    return {     credentials: {      sandbox: '填寫沙箱環境client_id',      production: '填寫線上環境client_id'     },          buttonStyle: {      label: 'pay',      size: 'small',      shape: 'rect',      color: 'blue'     }    }   },   components: {    PayPal   },      methods: {    paymentAuthorized (data) {     // 授權完成的回調,可以拿到訂單id     console.log(data);    },      paymentCompleted (data) {     // 用戶支付完成的回調,可以拿到訂單id     console.log(data);    },      paymentCancelled (data) {     // 用戶取消交易的回調     console.log(data);    }   }  }

 

  

 

以上就是我的代碼實現過程,具體內容可以根據業務來修改,實現起來還是蠻簡單的,如果只是想嵌入Paypal的按鈕,完成基本的支付操作,這個還是完全可以支持的。

四、Paypal沙箱環境賬戶申請流程
 

註冊Paypal線上賬戶
 

(1)瀏覽器打開https://www.paypal.com/

(2)註冊一個賬號,個人和企業都行。推薦註冊個人賬戶,比企業賬戶要填的信息少,功能差別不大

(3)填寫相關信息,銀行卡號暫時可以先不填,創建完成後就可以看到這個頁面,沙箱環境和這個頁面長得很像,可以通過網頁地址進行區分

註冊Paypal開發者賬號
 

(1)瀏覽器打開https://developer.paypal.com/ ,用剛剛創建的線上賬戶登錄一下(如果時間隔得很近,會默認登錄),紅色框中是後面會重點用到的內容

(2)進入Accounts頁面,創建沙箱測試賬戶,默認會創建兩個賬戶(1個企業賬戶,1個個人賬戶),我們也可以自己創建,最多可以創建5個

登錄沙箱環境
 

(1)用測試賬號登錄https://www.sandbox.paypal.com ,使用開發者環境的測試賬號登錄

(2)用紅框中的賬號和密碼登錄沙箱環境,就可以看到一個和線上類似的頁面,初始資金默認為$5000,可以自行修改

(3)在開發環境下的My Apps & Credentials頁面下創建應用,拿到Client ID和Secret去請求Access token

(4)拿Client ID和Secret去請求Access token

頁面操作按鈕進行測試
 

(1)登錄剛剛沙盒環境的另外一個測試賬戶

(2)付款成功後,付款頁面會自動關閉,可以去沙盒環境看一下扣款記錄

五、總結
 

雖然我這裡給了很詳細的流程,但看官方文檔還是必要的,Paypal的文檔挺詳細的,只是全英文看起來可能比較有壓力,耐心一點會發現還是不錯的。說明一點,如果在創建賬號的時候有和我不一樣的情況,不用驚訝,因為Paypal就是這樣神祕的,哈哈哈!


                                                     

   


[bom485332 ] Vue項目接入Paypal實現示例詳解已經有423次圍觀

http://coctec.com/docs/vue-js/show-post-237517.html