Skip to content

README.md

Latest commit

 

History

History
154 lines (106 loc) · 3.97 KB

README.md

File metadata and controls

154 lines (106 loc) · 3.97 KB
Raw

React Native Paystack WebView Example

This is a clean, interactive example showcasing the React Native Paystack WebView library in action. The example provides a streamlined payment interface that demonstrates the library's core functionality.

🚀 Features

  • Clean UI/UX: Modern, minimalist design with smooth interactions
  • Real Paystack Integration: Uses the actual Paystack WebView library
  • Form Validation: Email and amount validation with real-time feedback
  • Payment Processing: Simulates the complete payment flow
  • Mobile Optimized: Touch-friendly interface with proper keyboard handling
  • Status Bar Integration: Proper status bar styling for iOS/Android

🎯 Example Features

Interactive Payment Flow

  • Enter email and amount
  • Real-time form validation
  • Process payment through Paystack WebView
  • Success/error handling with user feedback
  • Clean, intuitive interface

UI Components

  • Header: Gradient background with payment info and amount display
  • Form Inputs: Email and amount with validation and proper keyboard handling
  • Payment Button: Dynamic state with loading indicator
  • Example Notice: Clear indication this is a example environment
  • Status Bar: Light status bar for better visual integration

🛠️ Technical Details

Integration

  • Uses PaystackProvider from the development library
  • Implements usePaystack hook for payment processing
  • Proper TypeScript types and error handling
  • Safe area handling for different device types

Styling

  • Modern color scheme with Paystack branding
  • Smooth animations and transitions
  • Responsive design for different screen sizes
  • Proper spacing and typography
  • Status bar integration

Validation

  • Email format validation
  • Amount validation (positive numbers only)
  • Required field validation
  • Real-time feedback

🚀 Running the Example

  1. Start the development server:

    yarn start
# or
npm start

  2. Open on your device:

    • Scan the QR code with Expo Go app
    • Or press 'i' for iOS simulator
    • Or press 'a' for Android emulator

  3. Test the payment flow:

    • Enter a valid email (e.g., test@example.com)
    • Enter an amount (e.g., 5000)
    • Tap "Pay" to initiate payment
    • Experience the WebView integration

📱 Example Screenshots

🎥 Watch the example video on Imgur

🔧 Configuration

Paystack Setup

The example uses a test public key. To use your own:

  1. Replace the public key in app/_layout.tsx:

    publicKey = 'pk_test_YOUR_TEST_KEY_HERE';

  2. For production, use your live key:

    publicKey = 'pk_live_YOUR_LIVE_KEY_HERE';

Customization

  • Modify colors in the component styles
  • Update validation rules
  • Customize success/error messages
  • Adjust status bar styling

🎨 Design System

Colors

  • Primary: #667eea (Paystack Blue)
  • Background: #f8fafc (Light Gray)
  • Text: #1a202c (Dark Gray)
  • Input Border: #e2e8f0 (Light Gray)
  • Success: #48bb78 (Green)
  • Error: #f56565 (Red)

Typography

  • Headers: Bold, 24px
  • Body: Regular, 16px
  • Labels: Semi-bold, 16px
  • Amount Display: Bold, 32px

Spacing

  • Consistent 8px grid system
  • Proper padding and margins
  • Touch-friendly button sizes
  • Safe area handling

🔒 Security

  • SSL encryption notice
  • Secure payment processing
  • No sensitive data stored
  • Example environment only

📄 License

This example is part of the React Native Paystack WebView project and follows the same MIT license.

🤝 Contributing

Contributing guide

🔗 Links

Enjoy testing the React Native Paystack WebView library! 🎉