[PayPal] PayPal 付款流程整合 後篇
延續前篇 PayPal 付款流程整合 前篇
Client 端整合
單純用 Client 整合的話只需要單純用 HTML 跟 JavaScript 就能完成,不需要寫到 Server 端的程式碼。
建立 PayPal app 取得 credentials,傳入 client ID 。
在
payment
function 使用paypal.rest.payment.create()
設定付款選項。參考 : 如何建立帳單在
onAuthorize
call back 顯示成功頁面
以下程式碼說明如何在正式環境建立一個 $1.00 USD的帳單,當付款成功後,顯示成功頁面。
- html
1 | <div id="paypal-button"></div> |
範例來源 :
Basic client integration
調整參數說明 :
說明 | 修改說明 |
---|---|
沙盒整合測試 | env: sandbox |
立即執行付款 | commit: true 會顯示 Pay Now 按鈕,沒設定會顯示 Continue 按鈕 |
付款之前顯示確認頁面 | 在 onAuthorize call back 可使用 actions.payment.get() 取得帳單和付款人資訊 必須顯示付款確認頁面,否則 |
Server 端整合
Server 端整合有更多的彈性,更多的控制權來完成付款流程。
設置 Client 環境
- 載入
checkout.js
- 設定
payment
function 建立帳單- 呼叫 Server 建立帳單
- 從建立帳單的 API 取得
paymentID
,呼叫resolve(data.paymentID
,開始付款人授權流程。
- 設定
onAuthorize
完成付款- 之後的 REST Payments API 呼叫,都需要用到
data.paymentID
和data.payerID
, - 可選擇是否顯示帳單明細
- 呼叫 Server 端 執行付款
- 之後的 REST Payments API 呼叫,都需要用到
- html
1 | <div id="paypal-button"></div> |
範例來源 :
Advanced server integration
Server 如何整合付款流程說明
- Client 端的
payment
method 呼叫 Server - Server 呼叫 Payments API 建立帳單
記得呼叫
create-payment
API 時,傳入redirect_urls
,當付款完成後,可以在onAuthorize
function 取得redirect_urls
。 - 繼步驟2,會取得 JSON 回應
- Server 送出回應到 Client 藉以取得 paymentID
- 開始初始化付款流程, 在 client 建立的
payment
method 從回傳的 JSON 訊息傳paymentID
到checkout.js
script - 開啟 lightbox 讓付款人同意付款
執行付款
使用者同意付款後, checkout.js
會呼叫 onAuthorize
call back。
執行付款之前,建議可以顯示付款明細
onAuthorize
call back 呼叫 Server 並傳入data.paymentID
和data.payerID
,執行付款- Server 呼叫付款完成 API 完成付款
Server 呼叫 API 步驟
測試整合流程
要做 end-to-end 測試,須先建立 merchant(Business) 和 buyer(Personal) 帳號,才可以做沙盒環境測試。 建立帳號說明 。
小結
目前只把 PayPal 付款流程大致了解,有這些概念後,再去參考 API 文件應該會容易許多。