付款成功面板

結帳最後一步的底部面板。按下付款後，全寬的付款鈕寬度收合成 56px 的圓，裡面轉起進度環；付款成功時環收合、勾一筆畫出，整顆按鈕脈衝一次，接著標題換成「付款成功」，訂單編號、付款時間、預計到貨等摘要列以 70ms 間隔依序展開，最後呼叫 onDone。面板可拖曳把手往下關閉，處理中則鎖住所有關閉途徑。開啟狀態與付款階段各自支援受控／非受控雙模式。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<PaymentSuccessSheet/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/payment-success-sheet.json

使用

import { PaymentSuccessSheet } from "@/components/ui/payment-success-sheet";

<PaymentSuccessSheet
  items={[
    { id: "cushion", name: "亞麻抱枕套", qty: 1, price: 680 },
    { id: "tray", name: "手作木托盤", qty: 1, price: 600 },
  ]}
  total={1280}
  currency="TWD"
  paymentMethod="•••• 4242"
  summary={[
    { label: "訂單編號", value: "MB-20261025-0412" },
    { label: "合計", value: "NT$1,280" },
    { label: "預計到貨", value: "10/28（二）" },
  ]}
  onPay={async () => {
    // 呼叫你的金流 API；resolve 進入成功，reject 回到待付款
    await chargeCard();
  }}
  onDone={() => console.log("動畫結束，可以接著出單")}
/>

Props

PaymentSuccessSheetItem

PaymentSuccessSheetSummaryRow

PaymentSuccessSheetLabels

細節

• 節奏：面板以 spring（stiffness 預設 340、damping 34）從底部滑上，遮罩 200ms 淡入；付款鈕寬度 morph 用 bounce 0、0.26 秒的 spring；勾 400ms 畫出、脈衝 500ms（scale 1 → 1.12 → 1，外圈擴散淡出）。
• 成功色走 CSS 變數 --wb-pss-success（預設 #10b981），可在主題層覆寫。
• 非受控時處理中至少停留 0.8 秒，避免 onPay 太快 resolve 讓進度環一閃而過；受控時元件只通知 onStageChange("processing")，由你決定何時切到 success。
• 非受控模式下，成功後關閉面板會重置回 idle，下次打開是新的一筆結帳。
• 拖曳只從頂部把手啟動：往下超過 100px 或速度超過 500px/s 即關閉，未達門檻彈回。
• 想在付款成功後出一張收據，可把同批次的 receipt-printer（Pro）接在 onDone 之後；本元件不依賴它。
• 金額格式化是確定性的（自行加千分位，不用 Intl.NumberFormat），伺服器與瀏覽器輸出一致，不會造成 hydration 不一致。

可及性

• 面板為 role="dialog"、aria-modal="true"，以 aria-labelledby 指向標題；開啟時焦點移到付款鈕，Tab／Shift+Tab 鎖在面板內，關閉後焦點回到開啟前的元素
• Esc、點遮罩、拖曳把手、關閉鈕都能關閉面板；付款處理中這些途徑全部停用
• 付款鈕處理中設定 aria-busy 並停用，縮成圓形時以 aria-label 保留可讀名稱
• 隱藏的 role="status"、aria-live="polite" 區域依序宣告「付款處理中」「付款成功」
• 使用者系統開啟「減少動態效果」時，面板改為 150ms 淡入、付款鈕不 morph 而是直接換成「處理中…」文字、勾直接出現且不脈衝、摘要列直接顯示、停用拖曳