Google Pay UI Clone with Flutter and Bloc Pattern

Preview of the Google Pay UI Clone on mobile devices:

1691952288352687.mp4

Preview of the Google Pay UI Clone on web browsers:

web_preview.mp4

This project is a Flutter-based clone of the Google Pay user interface, showcasing a streamlined payment process using the BLoC architecture.

Features

Home Page

The Home Page allows users to choose the number of UPI PIN fields for enhanced security during PIN entry.

Payment Page

• Enter an amount, ensuring it is at least 1 rupee.
• The text field supports only digits and displays the amount in comma-separated format (e.g., 55,55,555).
• Upon proceeding, a loader is displayed before navigating to the UPI PIN page.

UPI PIN Page

• Users can view payment details by tapping the down arrow.
• Show/hide the UPI PIN.
• A custom keyboard is provided for securely entering the UPI PIN.
• Clicking the check icon validates the PIN and navigates to the success page.

Success Page

• Celebrate successful payment with an animated check icon and animated particles.
• Click "Done" to return to the home screen.

Credits

This project draws inspiration from the Google Pay app UI and was implemented using the Flutter framework.