詳解Vue項(xiàng)目接入Paypal實(shí)現(xiàn)

小編這次要給大家分享的是詳解Vue項(xiàng)目接入Paypal實(shí)現(xiàn)，文章內(nèi)容豐富，感興趣的小伙伴可以來(lái)了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

一、支付流程

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

二、實(shí)現(xiàn)方案

這是我目前總結(jié)的幾種實(shí)現(xiàn)方案，如果有更好的方案，歡迎在評(píng)論區(qū)告訴我～

三、項(xiàng)目中實(shí)現(xiàn)

由于我是在vue項(xiàng)目實(shí)現(xiàn)，經(jīng)過(guò)考慮，別人封裝的vue-paypal-checkout庫(kù)可以滿足開(kāi)發(fā)需求，而且使用起來(lái)比較簡(jiǎn)單，所以暫時(shí)選擇采取這個(gè)方案，接下來(lái)我們看看代碼實(shí)現(xiàn)吧！

npm install vue-paypal-checkout

import PayPal from 'vue-paypal-checkout'

export default {
 data() {
  return {
   credentials: {
    sandbox: '填寫(xiě)沙箱環(huán)境client_id',
    production: '填寫(xiě)線上環(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- // 自定義按鈕樣式
 @payment-authorized="paymentAuthorized"
 @payment-completed="paymentCompleted"
 @payment-cancelled="paymentCancelled"
>
</PayPal>

以上就是我的代碼實(shí)現(xiàn)過(guò)程，具體內(nèi)容可以根據(jù)業(yè)務(wù)來(lái)修改，實(shí)現(xiàn)起來(lái)還是蠻簡(jiǎn)單的，如果只是想嵌入Paypal的按鈕，完成基本的支付操作，這個(gè)還是完全可以支持的。

四、Paypal沙箱環(huán)境賬戶申請(qǐng)流程

注冊(cè)Paypal線上賬戶

（1）瀏覽器打開(kāi)https://www.paypal.com/

（2）注冊(cè)一個(gè)賬號(hào)，個(gè)人和企業(yè)都行。推薦注冊(cè)個(gè)人賬戶，比企業(yè)賬戶要填的信息少，功能差別不大

（3）填寫(xiě)相關(guān)信息，銀行卡號(hào)暫時(shí)可以先不填，創(chuàng)建完成后就可以看到這個(gè)頁(yè)面，沙箱環(huán)境和這個(gè)頁(yè)面長(zhǎng)得很像，可以通過(guò)網(wǎng)頁(yè)地址進(jìn)行區(qū)分

注冊(cè)Paypal開(kāi)發(fā)者賬號(hào)

（1）瀏覽器打開(kāi)https://developer.paypal.com/ ，用剛剛創(chuàng)建的線上賬戶登錄一下（如果時(shí)間隔得很近，會(huì)默認(rèn)登錄），紅色框中是后面會(huì)重點(diǎn)用到的內(nèi)容

（2）進(jìn)入Accounts頁(yè)面，創(chuàng)建沙箱測(cè)試賬戶，默認(rèn)會(huì)創(chuàng)建兩個(gè)賬戶（1個(gè)企業(yè)賬戶，1個(gè)個(gè)人賬戶），我們也可以自己創(chuàng)建，最多可以創(chuàng)建5個(gè)

登錄沙箱環(huán)境

（1）用測(cè)試賬號(hào)登錄https://www.sandbox.paypal.com ，使用開(kāi)發(fā)者環(huán)境的測(cè)試賬號(hào)登錄

（2）用紅框中的賬號(hào)和密碼登錄沙箱環(huán)境，就可以看到一個(gè)和線上類似的頁(yè)面，初始資金默認(rèn)為$5000，可以自行修改

（3）在開(kāi)發(fā)環(huán)境下的My Apps & Credentials頁(yè)面下創(chuàng)建應(yīng)用，拿到Client ID和Secret去請(qǐng)求Access token

（4）拿Client ID和Secret去請(qǐng)求Access token

頁(yè)面操作按鈕進(jìn)行測(cè)試

（1）登錄剛剛沙盒環(huán)境的另外一個(gè)測(cè)試賬戶

（2）付款成功后，付款頁(yè)面會(huì)自動(dòng)關(guān)閉，可以去沙盒環(huán)境看一下扣款記錄

五、總結(jié)

雖然我這里給了很詳細(xì)的流程，但看官方文檔還是必要的，Paypal的文檔挺詳細(xì)的，只是全英文看起來(lái)可能比較有壓力，耐心一點(diǎn)會(huì)發(fā)現(xiàn)還是不錯(cuò)的。說(shuō)明一點(diǎn)，如果在創(chuàng)建賬號(hào)的時(shí)候有和我不一樣的情況，不用驚訝，因?yàn)镻aypal就是這樣神秘的，哈哈哈！

看完這篇關(guān)于詳解Vue項(xiàng)目接入Paypal實(shí)現(xiàn)的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話，可以把它分享出去給更多人看到。