支付方式選擇器
涵蓋台灣主要電子錢包（LINE Pay、街口、全支付、悠遊付、iCash）、行動支付（Apple/Google/Samsung Pay）、信用卡、ATM、超商代收的單選元件。
Multi-provider payment-method radio group covering Taiwan e-wallets (LINE Pay, 街口, 全支付, 悠遊付, iCash) plus Apple/Google/Samsung Pay, credit card, ATM, and convenience-store payment.
CLI
npx taiwan-ui add payment-method-pickernpm package
npm install @taiwan-ui/react| Prop | Type | Default |
|---|---|---|
value* | PaymentMethodId | null | — |
onChange* | (id: PaymentMethodId) => void | — |
methods | PaymentMethodId[] | — |
english | boolean | false |
variant | "grid" | "list" | "grid" |
disabled | boolean | false |
Non-editable type — edit in code.
已選支付方式
顯示英文標籤
顯示變體
停用選取
import PaymentMethodPicker from "@/components/taiwan/PaymentMethodPicker";
export default function Example() {
return (
<PaymentMethodPicker
variant="grid"
/>
);
}
import { useState } from "react";
import PaymentMethodPicker, { type PaymentMethodId } from "@/components/taiwan/PaymentMethodPicker";
export default function Checkout() {
const [method, setMethod] = useState<PaymentMethodId | null>(null);
return <PaymentMethodPicker value={method} onChange={setMethod} />;
}