# How do I design a UPI payment success animation?

> Design the whole payment state machine, not just the success tick: processing, success, pending, failed and timed out. Show success only after your server confirms it, keep the success animation short (about one second) with the amount and payee clearly visible, and make pending and failure states as clear as success. Users screenshot these screens as proof, so the final frame must be readable and stable.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-design-upi-payment-success-animation/

## Key takeaways

- States: processing, success, pending, failed, timed out
- Never show success before the payment is confirmed
- Final frame: amount, payee, time and reference ID, readable and still
- Keep the animation short; sound and haptics are optional extras
- Design pending as carefully as success

## Frequently asked questions

### How long should a payment success animation be?

About one second, then a still, readable confirmation screen.

### Should I add a sound on payment success?

It can help in noisy shops, but keep it short, optional and silent when the phone is on silent.

### What should a pending payment screen say?

That the payment is being confirmed, that money is safe, and when the user will know. Offer a way to check status.

### Can I reuse one animation for web and app?

Yes, if you use a runtime format with players on both, such as Lottie, Rive or ExodeUI.

## Related

- [Checkmark animation guide](https://www.exodeui.com/learn/checkmark-animation)
- [Error and success states with state machines](https://www.exodeui.com/learn/error-success-states-state-machines)
- [How should a loading state work?](https://www.exodeui.com/questions/how-should-a-loading-state-work)
- [What are UI states?](https://www.exodeui.com/questions/what-are-ui-states)