一、支付流程

在paypal的官網(wǎng)上給出了這個按鈕內(nèi)部封裝的流程，整個流程只需要用戶點擊按鈕，觸發(fā)創(chuàng)建訂單事件，然后我們再監(jiān)聽用戶支付成功的回調(diào)，拿到訂單id傳給后端，讓后端再進行一次校驗。

二、實現(xiàn)方案

這是我目前總結(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);
  }
 }
}

<PayPal
 amount="10.00" // 付款的錢數(shù)
 currency="USD" // 貨幣種類，默認(rèn)為美元
 :client="credentials" // client_id認(rèn)證信息
 env="sandbox" // 指定環(huán)境，默認(rèn)為線上，也就是production
 :button-style="buttonStyle" // 自定義按鈕樣式
 @payment-authorized="paymentAuthorized"
 @payment-completed="paymentCompleted"
 @payment-cancelled="paymentCancelled"
>
</PayPal>

以上就是我的代碼實現(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)示例詳解的文章就介紹到這了,更多相關(guān)Vue接入Paypal內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論