把名片 轉成
真正能下單的店面
既有的數位名片，只需要 3 個步驟就能升級為線上商店：選版型、建商品、開金流。 商家不需要另一個系統、不需要再付月租，所有訂單與詢問都會回到同一個 annai 後台。
這個系統解決什麼問題
原本的 annai 數位名片是「一頁式」的：商家把品牌、聯絡方式、簡介集中在同一頁。 但客人想實際下單或問價時，沒地方放商品、沒地方收單。 這個微電商模組讓商家可以在 3 分鐘內把商店疊加到名片上， 並且不需要切換到其他平台。
3 種版型自由選
精品、餐飲、接案，視覺風格與互動流程都不一樣，商家依屬性挑選。
內建購物車與詢價單
菜單版有完整加減量／結帳流程；接案版有客製化詢價表單。
雙金流並列
同時支援綠界 ECPay 與藍新 Newebpay，商家自行選用，未填寫時用系統測試帳號預覽。
訂單即時通知
顧客送出訂單，商家立即收到 Email；後台同步出現未處理徽章。
後台可直接回覆顧客
處理訂單時可一鍵把回覆 Email 寄給顧客，訂單狀態自動更新。
與既有名片無縫整合
商家不需另一個帳號；訪客點名片頁的「🛍 查看商品」就進到商店。
使用者流程
商家：選版型 + 建商品
從後台「電商管理 → 商店設定」選一種版型並啟用，到「商品管理」上傳照片、設價格。整個流程約 5-10 分鐘。
顧客：從名片進到商店
原本的名片 URL 不變，名片右上角會自動出現「🛍 查看商品」浮動按鈕，點擊即進入店面。
顧客：下單 / 詢價 / 線上付款
依版型而定，可加入購物車結帳、送出詢價單、或選擇現場付款 vs 信用卡。
商家：收 Email + 後台處理
新訂單即時 Email 通知，後台「訂單與詢價」收件箱列出所有單，可一鍵回覆並推進狀態。
選一個最像你的店
每種版型有自己的視覺風格、互動方式、付款流程。下面是三家實際示範商店， 您可以在這頁直接互動測試（手機尺寸預覽，點此單獨開啟）。
獨立開啟 →
獨立開啟 →
獨立開啟 →
① Lookbook 視覺型
主打商品照片與品牌氛圍，2×2 網格 + 分類 chip。適合飾品、選物、設計品牌。不含加入購物車，訪客有興趣時直接打電話或私訊店家。
- 大幅 Hero 圖 + 品牌標語
- 分類 chip（全部 / 項鍊 / 戒指 / 耳環 / 禮盒）即時過濾
- 商品卡片含熱銷／新品等標籤
- 底部 About / 聯絡資訊
② Menu 菜單型
訂餐流程完整：選擇內用 / 外帶 / 外送，分類 sticky 導覽列，加減量按鈕，浮動結帳 bar。
- 顧客可加入購物車、即時看到總金額
- 結帳可選擇付款方式（現場 / 綠界 / 藍新）
- 商品可標示「招牌 / 熱銷 / 新品 / 🌶 辣」
- 訂單帶有桌號、備註等選填欄位
③ Inquiry 詢價型
三段式版面：服務 → 作品集 → 詢價單。客戶填寫服務類型、預算、時程後送出，不涉及線上付款。
- 暗色 Hero 突顯品牌調性
- 01 / 02 / 03 服務編號設計
- 2×2 作品集網格（自動取商品照當作品）
- 內嵌詢價表單，chip 式選項減少打字
商家如何管理商店
商家登入既有的 annai 後台，左側選單會看到新增的「電商管理」分組。 以下示範皆使用上一節的「茶覺日和」資料。
商店設定
進入後台第一站。在這裡開關商店、選版型、設定通知 Email、配置金流。
注意「版型已鎖定」提示：商家選定模板後就無法自行切換，這是為了避免商品資料對應不到（例：菜單版的「辣度」欄位在精品版沒意義）。如真有需要可聯絡客服解鎖。
商品分類
建立分類後才能用來組織商品。每筆都會顯示「目前有幾件商品」，方便快速檢視。
商品管理
商品 grid 顯示縮圖、分類、價格。點任一張卡片可開啟編輯彈窗，含照片上傳、badge 設定、上下架切換。
訂單與詢價收件箱
所有顧客送出的訂單與詢價統一進到這裡。左側列表帶訂單 / 詢價分類標籤、已付 / 待付 / 失敗付款狀態、未處理紅點。右側點開可看完整內容並回覆。
「回覆客戶」面板能直接寫回信並一鍵寄出 Email，狀態自動推進「未處理 → 已聯絡」。歷史回覆會以綠色面板留在訂單內。
綠界 ECPay 與 藍新 Newebpay
兩家都是台灣主流的金流商，介面風格各異。 商家未配置自家 MerchantID 時，系統自動用測試帳號讓商家先預覽流程（金額不會真的扣款）。 填寫商家自己的 MerchantID / HashKey / HashIV 並切換為「正式」後，顧客付款才會進入商家帳戶。
| 項目 | 綠界 ECPay | 藍新 Newebpay |
|---|---|---|
| 信用卡 | ✓ | ✓ |
| ATM 虛擬帳號 | ✓ | ✓ |
| 超商代碼 | ✓ | ✓ |
| 超商條碼 | — | ✓ |
| Google Pay | — | ✓ |
| 金鑰加密 | SHA-256 | AES + SHA-256 |
| 退款 | 後台手動操作 | 後台手動操作 |
顧客付款流程
選擇付款方式
菜單版的結帳 modal 底部會顯示 3 種選項：現場付款、綠界 ECPay、藍新 Newebpay。
系統建立訂單並產生交易單號
後端用商家的金鑰簽名生成跳轉表單（CheckMacValue / TradeSha），訂單狀態為「等待付款」。
顧客在金流頁面完成付款
瀏覽器自動跳轉到綠界或藍新的安全付款頁面，顧客輸入信用卡資訊。
金流回呼系統，更新訂單為「已付款」
金流商會 server-to-server 通知 annai，系統驗證簽章後更新訂單狀態並寄通知 Email 給商家。
顧客看到付款結果頁，商家後台同步更新
後台訂單顯示「✓ 綠界已付款」或「✓ 藍新已付款」綠色標籤，商家就能開始備貨。
系統架構
微電商整合進既有的 annai 系統，共用同一套帳號、後台、資料庫。 部署在 annai.cc，所有頁面均使用 HTTPS。
| 分層 | 實作 |
|---|---|
| 前端 | 純 HTML / CSS / Alpine.js（無 build step，可手改） |
| 名片頁面 | PHP 直接渲染（SEO 友善） |
| 店面頁面 | PHP 渲染對應版型，依商家設定路由 |
| API | PHP 8 + Slim 4 框架，JWT 認證 |
| 資料庫 | MariaDB / MySQL |
| 背景作業 | Redis queue + cron worker（寄信非同步） |
| 金流 | 綠界 ECPay AIO、藍新 Newebpay MPG，各別 SDK 化封裝 |
資料保護
- 每日凌晨 03:00 自動 DB 備份（gzip 壓縮，保留 30 天）
- 所有金流回呼皆驗證簽章，無法偽造交易結果
- 金鑰／密碼皆以遮罩顯示，永不明文回傳
- 所有重要操作（登入、付款、設定變更）都寫入 audit log
- Redis 異常時所有功能自動降級到資料庫 / 檔案模式，不影響服務