已有品牌網站？讓 AI 替你串接

我的 merchant_id 是：__在此填入你的 merchant_id__（嘴付開店後取得）

請在我這個網站專案裡加入「嘴付（Chui Protocol）語音點餐」整合，讓顧客在我的
品牌網站上就能語音下單、以 Sui Testnet USDC 付款給我。要求如下：

## 背景
- 嘴付協議是「語音點餐＋鏈上支付」協議。API 文件：
  https://chuiprotocol.com/developers/ （機器可讀摘要：https://chuiprotocol.com/llms.txt）
- Hub Base URL：https://hub.chuiprotocol.com（免金鑰、CORS 全開、全部 JSON）
- 參考實作（真實店家串接範例，MIT 開源）：
  https://github.com/chuiprotocol/chui-app 的 apps/merchant-a（品牌官網串 Hub API）
  與 packages/chui-web（語音循環／錢包結帳的可重用核心）

## 要做的事
1. 在網站顯眼處加一顆「🎙 嘴付下單」按鈕與簡單的對話面板。
2. 點餐流程（全部呼叫 Hub API，不需要自建後端）：
   a. GET /v1/merchants/{merchant_id}/menu 取得菜單（顯示品項與價格）。
   b. 顧客輸入或語音說出餐點後，POST /v1/orders/parse
      （multipart/form-data：text=顧客的話、merchant_id=我的 id；
       若做語音就錄音後改傳 audio 欄位）。
      - 200：顯示 readback.text（覆誦）與 quote.total，請顧客確認。
      - 422 CLARIFICATION_NEEDED：把 question 顯示給顧客重新回答，絕不擅自猜測。
   c. 顧客確認後 POST /v1/orders/confirm（body: {"order_id": ...}），
      拿到 checkout 參數（package_id/module/function/coin_type/
      amount_units/merchant_address/order_digest_hex）。
   d. 用 @mysten/dapp-kit（或 @mysten/sui + Slush 錢包）組交易：
      呼叫 Move 函式 {package_id}::{module}::{function}，型別參數＝coin_type，
      引數＝[coinWithBalance(amount_units), merchant_address,
            bytes(order_digest_hex)]，請顧客的錢包簽名送出。
   e. 送出後 POST /v1/orders/{order_id}/settlement（body: {"tx_digest": ...}）
      讓 Hub 做鏈上驗證；輪詢 GET /v1/orders/{order_id} 直到 status=paid，
      顯示取餐單號（merchant_ref）。
3. 錯誤處理採「誠實失敗」：任何 API 錯誤都把 detail.message 誠實顯示給顧客，
   不偽造成功、不無聲重試超過 1 次。

## 限制與紀律
- 只用 Sui **Testnet**（checkout.network 會是 "testnet"；若不是，中止並警告）。
- 金額一律用 API 回傳的整數 amount_units，不自行計算或四捨五入。
- 不要引入後端伺服器；純前端即可完成（Hub CORS 全開）。
- 不要動我網站既有功能與樣式系統；新增程式碼放獨立模組／元件。
- 完成後給我一份測試步驟：如何用測試 USDC（https://faucet.circle.com 領）
  在本機跑通「說一句話 → 錢包簽名 → 顯示取餐單號」全流程。