Files
sub2apipay/src/components/OrderFilterBar.tsx
erio d9ab65ecf2 feat: integrate Stripe payment with bugfixes and active timeout cancellation
- Add Stripe payment provider with Checkout Session flow
- Payment provider abstraction layer (EasyPay + Stripe unified interface)
- Stripe webhook with proper raw body handling and signature verification
- Frontend: Stripe button with URL validation, anti-duplicate click, noopener
- Active timeout cancellation: query platform before expiring, recover paid orders
- Singleton Stripe client, idempotency keys, Math.round for amounts
- Handle async_payment events, return null for unknown webhook events
- Set Checkout Session expires_at aligned with order timeout
- Add cancelPayment to provider interface (Stripe: sessions.expire, EasyPay: no-op)
- Enable stripe in frontend payment type list
2026-03-01 17:58:08 +08:00

34 lines
1.1 KiB
TypeScript

import { FILTER_OPTIONS, type OrderStatusFilter } from '@/lib/pay-utils';
interface OrderFilterBarProps {
isDark: boolean;
activeFilter: OrderStatusFilter;
onChange: (filter: OrderStatusFilter) => void;
}
export default function OrderFilterBar({ isDark, activeFilter, onChange }: OrderFilterBarProps) {
return (
<div className="flex flex-wrap gap-2">
{FILTER_OPTIONS.map((item) => (
<button
key={item.key}
type="button"
onClick={() => onChange(item.key)}
className={[
'rounded-full border px-3 py-1.5 text-xs font-medium transition-colors',
activeFilter === item.key
? isDark
? 'border-slate-500 bg-slate-700 text-slate-100'
: 'border-slate-400 bg-slate-900 text-white'
: isDark
? 'border-slate-600 text-slate-300 hover:bg-slate-800'
: 'border-slate-300 text-slate-600 hover:bg-slate-100',
].join(' ')}
>
{item.label}
</button>
))}
</div>
);
}