Flutter支付集成插件paymob_payment的使用

轻松地在您的Flutter应用中通过在线卡接受付款。

🚀 安装

在您的应用的pubspec.yaml文件中的dependencies部分添加以下内容：

paymob_payment : latest_version

🔨 初始化

使用单例初始化：

PaymobPayment.instance.initialize(
  apiKey: "", // 从仪表板选择设置 -> 账户信息 -> API Key
  integrationID: 123456, // 从仪表板选择开发者 -> 支付集成 -> 在线卡ID
  iFrameID: 123456, // 从paymob选择开发者 -> iFrames
);

或者创建自己的实例：

final PaymobPayment paymobPayment = PaymobPayment();
paymobPayment.initialize(
  apiKey: "", 
  integrationID: 123456, 
  iFrameID: 123456, 
);

🔖 使用

调用pay方法进行支付：

final PaymobResponse? response = await PaymobPayment.instance.pay(
  context: context,
  currency: "EGP",
  amountInCents: "20000", // 200 EGP
  onPayment: (response) => setState(() => this.response = response), // 可选
)

📨 PaymobResponse

🧪 测试卡片

✅ 成功支付

❎ 拒绝支付

将CVV改为111或将到期年份改为20

注意： 您可能需要联系paymob支持来激活您的测试卡

示例代码

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

void main() {
  // 测试信息，请勿在您的应用中使用
  PaymobPayment.instance.initialize(
    apiKey: "ZXlKaGJHY2lPaUpJVXpVeE1pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SmpiR0Z6Y3lJNklrMWxjbU5vWVc1MElpd2libUZ0WlNJNkltbHVhWFJwWVd3aUxDSndjbTltYVd4bFgzQnJJam8yT1RBMk56VjkuX3lZTklHVGkwVXBLTmVzdjh0Q0dxc0ZlTmVkNnJobGFid2RoUXlJNFFuMlBUZ2k1Q3VyaGFxbmt2SGlrbXo1enBzaUdxYmhiU0pDU3VCTzA4bGxpcFE=",
    integrationID: 3364826,
    iFrameID: 728907,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
          color: Color(0xFF007aec),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(const Color(0xFF007aec)),
          )
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: const PaymentView(),
    );
  }
}

class PaymentView extends StatefulWidget {
  const PaymentView({super.key});

  [@override](/user/override)
  State<PaymentView> createState() => _PaymentViewState();
}

class _PaymentViewState extends State<PaymentView> {
  PaymobResponse? response;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Paymob'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Image.network('https://paymob.com/images/logoC.png'),
            const SizedBox(height: 24),
            if (response != null)
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text("成功 ==》 ${response?.success}"),
                  const SizedBox(height: 8),
                  Text("交易ID ==》 ${response?.transactionID}"),
                  const SizedBox(height: 8),
                  Text("消息 ==》 ${response?.message}"),
                  const SizedBox(height: 8),
                  Text("响应码 ==》 ${response?.responseCode}"),
                  const SizedBox(height: 16),
                ],
              ),
            ElevatedButton(
              child: const Text('支付200 EGP'),
              onPressed: () => PaymobPayment.instance.pay(
                context: context,
                currency: "EGP",
                amountInCents: "20000",
                onPayment: (response) => setState(() => this.response = response),
              ),
            )
          ],
        ),
      ),
    );
  }
}