Payment Transaction

Payment Transaction is a button in the UI HUB buttons collection. A multi-phase button that transitions through idle, loading (spinner), success (checkmark), and error states. Each phase has dedicated micro-animations.

The component is driven by 6 documented props (amount, currency, onSuccess, onError, className, loadingDuration), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: State machine: idle → loading → success/error; Spinner animation during loading; AnimatePresence for icon transitions.

Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.