※ 前端串接：
第一步設定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";//想要空字串
}
};
將資料寫進資料庫：
