Flutter NFC支付插件fawry_nfc_sdk的使用

Flutter NFC支付插件fawry_nfc_sdk的使用

概览

Fawry NFC SDK允许开发者将其NFC功能无缝集成到他们的Flutter应用中。该SDK支持读写NFC卡,特别适用于电费、燃气费和水费等公用事业费用的支付。

功能

  • 读取NFC卡: 可以扫描NFC卡并获取相关信息。
  • 写入NFC卡: 允许将数据编码到NFC卡上,用于各种用途。

前提条件

在使用Fawry NFC SDK之前,请确保满足以下前提条件:

  • 已设置Flutter开发环境。
  • 成功将Fawry NFC SDK集成到项目中。

pubspec.yaml文件中添加以下依赖:

dependencies:
  fawry_nfc_sdk: ^version_number

^version_number替换为Fawry NFC SDK的最新版本号。

Android设置

要与Android集成,请在build.gradle文件中将最低SDK版本更新为21或更高版本:

android {
    compileSdkVersion flutter.compileSdkVersion
    minSdkVersion 21
    // ...
}

build.gradle文件中,向buildscriptallprojects块中添加以下代码:

repositories {
    google()   
    mavenCentral()
    maven { 
        url 'YOU WILL RECEIVE THIS FROM FAWRY SUPPORT ALONG WITH CREDENTIALS' 
            credentials {
                username = "YOU WILL RECEIVE THIS FROM FAWRY SUPPORT"
                password = "YOU WILL RECEIVE THIS FROM FAWRY SUPPORT"
            }
    }
}

iOS设置

当前版本的Fawry NFC SDK不支持iOS。不过,开发团队正在积极开发未来版本以支持iOS设备。

使用方法

  1. 初始化SDK回调 创建一个initSDKCallback()函数来初始化SDK回调机制,以便接收来自Fawry NFC SDK的响应。该函数设置了一个流监听器来处理回调结果。

    Future<void> initSDKCallback() async {
      try {
        _fawryCallbackResultStream =
            FawryNfcSdk.instance.callbackResultStream().listen((event) {
          setState(() {
            ResponseStatus response = ResponseStatus.fromJson(jsonDecode(event));
            handleResponse(response);
          });
        });
    
        await FawryNfcSdk.instance.initializeSDK(
          token: 'YOUR TOKEN',
          secretKey: 'YOUR SECRET KEY',
        );
      } catch (ex) {
        debugPrint(ex.toString());
      }
    }
    
  2. 处理响应 创建一个handleResponse()函数来处理从Fawry NFC SDK接收到的响应。例如,可以记录响应详情,并通过UI更新响应消息。

    void handleResponse(ResponseStatus response) {
      debugPrint(
          '======== Response ========\n$response\n===========================');
    
      setState(() {
        printedMessage +=
            '\n===========================\n======== Response ========\n$response';
      });
    }
    

    访问任何响应属性。ResponseStatus类包含来自Fawry NFC SDK的响应状态,包括:

    • status: 表示响应状态。
    • message: 提供有关响应的附加信息。
    • data: 包含从卡片返回的数据。
  3. 选择卡片类型 选择一种卡片类型进行扫描或写入。例如:

    CardType selectedCardType = CardType.ELECT;
    

    可用的卡片类型有:

    CardType.WSC // WATER CARDS
    CardType.ELECT // ELECTRICITY CARDS
    CardType.GAS // GAS CARDS
    
  4. 从NFC卡读取 使用_readNFC()函数开始扫描NFC卡。当触发“Scan Card”操作时,该函数会提示Fawry NFC SDK从NFC卡中检索数据。

    Future<void> _readNFC() async {
      try {
        setState(() {
          printedMessage = "Please Put The Card To Scan";
        });
        await FawryNfcSdk.instance.readNFC(cardType: selectedCardType);
      } catch (e) {
        debugPrint('Error reading from NFC: $e');
      }
    }
    
  5. 写入NFC卡 使用_writeNFC()函数将数据编码到NFC卡上。当触发“Write on Card”操作时,该函数会将提供的信息编码到NFC卡上。

    Future<void> _writeNFC() async {
      try {
        setState(() {
          printedMessage = "Please Put The Card To Write";
        });
    
        await FawryNfcSdk.instance.writeNFC(
          cardType: selectedCardType, 
          billEncryptInfoECMC: "<billEncryptInfoECMC>",
          cardMetaData: "<cardMetaData>",
          originalBillingAccount: "<originalBillingAccount>",
        );
      } catch (e) {
        debugPrint('Error writing to NFC: $e');
      }
    }
    

示例代码

以下是完整的示例代码:

import 'dart:async';
import 'dart:convert';

import 'package:fawry_nfc_sdk/model/constants.dart';
import 'package:fawry_nfc_sdk/model/response.dart';
import 'package:flutter/material.dart';

import 'package:fawry_nfc_sdk/fawry_nfc_sdk.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'FAWRY NFC SCANNER'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String printedMessage = '';
  late StreamSubscription? _fawryCallbackResultStream;
  CardType selectedCardType = CardType.ELECT;

  [@override](/user/override)
  void initState() {
    super.initState();
    initSDKCallback();
  }

  Future<void> initSDKCallback() async {
    try {
      _fawryCallbackResultStream =
          FawryNfcSdk.instance.callbackResultStream().listen((event) {
        setState(() {
          ResponseStatus response = ResponseStatus.fromJson(jsonDecode(event));
          handleResponse(response);
        });
      });

      await FawryNfcSdk.instance.initializeSDK(
        token: '', // Replace with your token
        secretKey: '', // Replace with your secret key
      );
    } catch (ex) {
      debugPrint(ex.toString());
    }
  }

  void handleResponse(ResponseStatus response) {
    debugPrint(
        '======== Response ========\n$response\n===========================');

    setState(() {
      printedMessage +=
          '\n===========================\n======== Response ========\n$response';
    });
  }

  [@override](/user/override)
  void dispose() {
    _fawryCallbackResultStream?.cancel();
    super.dispose();
  }

  Future<void> _writeNFC() async {
    try {
      setState(() {
        printedMessage = "Please Put The Card To Write";
      });

      await FawryNfcSdk.instance.writeNFC(
        cardType: selectedCardType, // Use the selected card type
        billEncryptInfoECMC: "NTgs/////wAA//8FI817hb9x8hAAAAD/VgD/////kEIRAgAAAAAAAABQFSEAAAAAAAD//////////////3w3NTAsaAV8AJBCEQIAAAAAAAAQJwAAaAABhIv6/wAAAP//LH56EANkAAAALAEAAJABAAAEZUnwSQIAQB8AAFDDAADIMgAAYOoAAIw8AAD4JAEAiPsDACChBwDQBwAA6AMAAAAAAAAAGAAQAAEFQEIPABQW////BwgGigAgAAgCAQAA6AOYGhb///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9oBWgA/QMAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAECcAAJABAABADQMAyAAAADB1AABkAAAAkF8BAASHAQAAAAAAAAAAADAAAAAAAwAAADAAAAAAAP8AAAA+BxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfDEzLGgFBgBoAHibSwDRARZ8MTAsARAgAf8EAQAAmXwwLHwxNDYskAB1Qe8RSk4vx5ohbzwHxZkNbL55iHJg37/8ewncFYIhEx2s2dnJP1kmbuDCWDRufwvupv998LhwJSO+/kkTsGmczsw4JMNyV3nRT8wauYZNH5lciggfrDrq+XR+HRIAhja7poA3Ovc59KJ8ze9do4mdYgc8clsvYoOOQK0MU4r9TCDPAOrLkvcCtHfzWQGSdgt8",
        cardMetaData: "gABQBxw4OjLoa5t5f3H1fRbpQQlZNIARYIp/eddH/AN9XGV/7SVzagw3Fw7L4U9p+FUSx7+p/bpCwXsD9Tl2kAFPzDLnMMNl8Ac1TAkOGqFEqKWCABR6P9xvnl1D5Z+qQ1H0aXbWAAICAYQAEKSnXQ8Za+mrJZl2d2pbEmk=",
        originalBillingAccount: "000000000000021142900000",
      );
    } catch (e) {
      debugPrint('Error writing to NFC: $e');
    }
  }

  Future<void> _readNFC() async {
    try {
      setState(() {
        printedMessage = "Please Put The Card To Scan";
      });
      await FawryNfcSdk.instance.readNFC(cardType: selectedCardType);
    } catch (e) {
      debugPrint('Error reading from NFC: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(height: 8.0),
            DropdownButton<CardType>(
              value: selectedCardType,
              onChanged: (newValue) {
                setState(() {
                  selectedCardType = newValue!;
                });
              },
              items: const [
                DropdownMenuItem(
                  value: CardType.ELECT,
                  child: Text('ELECTRICITY'),
                ),
                DropdownMenuItem(
                  value: CardType.GAS,
                  child: Text('GAS'),
                ),
                DropdownMenuItem(
                  value: CardType.WSC,
                  child: Text('WATER'),
                ),
              ],
            ),
            const Text(
              'Response Messages:',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            Expanded(
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    printedMessage,
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      fontSize: 16.0,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          const SizedBox(height: 16.0),
          FloatingActionButton.extended(
            onPressed: _readNFC,
            tooltip: 'Read from NFC',
            label: const Text('Scan Card'),
            icon: const Icon(Icons.pageview),
          ),
          const SizedBox(height: 16.0),
          FloatingActionButton.extended(
            onPressed: _writeNFC,
            tooltip: 'Write to NFC',
            label: const Text('Write on Card'),
            icon: const Icon(Icons.create),
          ),
          const SizedBox(height: 16.0),
        ],
      ),
    );
  }
}

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

1 回复

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


fawry_nfc_sdk 是一个用于在 Flutter 应用中实现 NFC 支付的插件。它通常用于与 Fawry 支付系统集成,允许用户通过 NFC 技术进行支付。以下是如何在 Flutter 项目中使用 fawry_nfc_sdk 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 fawry_nfc_sdk 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  fawry_nfc_sdk: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 初始化 SDK

在你的 Flutter 应用中,你需要在启动时初始化 fawry_nfc_sdk。通常,这会在 main.dart 文件中的 main 函数中进行。

import 'package:fawry_nfc_sdk/fawry_nfc_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Fawry NFC SDK
  await FawryNfcSdk.initialize(
    apiKey: 'YOUR_API_KEY',  // 你的 Fawry API 密钥
    merchantCode: 'YOUR_MERCHANT_CODE',  // 你的商户代码
    baseUrl: 'YOUR_BASE_URL',  // Fawry API 的基础 URL
  );
  
  runApp(MyApp());
}

3. 使用 NFC 支付功能

在你的应用中,你可以使用 FawryNfcSdk 提供的功能来处理 NFC 支付。以下是一个简单的示例,展示如何启动 NFC 支付。

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

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  Future<void> startNfcPayment() async {
    try {
      // 启动 NFC 支付
      final paymentResponse = await FawryNfcSdk.startNfcPayment(
        amount: 100.0,  // 支付金额
        customerEmail: 'customer@example.com',  // 客户邮箱
        customerMobile: '0123456789',  // 客户手机号
      );
      
      // 处理支付响应
      if (paymentResponse.success) {
        print('Payment successful: ${paymentResponse.referenceNumber}');
      } else {
        print('Payment failed: ${paymentResponse.errorMessage}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NFC Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: startNfcPayment,
          child: Text('Start NFC Payment'),
        ),
      ),
    );
  }
}

4. 处理支付结果

startNfcPayment 方法中,你可以根据 paymentResponse 来处理支付结果。你可以显示成功或失败的消息,或者进行其他业务逻辑处理。

5. 权限和配置

确保你的应用已经请求了必要的权限,例如 NFC 权限。你需要在 AndroidManifest.xml 中添加以下权限:

<uses-permission android:name="android.permission.NFC" />
回到顶部