Vue項目接入Paypal詳解

時間 2020-06-05

標籤 vue 項目 paypal 詳解简体版

原文原文鏈接

1、支付流程

在paypal的官網上給出了這個按鈕內部封裝的流程，整個流程只須要用戶點擊按鈕，觸發建立訂單事件，而後咱們再監聽用戶支付成功的回調，拿到訂單id傳給後端，讓後端再進行一次校驗。
html

2、實現方案

接入方式	優勢	缺點	相關資料
在html中插入paypal的script腳本	實現方式比較簡單	一、安全性問題：公司的client_id會暴露在代碼中二、引用的按鈕樣式比較難自定義	官方文檔：https://developer.paypal.com/docs/checkout/integrate/# 更詳細的說明：https://segmentfault.com/a/1190000021366504
使用官方提供的npm包（有好幾個）	一、能夠自定義，不須要使用官方給定的button，能夠在本身的按鈕上綁定建立事件二、不會把client_id暴露出來	一、須要仔細閱讀文檔，開發難度會大一點二、有的須要配合node一塊兒開發	github：https://github.com/paypal/paypal-checkout-components node-sdk：https://github.com/paypal/Pay...
使用別人封裝好的npm包	一、使用起來方便二、文檔比較清晰	一、可能存在沒人維護的風險二、可自定義的部分很少三、使用的是Paypalv1版接口，官網上用的是v2接口，可是應該不影響	github：https://github.com/khoanguyen96/vue-paypal-checkout

這是我目前總結的幾種實現方案，若是有更好的方案，歡迎在評論區告訴我～vue

3、項目中實現

因爲我是在vue項目實現，通過考慮，別人封裝的vue-paypal-checkout庫能夠知足開發需求，並且使用起來比較簡單，因此暫時選擇採起這個方案，接下來咱們看看代碼實現吧！node

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的按鈕，完成基本的支付操做，這個仍是徹底能夠支持的。git