※ PayPal client

※ 前端串接：

第一步設定paypal JavaScript SDKconfiguration：views --> index.ejs

網址：https://developer.paypal.com/sdk/js/configuration/

<!--顯示paypal 按鈕-->
    <div id="paypal-area"></div>

<!--使用paypal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

從後端帶入client-id：views --> index.ejs

<script src="https://www.paypal.com/sdk/js?client-id=<%= pay_pal_client_id %>"></script>

從後端帶入client-id路由：routes --> index.ejs

router.get('/', function (_req, res, _next) {

  logger.info('hello Express');

  res.render('index', { title: 'Express', pay_pal_client_id: process.env.PAYPAL_CLIENT_ID,



 });
});

程式碼說明：

為確保PayPal 客戶端 ID不會直接在代碼中顯示，pay_pal_client_id設置為 process.env環境變數。

.env中加入PayPal client-id：.env

PAYPAL_CLIENT_ID = 你的client-id
PAYPAL_CLIENT_SECRET = 你的CLIENT_SECRET KEY

查詢PayPal client-id路徑：

網址：https://developer.paypal.com/dashboard/applications/sandbox

複製PayPal client-id：

複製PAYPAL_CLIENT_SECRET：任選一個KEY複製

確認client-id從後段放到前端結果：

PayPal和Javascript平面串接：public --> javascripts --> index.js

將PayPal按鈕放在mounted裡面：畫面被渲染前先去執行抓API的動作

 async mounted() {
    this.products = await fetch(`${serverDomain}/products/list`)
      .then((res) => res.json());

    paypal.Buttons({
      createOrder: (data, actions)=> {
        //串接我們自己的server code.
         //從購買項目中獲取詳細訊息，並將這些訊息存儲在 items
        const items = this.getItemDetailByBuyItems();
        const result = await this.sendPayment(`${this.serverDomain}/orders/create`,
         {
          paymentProvider: "PAYPAL",
          paymentWay: "PAYPAL",
          contents: items,
        });

        console.log("🚀 ~ mounted ~ result:", result);
        //提取數據
        return result.data;
      },
      },
        onApprove: (data, actions) => {
        console.log("🚀 ~ mounted ~ data:", data)

      return actions.order.capture();
      }

    }).render('#paypal-area');//渲染到指定位置
  },

程式碼說明：

• 使用箭頭函數：使用箭頭函數 (=>) 代替傳統的函數表達式，可以使代碼更簡潔易讀，同時保持上下文的 this 綁定。
• paypal.Buttons 函數：這個函數初始化網頁上的 PayPal 按鈕。
• createOrder 函數：當用戶點擊 PayPal 按鈕時，這個函數會被調用。它應該返回一個 Promise，該 Promise 會解決想要創建的訂單 ID。
• onApprove: (data, actions) 是一個回調函數，它在用戶完成支付批准後被調用。
• data 參數：這個參數包含了有關交易的訊息，例如訂單 ID。
• actions 參數：這個參數提供了一些方法來處理交易。
• return actions.order.capture() 是用來「完成交易並確認付款」。
• render 方法：這個用在網頁的特定元素上顯示 PayPal 按鈕（#paypal-area）。

串接我們自己的server code：

1. const items = this.getItemDetailByBuyItems(); 這行代碼的作用是從某個方法（getItemDetailByBuyItems）中獲取購買項目的詳細訊息，並將其存儲在 items 常量中。用於處理訂單、顯示購買項目的詳情或進行其他相關操作。

2. const result = await this.sendPayment(${this.serverDomain}/orders/create, { ... })：

• 這行代碼使用 await 關鍵字來等待 this.sendPayment 方法的執行結果。
• this.sendPayment 方法負責向伺服器發送支付請求。它向 ${this.serverDomain}/orders/create URL 發送一個包含支付相關訊息的請求。

請求的 payload 包含三個欄位：paymentProvider（支付提供者，設為 "PAYPAL"），paymentWay（支付方式，設為 "PAYPAL"），以及 contents（購買項目的詳細信息，存儲在 items 中）。

3.return result.data：

• 最後，將 result 返回。這確保 createOrder 函數返回支付請求的結果，使整個支付流程保持連貫。

4. result.data：從伺服器回應對象中提取的數據部分。伺服器回應的數據部分通常包含應用程序需要使用的實際內容，例如訂單詳情、支付訊息等。

簡單地表示支付提供者匹配但尚未實現具體功能：dispatcher --> index.ts

export const paymentDispatcher = async ({
  paymentProvider,
  paymentWay,
  payload,

}: {
...
}) => {

  const ecpay = new ECPayAdapter();

  if (paymentProvider === PaymentProvider.ECPAY) {
 ...

  } else if (paymentProvider === PaymentProvider.PAYPAL) {

    //TODO

    return "1";//想要空字串

  }
};

將資料寫進資料庫：