feat(ui): elevate user feedback with Lottie animations and haptics

[0dillon]

Summary

The current checkout experience is functionally sound but feels sterile. At the point of sale, merchants rely heavily on immediate, unmistakable feedback to confirm that a transaction was successful, especially in fast-paced or noisy environments. A simple text change is insufficient.

We need to integrate lottie-react to trigger high-quality, fluid success animations (like a dynamic checkmark) the moment the WebSocket confirms payment. Furthermore, auditory feedback (a subtle success chime or an error buzz) and haptic feedback (using the navigator.vibrate API) must be synchronized with these visual states to create a truly premium, multi-sensory checkout experience.

Acceptance Criteria

• Integrate lottie-react and source a premium success animation JSON.
• Implement the Web Audio API to play a success chime on payment confirmation.
• Implement the Vibration API to provide tactile feedback on low-end Androids.
• Add toggles in the merchant settings to disable sound and haptics.

Tech Stack

Next.js 14, React, Tailwind CSS, Lottie, Web APIs.