小編這次要給大家分享的是詳解Vue項目接入Paypal實現(xiàn)，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了寧海免費建站歡迎大家使用！
一、支付流程
在paypal的官網(wǎng)上給出了這個按鈕內(nèi)部封裝的流程，整個流程只需要用戶點擊按鈕，觸發(fā)創(chuàng)建訂單事件，然后我們再監(jiān)聽用戶支付成功的回調(diào)，拿到訂單id傳給后端，讓后端再進行一次校驗。
二、實現(xiàn)方案
| 接入方式 | 優(yōu)點 | 缺點 | 相關(guān)資料 |
|---|---|---|---|
| 在html中插入paypal的script腳本 | 實現(xiàn)方式比較簡單 | 1、安全性問題：公司的client_id會暴露在代碼中 2、引用的按鈕樣式比較難自定義 | 官方文檔：https://developer.paypal.com/docs/checkout/integrate/# 更詳細(xì)的說明：https://www.jb51.net/article/188049.htm |
| 使用官方提供的npm包（有好幾個） | 1、可以自定義，不需要使用官方給定的button，可以在自己的按鈕上綁定創(chuàng)建事件 2、不會把client_id暴露出來 | 1、需要仔細(xì)閱讀文檔，開發(fā)難度會大一點 2、有的需要配合node一起開發(fā) | github：https://github.com/paypal/paypal-checkout-components node-sdk：https://github.com/paypal/Pay... |
| 使用別人封裝好的npm包 | 1、使用起來方便 2、文檔比較清晰 | 1、可能存在沒人維護的風(fēng)險 2、可自定義的部分不多 3、使用的是Paypalv1版接口，官網(wǎng)上用的是v2接口，但是應(yīng)該不影響 | github：https://github.com/khoanguyen96/vue-paypal-checkout |
這是我目前總結(jié)的幾種實現(xiàn)方案，如果有更好的方案，歡迎在評論區(qū)告訴我～
三、項目中實現(xiàn)
由于我是在vue項目實現(xiàn)，經(jīng)過考慮，別人封裝的vue-paypal-checkout庫可以滿足開發(fā)需求，而且使用起來比較簡單，所以暫時選擇采取這個方案，接下來我們看看代碼實現(xiàn)吧！
npm install vue-paypal-checkout
重慶分公司
重慶分公司
import PayPal from 'vue-paypal-checkout'
export default {
data() {
return {
credentials: {
sandbox: '填寫沙箱環(huán)境client_id',
production: '填寫線上環(huán)境client_id'
},
buttonStyle: {
label: 'pay',
size: 'small',
shape: 'rect',
color: 'blue'
}
}
},
components: {
PayPal
},
methods: {
paymentAuthorized (data) {
// 授權(quán)完成的回調(diào)，可以拿到訂單id
console.log(data);
},
paymentCompleted (data) {
// 用戶支付完成的回調(diào)，可以拿到訂單id
console.log(data);
},
paymentCancelled (data) {
// 用戶取消交易的回調(diào)
console.log(data);
}
}
}以上就是我的代碼實現(xiàn)過程，具體內(nèi)容可以根據(jù)業(yè)務(wù)來修改，實現(xiàn)起來還是蠻簡單的，如果只是想嵌入Paypal的按鈕，完成基本的支付操作，這個還是完全可以支持的。
四、Paypal沙箱環(huán)境賬戶申請流程
注冊Paypal線上賬戶
（1）瀏覽器打開https://www.paypal.com/
（2）注冊一個賬號，個人和企業(yè)都行。推薦注冊個人賬戶，比企業(yè)賬戶要填的信息少，功能差別不大
（3）填寫相關(guān)信息，銀行卡號暫時可以先不填，創(chuàng)建完成后就可以看到這個頁面，沙箱環(huán)境和這個頁面長得很像，可以通過網(wǎng)頁地址進行區(qū)分
注冊Paypal開發(fā)者賬號
（1）瀏覽器打開https://developer.paypal.com/ ，用剛剛創(chuàng)建的線上賬戶登錄一下（如果時間隔得很近，會默認(rèn)登錄），紅色框中是后面會重點用到的內(nèi)容
（2）進入Accounts頁面，創(chuàng)建沙箱測試賬戶，默認(rèn)會創(chuàng)建兩個賬戶（1個企業(yè)賬戶，1個個人賬戶），我們也可以自己創(chuàng)建，最多可以創(chuàng)建5個
登錄沙箱環(huán)境
（1）用測試賬號登錄https://www.sandbox.paypal.com ，使用開發(fā)者環(huán)境的測試賬號登錄
（2）用紅框中的賬號和密碼登錄沙箱環(huán)境，就可以看到一個和線上類似的頁面，初始資金默認(rèn)為$5000，可以自行修改
（3）在開發(fā)環(huán)境下的My Apps & Credentials頁面下創(chuàng)建應(yīng)用，拿到Client ID和Secret去請求Access token
（4）拿Client ID和Secret去請求Access token
頁面操作按鈕進行測試
（1）登錄剛剛沙盒環(huán)境的另外一個測試賬戶
（2）付款成功后，付款頁面會自動關(guān)閉，可以去沙盒環(huán)境看一下扣款記錄
五、總結(jié)
雖然我這里給了很詳細(xì)的流程，但看官方文檔還是必要的，Paypal的文檔挺詳細(xì)的，只是全英文看起來可能比較有壓力，耐心一點會發(fā)現(xiàn)還是不錯的。說明一點，如果在創(chuàng)建賬號的時候有和我不一樣的情況，不用驚訝，因為Paypal就是這樣神秘的，哈哈哈！
看完這篇關(guān)于詳解Vue項目接入Paypal實現(xiàn)的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。
