🚀 Flutter Paymob — Accept Payments with Zero Hassle #

Integrate Paymob card & wallet payments inside your Flutter app with ease. Secure, fast, and ready for production.

📥 Installation #

Just add to your pubspec.yaml:

flutter_paymob: ^latest_version

🔧 Setup & Initialization #

Before your app runs, initialize:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await FlutterPaymob.instance.initialize(
    apiKey: "YOUR_PAYMOB_API_KEY",
    integrationID: 123456,         // Card integration ID
    walletIntegrationId: 654321,   // Wallet integration ID
    iFrameID: 789012,              // Paymob iframe ID
  );

  runApp(const MyApp());
}

⚡ Quick Usage Guide #

Pay with Card 💳 #

await FlutterPaymob.instance.payWithCard(
  title: Text("Card Payment"), // Optional - Custom title AppBar
  appBarColor: Colors.blueAccent, // Optional - Custom AppBar color
  context: context,
  currency: "EGP", 
  amount: 150, 
  onPayment: (response) {
    if (response.success) {
      print("🎉 Payment Success! TxID: ${response.transactionID}");
    } else {
      print("❌ Payment Failed: ${response.message}");
    }
  },
);

Pay with Wallet 📱 #

await FlutterPaymob.instance.payWithWallet(
title: Text("Card Payment"), // Optional - Custom title AppBar
appBarColor: Colors.blueAccent, // Optional - Custom AppBar color
  context: context,
  currency: "EGP",
  amount: 150,
  number: "01010101010",
  onPayment: (response) {
    if (response.success) {
      print("🎉 Wallet Payment Successful");
    } else {
      print("❌ Wallet Payment Failed");
    }
  },
);

💡 Response Object Breakdown #

🧪 Test Credentials #

🚨 Important Notes #

• Webhook integration is a must! Always verify transactions on your backend with Paymob webhooks to prevent fraud.
• Customize UI elements (title, appBarColor) to match your brand.
• Use sandbox keys during development to avoid live charges.
• Error Handling: Always wrap payment calls with try-catch to gracefully handle network or API failures.
• Logging: Log transaction attempts and responses for debugging and auditing.
• Localization: You can customize strings/messages in your app UI to support multiple languages.
• Security: Never expose your API keys or sensitive info in the client code; keep them safe on the server when possible.

🔄 Handling Payment States #

The onPayment callback triggers on success, failure, or cancellation. Use the response.success boolean and response.message to determine the payment state and update your UI accordingly.

🛠️ Troubleshooting #

• Blank iframe or webview?

  • Check your internet connection.
  • Make sure your iFrame ID and payment tokens are valid and not expired.
  • Verify your Paymob account and integration settings.

• PlatformException about view creation?

  • Make sure you are using the latest webview_flutter package compatible with your Flutter version.
  • Avoid creating multiple instances of the webview controller simultaneously.

• Payment not completing or stuck?

  • Confirm your API credentials and integration IDs.
  • Enable verbose logging if available to inspect requests and responses.

🔗 Useful Links #

• Paymob API Docs

📞 Contact #

Need help or want to customize? Reach out to me: Ahmed Hosni - LinkedIn

Happy coding & smooth payments! 🎉 #