Flutter支付集成插件fonepay

Flutter支付集成插件fonepay_flutter的使用

安装插件

首先，你需要在 pubspec.yaml 文件中添加 fonepay_flutter 作为依赖项。

dependencies:
  fonepay_flutter: ^1 latest version

导入包并创建配置实例

在 Dart 文件中导入 fonepay_flutter 包，并创建一个 FonePayConfig 实例来存储支付信息。

import 'package:fonepay_flutter/fonepay_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FonePay Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const FonePayApp(title: 'FonePay Payment'),
    );
  }
}

class FonePayApp extends StatefulWidget {
  const FonePayApp({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<FonePayApp> createState() => _FonePayAppState();
}

class _FonePayAppState extends State<FonePayApp> {
  String refId = '';
  String hasError = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            /// Example Use case - 1
            FonePayButton(
              paymentConfig: FonePayConfig.dev(
                amt: 10.0,
                r2: 'https://www.marvel.com/hello',
                ru: 'https://www.marvel.com/hello',
                r1: 'qwq',
                prn: 'PD-2-${FonePayUtils.generateRandomString(len: 2)}',
              ),
              width: 100,
              onFailure: (result) async {
                setState(() {
                  refId = '';
                  hasError = result;
                });
                if (kDebugMode) {
                  print(result);
                }
              },
              onSuccess: (result) async {
                setState(() {
                  hasError = '';
                  refId = result.uid!;
                });
                if (kDebugMode) {
                  print(result.toJson());
                }
              },
            ),

            /// Example Use case - 2
            TextButton(
              onPressed: () async {
                final result = await FonePay.i.init(
                    context: context,
                    fonePayConfig: FonePayConfig.dev(
                      amt: 10.0,
                      r2: 'https://www.marvel.com/hello',
                      ru: 'https://www.marvel.com/hello',
                      r a: 'qwq',
                      prn: 'PD-2-${FonePayUtils.generateRandomString(len: 2)}',
                    ));
                if (result.hasData) {
                  final response = result.data!;
                  setState(() {
                    hasError = '';
                    refId = response.uid!;
                  });
                  if (kDebugMode) {
                    print(response.toJson());
                  }
                } else {
                  setState(() {
                    refId = '';
                    hasError = result.error!;
                  });
                  if (kDebugMode) {
                    print(result.error);
                  }
                }
              },
              child: const Text('Pay with FonePay'),
            ),
            if (refId.isNotEmpty)
              Center(
                  child: Text('Console: Payment Success, Ref Id: $refId',
                      textAlign: TextAlign.center)),
            if (hasError.isNotEmpty)
              Center(
                  child: Text(
                'Console: Payment Failed, Message: $hasError',
                textAlign: TextAlign.center,
              )),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

更多关于Flutter支付集成插件fonepay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•5 天前

更多关于Flutter支付集成插件fonepay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中集成并使用fonepay_flutter插件的示例代码。请注意，实际使用时，你需要确保已经安装了Flutter和Dart开发环境，并且已经在项目中添加了fonepay_flutter依赖。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加fonepay_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  fonepay_flutter: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入插件

在你的Dart文件中导入fonepay_flutter插件：

import 'package:fonepay_flutter/fonepay_flutter.dart';

步骤 3: 初始化并配置Fonepay

在你的应用程序中，你可能需要在某个地方（如main.dart或特定的支付页面）初始化并配置Fonepay。以下是一个简单的示例：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fonepay Integration Example'),
        ),
        body: Center(
          child: FonepayPaymentButton(
            merchantId: '你的商户ID', // 替换为你的实际商户ID
            publicKey: '你的公钥',    // 替换为你的实际公钥
            amount: 1000,             // 支付金额，单位：尼泊尔卢比（示例）
            currencyCode: 'NPR',      // 货币代码
            orderRef: '订单参考号',   // 订单参考号，用于唯一标识订单
            onSuccess: (result) {
              // 支付成功回调
              print('支付成功: $result');
            },
            onError: (error) {
              // 支付失败回调
              print('支付失败: $error');
            },
          ),
        ),
      ),
    );
  }
}

// 自定义的Fonepay支付按钮组件（可选）
class FonepayPaymentButton extends StatelessWidget {
  final String merchantId;
  final String publicKey;
  final int amount;
  final String currencyCode;
  final String orderRef;
  final VoidCallback onSuccess;
  final VoidCallback onError;

  const FonepayPaymentButton({
    Key? key,
    required this.merchantId,
    required this.publicKey,
    required this.amount,
    required this.currencyCode,
    required this.orderRef,
    required this.onSuccess,
    required this.onError,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          // 初始化Fonepay
          await FonepayFlutter.initialize(
            merchantId: merchantId,
            publicKey: publicKey,
          );

          // 发起支付请求
          var result = await FonepayFlutter.startPayment(
            amount: amount,
            currencyCode: currencyCode,
            orderRef: orderRef,
          );

          // 支付成功回调
          onSuccess?.call(result);
        } catch (e) {
          // 支付失败回调
          onError?.call(e);
        }
      },
      child: Text('支付'),
    );
  }
}

注意事项

商户ID和公钥：确保你已经从Fonepay获取了正确的商户ID和公钥，并替换到代码中。
支付金额和货币代码：根据你的实际需求设置支付金额和货币代码。
订单参考号：确保每个订单都有一个唯一的参考号，以便在后台系统中进行订单管理。
回调处理：根据你的应用逻辑处理支付成功和失败的回调。

这个示例提供了一个基本的集成框架，你可以根据需要进行扩展和修改。在实际应用中，你可能还需要处理更多的支付细节和异常情况。