綠界科技 | 綠界金流站內付 2.0 React + Node.JS 串接範例-付款結果通知

串接綠界金流付款完畢後，綠界 API 會發送付款結果通知給特約商店(賣家)，若付款結果通知表示付款成功，特約商店依此作為出貨依據。上一篇文章說明如何串接綠界金流站內付 2.0 並完成整個付款流程，本篇文章繼續解說後續的付款結果通知。

commercial photo of an accountant checking on documents in an office. Concentrated. Focused. Determined. — ar 3:2 — style raw — s 2 — v 6.1

ReturnURL 與 OrderResultURL

付款結果的運作方式是綠界 API 以 POST 的方式發送訊息到設定的網址。接收付款結果通知有 ReturnURL 與 OrderResultURL 兩種。 差別在於： ReturnURL 是後端接獲，而且接獲通知後要回應 1|OK。 OrderResultURL) 是前端接獲，付款完成後畫面會導轉到此網址，同時以 POST 方式將付款結果通知傳送到此網址。因此 OrderResultURL 需要自製前端頁面，ReturnURL 不需要。

程式碼

前端 Repo：已新增 OrderResultURL.jsx

[embed]ecpay-embedded-checkout/src/Pages/OrderResultURL.jsx at main · evojroan/ecpay-embedded-checkout 綠界科技站內付 2.0 示範 (React). Contribute to evojroan/ecpay-embedded-checkout development by creating an account on GitHub.github.com

後端Repo：於 App.js 新增程式碼

[embed]GitHub - evojroan/ecpay_embedded_checkout_backend: 綠界金流站內付 2.0 示範-後端 綠界金流站內付 2.0 示範-後端. Contribute to evojroan/ecpay_embedded_checkout_backend development by creating an account on GitHub.github.com

佈署網頁於付款完畢後會導轉到 OrderResultURL 中：

[embed]站內付 2.0 示範網頁 Edit descriptionecpay-embedded-checkout.vercel.app

Cartoon style engineer with a lightbulb moment, eureka expression, thought bubble with innovative idea, vibrant colors, exaggerated features, tech office background, vector art style, flat design — ar 3:2 — v 6.1

OrderResultURL

原本我的構想是：輸入前端頁面的網址，付款完後導轉到前端頁面同時收到綠界 API 傳來的付款結果通知，待 useEffect 收到付款結果通知後傳給後端解密、後端解密回傳再顯示於前端。

但一般情況下，前端頁面是經由 Request — Response 的方式取得資料，無法在沒有請求的情況下接收主動傳來的資料，除非用 Web Socket 才有可能。詢問 AI 後，改以以下方式完成 OrderResultURL：

初始參數中，OrderResultURL輸入後端的位址→

綠界 API 傳付款結果通知給後端的 OrderResultURL 位址→

後端將資料解密→

網址導轉到前端的頁面→到了前端頁面，再向後端 Get 解密後的資料，顯示於頁面上。

這次我也覺得可以學好 Web Socket 後再來改寫看看！

ReturnURL

ReturnURL 相較之下比較單純，純粹從後端接收就好了，只是要回應字串 “1|OK”。實務上接收到付款結果通知後還要記錄起來備查，可以使用 Node.js 的 fs 模組 (npm i fs)新增檔案並記錄。但由於部署於 Vercel 上無法新增、寫入檔案，所以先不寫這功能，只回應 1|OK

完成全部流程了！

從上一篇文章，我們跑完站內付 2.0 的付款流程；本篇文章再收到付款結果通知，已經完成站內付 2.0 的整理流程了！大家可以參考範例程式，依自己的需求修改，並增加美美的切版，這樣就能做成一個電商網站了！如果串接上有任何問題也歡迎留言討論喔！

延伸閱讀

綠界金流站內付 2.0 React + Node.JS 串接範例

綠界檢查碼、AES 加解密工具線上版

綠界金流站內付 2.0 串接範例：取得廠商驗證碼

A software engineer sitting at a desk, surrounded by multiple computer screens, typing on a keyboard, with a satisfied smile on their face. The room is well-lit with warm, ambient lighting. On the screens, you can see lines of code and a “Task Completed” message. The engineer is wearing casual, comfortable clothing. Their body language suggests accomplishment and contentment. The overall atmosphere is one of achievement and fulfillment. Highly detailed, realistic style, 4K resolution. — ar 3:2 — v 6.1