PayPal webhook串接

更新於 發佈於 閱讀時間約 2 分鐘

※ 建立通知伺服器訂單完成狀態的 API:

※ 進入Default Application帳號裡面的Add Webhook:

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

raw-image

※ 複製END_POINT的URL:.env

raw-image

※ 貼到Add Webhook裡面的WebhookURL:

raw-image
https://網址/orders/update

※ Event types選項中:

選擇Payment capture completed --> save

raw-image
raw-image

※ 成功畫面:

raw-image

※ 測試訂單成功畫面:

※ 訂單更新:controller --> orderController.ts

//確保請求中有必要的交易資料
      if ("RtnCode" in req.body && "MerchantTradeNo" in req.body) {
...
      } else if ("resource" in req.body) {
        //Paypal
        const { custom_id, status, update_time } = req.body.resource;
        if (status !== 'COMPLETED') return res.status(500).send(500);
        merchantTradeNo = custom_id;
        tradeDate = update_time
      };

程式碼解說:

1.檢查 req.body 是否包含 resource

確認請求的主體(req.body)中是否有 resource 這個欄位。這是 PayPal webhook 通常用來存放具體交易資料的地方。

2.提取所需資訊

resource 中解構出三個欄位:

  • custom_id:通常是商家的自訂交易 ID,用來對應內部資料庫中的訂單。
  • status:交易狀態(例如:COMPLETED 表示交易完成)。
  • update_time:交易最後更新的時間。

3.檢查交易狀態是否完成

如果 status 不等於 COMPLETED,代表交易未完成,伺服器會返回 HTTP 500 狀態碼,表示處理失敗。

4.處理交易資訊

  • merchantTradeNo = custom_id;:將自訂交易編號(custom_id)賦值給變數 merchantTradeNo,用於後續處理。
  • tradeDate = update_time;:將最後更新時間(update_time)賦值給變數 tradeDate

※ My Sql訂單更新結果:

raw-image




全端網頁開發專業知識分享
留言
avatar-img
留言分享你的想法!
※ 安裝 PayPal 伺服器 SDK:在伺服器端處理訂單和付款 網址:https://developer.paypal.com/studio/checkout/standard/getstarted //在開發和測試階段模擬或測試 PayPal 結帳流程 npm install --
※ 前端串接: 第一步設定paypal JavaScript SDKconfiguration:views --> index.ejs 網址:https://developer.paypal.com/sdk/js/configuration/ <!--顯示paypal 按鈕-->     <d
※ PayPal官方文件教學: 網址:https://developer.paypal.com/home/ 第一步:註冊帳號 第二步:註冊商業帳號 第三步:註冊成功 ※ PayPal REST APIs說明: 登入開發者平台:在Sandbox模式開發 網址:https://de
※ 安裝ECPAY SDK(軟體開發工具包): 載點:https://github.com/ECPay/ECPayAIO_Node.js 方法: 1.把code dowonload下來。 在專案中下載ECPAY SDK代碼的原因如下: 參考學習:開發時,可以直接參考 SDK 內的內容。
※ 在前端畫面顯示ECPay: ● 優化前端:views → index.ejs <!-- 新增按鈕 --> <div> <button>綠界支付</button> </div> ● 在Vue 組件的資料定義中,新增buyItem來存儲購買的項目和數量:java
※ 綠界科技API平台: https://www.ecpay.com.tw/ ● 進到開發者中心: ● API串接規格文件: ● 使用SDK來串接Node.JS 的WEB SERVICE: ● 綠界 全方位(All In One)金流介接Node.js 第一版: 載點:htt
※ 安裝 PayPal 伺服器 SDK:在伺服器端處理訂單和付款 網址:https://developer.paypal.com/studio/checkout/standard/getstarted //在開發和測試階段模擬或測試 PayPal 結帳流程 npm install --
※ 前端串接: 第一步設定paypal JavaScript SDKconfiguration:views --> index.ejs 網址:https://developer.paypal.com/sdk/js/configuration/ <!--顯示paypal 按鈕-->     <d
※ PayPal官方文件教學: 網址:https://developer.paypal.com/home/ 第一步:註冊帳號 第二步:註冊商業帳號 第三步:註冊成功 ※ PayPal REST APIs說明: 登入開發者平台:在Sandbox模式開發 網址:https://de
※ 安裝ECPAY SDK(軟體開發工具包): 載點:https://github.com/ECPay/ECPayAIO_Node.js 方法: 1.把code dowonload下來。 在專案中下載ECPAY SDK代碼的原因如下: 參考學習:開發時,可以直接參考 SDK 內的內容。
※ 在前端畫面顯示ECPay: ● 優化前端:views → index.ejs <!-- 新增按鈕 --> <div> <button>綠界支付</button> </div> ● 在Vue 組件的資料定義中,新增buyItem來存儲購買的項目和數量:java
※ 綠界科技API平台: https://www.ecpay.com.tw/ ● 進到開發者中心: ● API串接規格文件: ● 使用SDK來串接Node.JS 的WEB SERVICE: ● 綠界 全方位(All In One)金流介接Node.js 第一版: 載點:htt
你可能也想看
Google News 追蹤
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢,比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具,並強調安全注意事項及個人需求評估的重要性。
Thumbnail
全方位分析脫離繼承戰的方法,大膽猜測誰會成為卡丁國下一任國王。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
R036 Blog API 伺服器的維護更新日誌 (2024/04/30) 開發環境技術 語言: Javascript 環境: Node JS 框架: Express.js 本次維護目的 優化及測試API伺服器程運行 重溫程式碼架構以便日後更新優化 Reac
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
今天就讓我們依照前一天的情境題,來撰寫測試案例函數吧! 這次同樣地,先讓我們規畫擬訂測試案例: 測試案例 使用者註冊: 使用者可送出註冊資料,系統將建立使用者資料,並送出含有專屬驗證連結之驗證信,當此驗證連結被開啟後,將讓使用者轉為已驗證狀態 請求錯誤的驗證連結: 錯誤的驗證連結被開啟後
前兩天,我們探討了「網站文章」的情境題;今明兩天,就讓我們探討另一個情境題「會員註冊」吧! 這邊我們同樣假設網站是採前後端分離的設計,因此我們就專注在測試 API 的部分,不過會多一個「註冊驗證信」的部分要實作與做測試驗證。 使用案例 使用者可填寫註冊資料後送出資料。 使用者可收到註冊驗證信
Thumbnail
全新 vocus 挑戰活動「方格人氣王」來啦~四大挑戰任你選,留言 / 愛心 / 瀏覽數大 PK,還有新手專屬挑戰!無論你是 vocus 上活躍創作者或剛加入的新手,都有機會被更多人看見,獲得站上版位曝光&豐富獎勵!🏆
Thumbnail
本文探討AI筆記工具的優缺點、選擇建議及未來趨勢,比較NotebookLM、OneNote+Copilot、Notion AI、Obsidian+GPT插件和Palantir Foundry等工具,並強調安全注意事項及個人需求評估的重要性。
Thumbnail
全方位分析脫離繼承戰的方法,大膽猜測誰會成為卡丁國下一任國王。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
在前一篇我們已經成功地建立簽核表單及簽核節點並關聯回請假表單,而本篇會接著介紹如何管理簽核節點狀態並同步更新簽核表單狀態。
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
Thumbnail
R036 Blog API 伺服器的維護更新日誌 (2024/04/30) 開發環境技術 語言: Javascript 環境: Node JS 框架: Express.js 本次維護目的 優化及測試API伺服器程運行 重溫程式碼架構以便日後更新優化 Reac
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
Accept:用戶端能夠接收的內容類型。 Accept: text/plain, text/html Accept-Charset:瀏覽器可以接受的字元編碼集。 Accept-Charset: utf8 Accept-Encoding:指定瀏覽器可以支援的web伺服器返回內容壓縮編碼
今天就讓我們依照前一天的情境題,來撰寫測試案例函數吧! 這次同樣地,先讓我們規畫擬訂測試案例: 測試案例 使用者註冊: 使用者可送出註冊資料,系統將建立使用者資料,並送出含有專屬驗證連結之驗證信,當此驗證連結被開啟後,將讓使用者轉為已驗證狀態 請求錯誤的驗證連結: 錯誤的驗證連結被開啟後
前兩天,我們探討了「網站文章」的情境題;今明兩天,就讓我們探討另一個情境題「會員註冊」吧! 這邊我們同樣假設網站是採前後端分離的設計,因此我們就專注在測試 API 的部分,不過會多一個「註冊驗證信」的部分要實作與做測試驗證。 使用案例 使用者可填寫註冊資料後送出資料。 使用者可收到註冊驗證信