實作課程 · From Forms to Checkout

表單到收款:做出能接單的網站

延續貓掌櫃官網,用八章把商品介紹接成訂單流程:表單、資料儲存、會員權限、金額計算、測試付款與結果確認。站內示範皆為模擬;實作先在金流測試環境驗收,再依選定服務的官方文件準備正式收款。

8 章·一個案例帶到底·每章都有驗收清單·進度存在你的瀏覽器

練習專案

貓掌櫃官網

替限量陶燒貓碗加上訂單表單與測試付款
  • 先完成《替貓老闆做官網》,並會用 Git 留存版本;本課會加上後端,需要能執行後端程式的開發環境。
  • 教學商品每個 NT$680、每筆運費 NT$60、每次可訂 1 到 3 個。這些都是練習用的虛構規則與資料。
  • 每章先讀任務,再將提示詞交給 AI,檢查實際產出後才往下走。本站的互動示範只解釋流程,不會建立真實訂單、寄信或扣款。
  • 採用金流服務商提供的付款頁。實際商家申請資格、費用、付款方式與串接細節,以你選定服務的最新官方文件為準;尚未選定服務時,先完成模擬流程。
先畫清楚怎麼接單先定義訪客從商品頁到訂單完成會經過哪些步驟,也分清楚收件成功、等待付款和付款確認。未開始表單要讓人填得完只收出貨需要的資料,標籤一直顯示,填錯時指出原因;確認頁讓客人核對商品、費用和收件資料。未開始訂單要真的存下來按下按鈕後,後端要重新檢查資料、計算金額並儲存。只有拿到後端回傳的訂單編號,才顯示建立成功。未開始登入後只看得到自己的訂單使用者登入後可以查自己的訂單;管理者才能查全部。每次 API 查詢都要驗證身分與權限。未開始把付款交給金流服務商先選定適用的金流服務,依官方文件建立測試付款。商品價格由後端計算,信用卡資料填在服務商的付款頁。未開始收到可信的通知才算已付款付款頁跳回網站不代表款項已確認。後端要驗證服務商通知、核對交易與金額,重複通知也只能處理一次。未開始讓客人知道現在該做什麼處理中、等待付款、付款失敗、付款已確認都要有清楚的下一步;會員查詢和管理者清單則讀取同一份後端資料。未開始把接單流程從頭驗收一次用虛構資料完成測試下單與付款,留下可核對的訂單、交易和驗收結果,再整理正式上線需要的設定。未開始