Vue專案接入Paypal實現示例詳解
一、支付流程
在paypal的官網上給出了這個按鈕內部封裝的流程，整個流程只需要使用者點選按鈕，觸發建立訂單事件，然後我們再監聽使用者支付成功的回撥，拿到訂單id傳給後端，讓後端再進行一次校驗。
二、實現方案
| 接入方式 | 優點 | 缺點 | 相關資料 |
|---|---|---|---|
| 在html中插入paypal的script指令碼 | 實現方式比較簡單 | 1、安全性問題：公司的client_id會暴露在程式碼中 2、引用的按鈕樣式比較難自定義 |
官方文件：https://developer.paypal.com/docs/checkout/integrate/# |
| 使用官方提供的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 amount="10.00" // 付款的錢數 currency="USD" // 貨幣種類，預設為美元 :client="credentials" // client_id認證資訊 env="sandbox" // 指定環境，預設為線上，也就是production :button-style="buttonStyle" // 自定義按鈕樣式 @payment-authorized="paymentAuthorized" @payment-completed="paymentCompleted" @payment-cancelled="paymentCancelled" > </PayPal>
以上就是我的程式碼實現過程，具體內容可以根據業務來修改，實現起來還是蠻簡單的，如果只是想嵌入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就是這樣神祕的，哈哈哈！
到此這篇關於Vue專案接入Paypal實現示例詳解的文章就介紹到這了,更多相關Vue接入Paypal內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！