一、支付流程
在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次圍觀