[PayPal] PayPal 付款流程整合 前篇

現在新的PayPal新的API付款方式不像以前需要整個頁面導向PayPal，而是整個付款回流會在原本的網頁做完付款的動作。 依照官方的說明，總共有五個步驟要搞懂。

• 付款流程
• 加入 PayPal 付款按鈕
• 選擇整合方式
• Client 端整合 或 Server 端整合
• 測試整合流程

付款流程

付款流程示意圖

圖片來自 : https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/

1. 付款人按下付款按鈕
   • 會使用 PayPal 提供的 checkout.js 跳出 lightbox window
   • 接下來就是使用 javascript 或者 server 端呼叫 PayPal API 初始化帳單
   • 一旦帳單初始化付款流程就會在 lightbox window 正式開始

2. 付款人需登入 PayPal

   圖片來自 : https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/

3. 付款人會授權 PayPal 帳單

   圖片來自 : https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/

4. 付款人同意帳單後，PayPay 會關掉 lightbox window，付款人回到原本的網頁畫面。 此刻，我們可以顯示一個確認頁面，呼叫 PapPal REST API 來顯示帳單明細，內容包含帳單地址跟Email等等….

5. 在確認頁面裡面，呼叫付款完成的 PayPal API 來完成付款。

補充 : Express Checkout 支援的瀏覽器

加入 PayPal 付款按鈕

載入checkout.js

1

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

Render the PayPal button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="paypal-button"></div>
    <script>
    paypal.Button.render({
    
        env: 'production', // Specify 'sandbox' for the test environment

        payment: function() {
            // Set up the payment here, when the buyer clicks on the button
        },

        onAuthorize: function(data, actions) {
            // Execute the payment here, when the buyer approves the transaction
       }
            
    }, '#paypal-button');
</script>

補充 :

• 客製化按鈕
• checkout.js 更多應用

選擇整合方式

Client 整合 :

• 只需要使用 HTML 跟 JavaScript 就可以完成付款流程

Server 整合 :

• 更有彈性
• 在 server 端呼叫 REST Payments API 建立帳單、付款等動作。

整合流程說明 :

1. checkout.js render PayPal 按鈕
2. 付款人點擊按鈕，建立帳單，並且彈出 lightbox window 。
   建立帳單的方式，有兩種，參考上方的說明 :
   • Client 整合
   • Server 整合
3. 初始化付款流程
4. 付款人登入並且授權帳單
5. 顯示確認頁面 (選擇性，不一定要執行此步驟)
6. 付款完成
   • Client 整合 : checkout.js 自動在 client 端執行付款完成手續
   • Server 整合 : Server 呼叫 REST API 完成付款
7. 顯示付款完成頁面

PayPal 付款流程整合 後篇

參考