Pay Button
Pay → morphs into a spinner with a card swipe → blooms into a check with confetti (or shakes on decline).
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Wire `onPay` to your real payment call and resolve true/false. The button tells the whole story without a modal.
Installation
$ npx shadcn@latest add https://guetix.com/r/pay-button.json
Uses the shadcn CLI. It creates components/guetix/pay-button.tsx and installs nothing else.
Usage
example.tsx
import { PayButton } from "@/components/guetix/pay-button";
export default function Example() {
return <PayButton />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | string | "$49.00" | Displayed amount. |
| onPay | () => Promise<boolean> | — | Your payment call. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- aria-busy while processing; result announced (aria-live).