Flutter支付集成插件flutter_paymob的使用

Flutter Paymob

Flutter Paymob 是一个允许 Flutter 应用程序通过 Paymob 服务接受在线银行卡和电子钱包支付的库。

Inspired by Ahmed Abogameel!

🚀 安装

在您的应用的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_paymob: latest_version

⭐ 初始化

为了初始化 FlutterPaymob 实例，您可以使用 initialize 方法。以下是如何初始化它的示例代码：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterPaymob.instance.initialize(
    apiKey: "auth key", // 从仪表板选择设置 -> 账户信息 -> API Key 
    integrationID: 123456, // 从仪表板选择开发者 -> 支付集成 -> 在线卡 ID 
    walletIntegrationId: 123456, // 从仪表板选择开发者 -> 支付集成 -> 在线钱包
    iFrameID: 12346, // 从 Paymob 选择开发者 -> iframes 
  );
  runApp(const MyApp());
}

📌 注意：您也可以创建自己的实例：

final FlutterPaymob flutterPaymob = FlutterPaymob();
flutterPaymob.initialize(
  apiKey: "auth key",
  integrationID: 123456,
  walletIntegrationId: 123456,
  iFrameID: 12346,
);

💡 使用

初始化后，您可以使用 FlutterPaymob 实例进行支付尝试，包括银行卡支付和钱包支付。

💳 卡支付

要使用 FlutterPaymob 实例发起卡支付，可以使用 payWithCard 方法。以下是具体用法：

ElevatedButton(
  onPressed: () {
    FlutterPaymob.instance.payWithCard(
      context: context,
      currency: "EGP",
      amount: 100,
      onPayment: (response) {
        if (response.success == true) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(response.message ?? "Success")),
          );
        }
      },
    );
  },
  child: const Text("Pay with card"),
),

📲 钱包支付

要使用 FlutterPaymob 实例发起钱包支付，可以使用 payWithWallet 方法。以下是具体用法：

ElevatedButton(
  onPressed: () {
    FlutterPaymob.instance.payWithWallet(
      context: context,
      currency: "EGP",
      amount: 100,
      number: "01010101010",
      onPayment: (response) {
        if (response.success == true) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(response.message ?? "Success")),
          );
        }
      },
    );
  },
  child: const Text("Pay With Wallet"),
),

🔧 PaymobResponse

测试

您可以使用以下测试数据来执行测试交易：

MasterCard

Wallet

示例代码

以下是一个完整的示例代码，展示了如何集成 Flutter Paymob 插件并实现卡支付和钱包支付功能：

import 'package:flutter/material.dart';
import 'package:flutter_paymob/flutter_paymob.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FlutterPaymob.instance.initialize(
    apiKey: "auth key",
    integrationID: 123456,
    walletIntegrationId: 123456,
    iFrameID: 123456,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Paymob'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                FlutterPaymob.instance.payWithCard(
                  context: context,
                  currency: "EGP",
                  amount: 100,
                  onPayment: (response) {
                    if (response.success == true) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text(response.message ?? "Success")),
                      );
                    }
                  },
                );
              },
              child: const Text("Pay with card"),
            ),
            ElevatedButton(
              onPressed: () {
                FlutterPaymob.instance.payWithWallet(
                  context: context,
                  currency: "EGP",
                  amount: 100,
                  number: "01010101010",
                  onPayment: (response) {
                    if (response.success == true) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text(response.message ?? "Success")),
                      );
                    }
                  },
                );
              },
              child: const Text("Pay With Wallet"),
            ),
          ],
        ),
      ),
    );
  }
}

希望以上内容能帮助您成功集成 Flutter Paymob 插件！如果有任何问题或需要进一步的帮助，请随时联系我。