feat(ui): Add Bank Transfer & USSD payment UI flows #25
+2,047
−144
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✨ Features: - Complete Bank Transfer payment screen with account details display - USSD payment screen with bank selection and code generation - Copy-to-clipboard functionality for payment details - Countdown timer for bank transfer expiry - Demo mode fallback when API endpoints are unavailable - Beautiful animations and loading states using Material 3 design 🔧 Improvements: - Fixed GTBank/Zenith bank selection conflict in USSD flow - Updated payment method screen to navigate to new flows - Added proper error handling and user feedback - Responsive design with dark/light theme support 📋 Technical Notes: - Identified API endpoint issues in backend SDK (documented in comments) - Implemented demo mode for testing UI flows independently - Used proper Flutter patterns: StatefulWidget, animations, async handling 🎯 Demo Mode: - Bank Transfer: Generates mock account details for testing - USSD: Simulates USSD code generation for different banks - Both flows show blue notification indicating demo mode Resolves: Payment channel UI implementation for bank transfers and USSD
✨ New Features: - Complete Bank Transfer payment screen with account details display - USSD payment screen with bank selection and code generation - Beautiful animations and loading states for both payment methods - Copy-to-clipboard functionality for payment details - Countdown timers and expiry handling - Demo mode implementation for testing without API dependencies 🐛 Bug Fixes: - Fixed bank selection conflict between GTBank and Zenith Bank - Corrected async/await error in bank transfer screen - Added unique ID-based selection logic for banks - Fixed GTBank USSD code from 057 to 058 🎨 UI/UX Enhancements: - Material 3 design with smooth slide animations - Responsive layouts with proper error handling - Professional loading states with pulse animations - Comprehensive payment instruction displays - Success flow integration 📚 Documentation & Analysis: - Identified incorrect Paystack API endpoints in backend SDK - Documented proper API structure for future fixes - Added demo mode notifications for transparent testing This contribution implements production-ready payment UI flows and provides foundation for Bank Transfer & USSD payments.
Contributor
|
Hi @Kellytomi , thank you so much for your patience and for being excited to contribute! @developerjamiu and I have been carefully shaping the direction of this package and mapping out the roadmap we believe will make it even stronger. Through this process, we’ve restructured a few things and introduced a fresh approach for contributions and the example project. It would be amazing if you could take a look at the latest updates and the contributors’ guide; this way, your input can directly help shape where the project goes next. We’d really value your perspective as we build this together! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What This PR Does
I've implemented complete Bank Transfer and USSD payment UI flows for the Flutter example app. Both screens include smooth animations, proper error handling, and a polished user experience.
New Features Added
Bugs I Fixed
API Issue I Found
While working on this, I discovered the current SDK is calling endpoints that don't exist in the Paystack API:
/ussd/charge,/bank_transfer/charge/chargewithussdorbank_transferobjectsThis is why the network requests fail. The UI handles this gracefully with demo mode.
Testing Done
Screenshots
Notes
The demo mode ensures these features can be tested immediately without needing working API endpoints. Once the backend API endpoints are corrected, these UIs will work with live data seamlessly.