Cloud Credit Top-Up Modal Flow

I'll create a complete cloud credit top-up flow with multiple modals that handle:

1. Entering the credit amount
2. Redirecting to payment provider
3. Showing success confirmation with updated balance

How It Works

I've created a complete cloud credit top-up flow with three main steps:

1. Amount Entry Modal

   • Users enter the amount they want to add to their cloud credits
   • Input validation ensures only valid amounts can be submitted
   • Clear UI with dollar sign prefix for better user experience

2. Payment Provider Transition

   • Shows order summary with amount breakdown
   • Simulates redirection to payment provider
   • Includes loading state during payment processing

3. Success Confirmation

   • Displays success message with check icon
   • Shows the new balance after the transaction
   • Provides a "Done" button to close the modal

The component is designed to be easily integrated into any dashboard. In this example, I've included a simple dashboard layout with a current balance display and recent transactions table to provide context.

Key Features

• Multi-step modal flow that guides users through the entire process
• Form validation to prevent invalid amounts
• Loading states during payment processing
• Success confirmation with updated balance
• Responsive design that works on all screen sizes
• Clean UI with appropriate visual feedback at each step

You can customize the styling, validation rules, and payment provider integration as needed for your specific implementation.