本土支付按鈕
LINE Pay / JKO Pay 品牌規範按鈕，支援金額顯示、載入狀態、三種尺寸。
Branded payment buttons for Taiwan local payment providers including LINE Pay and JKO Pay with proper brand colors and loading states.
CLI
npx taiwan-ui add taiwan-payment-buttonnpm package
npm install @taiwan-ui/react| Prop | Type | Default |
|---|---|---|
provider* | "linepay" | "jkopay" | "streetpay" | — |
amount | number | — |
onClick* | (provider: PaymentProvider) => void | — |
loading | boolean | false |
disabled | boolean | false |
size | "sm" | "md" | "lg" | "md" |
fullWidth | boolean | false |
支付供應商
新台幣金額
顯示載入動畫
停用按鈕
按鈕尺寸
全寬按鈕
import TaiwanPaymentButton from "@/components/taiwan/TaiwanPaymentButton";
export default function Example() {
return (
<TaiwanPaymentButton
size="md"
/>
);
}
import TaiwanPaymentButton from "@/components/taiwan/TaiwanPaymentButton";
export default function Checkout() {
return (
<TaiwanPaymentButton
provider="linepay"
amount={1250}
onClick={(provider) => console.log(`Pay with ${provider}`)}
/>
);
}