Frontend: Add Multi-Step Payment Flow Wizard for Complex Transactions

[Smartdevs17]

Context

Complex payments (multi-party, multi-chain, escrow, subscriptions) require step-by-step configuration that is confusing in a single form.

Current Limitation/Problem

Payment creation forms try to handle all transaction types in one view, resulting in a cluttered interface with conditional fields that confuse users.

Expected Outcome

A step-by-step payment wizard that adapts to the transaction type, guiding users through each stage: select type, configure parameters, review, and confirm. Progress is saved across sessions.

Acceptance Criteria

• Wizard adapts steps based on payment type (simple, escrow, subscription, batch)
• Progress indicator with step navigation (back/skip/next)
• Form state preserved on page refresh (localStorage)
• Real-time validation per step with inline errors
• Summary/review step before confirmation
• Support for draft saving and resuming later
• Responsive design with mobile-optimized layout
• Analytics tracking step completion rates and dropoffs

Technical Scope

• frontend/src/app/payments/create/ - wizard route
• frontend/src/components/payments/wizard/ - wizard step components
• frontend/src/components/payments/wizard/steps/ - individual steps
• Zustand store for wizard state with localStorage persistence
• React Hook Form with Zod validation per step
• Edge cases: browser back/forward, concurrent wizard sessions, validation cross-dependencies

[dimka90]

@dimka90 has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Can i work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @dimka90 to this issue.

[drips-wave]

Congratulations, @dimka90! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @dimka90: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @dimka90 as part of the Stellar Wave Program's 6th Wave 🥳

😎 @dimka90: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.