Flutter信用卡扫描插件core_card_io_beta的使用

Flutter信用卡扫描插件core_card_io_beta的使用

CardIO 插件用于 Flutter

这是一个用于在 iOS 和 Android 上通过摄像头扫描信用卡的 Flutter 插件。它使用了 CardIO 库来实现功能。详情参见 CardIO iOS SDK 和 CardIO Android SDK。

注意：此插件仍在开发中，某些 API 可能尚未可用。欢迎提供反馈和拉取请求！

安装

首先，在你的 pubspec.yaml 文件中添加 core_card_io_beta 作为依赖项。

iOS

在你的 Info.plist 文件中（位于 <项目根目录>/ios/Runner/Info.plist），添加以下键：

<key>NSCameraUsageDescription</key>
<string>为了扫描信用卡，我们需要使用您的相机。</string>

运行 pod install。

Android

在你的 Android 清单文件中添加以下权限：

<uses-permission android:name="android.permission.CAMERA"/>

在你的应用中添加 card.io 的开源许可信息。

示例

查看示例文件夹。

Map<String, dynamic> details = await CoreCardIo.scanCard(
  requireExpiry: true,
  scanExpiry: true,
  requireCVV: true,
  requirePostalCode: true,
  restrictPostalCodeToNumericOnly: true,
  requireCardHolderName: true,
  scanInstructions: "请将卡片放入框内",
);

响应

CoreCardIoResponse(
  cardholderName: "John Doe",
  cardNumber: "1234 5678 9876 1236",
  redactedCardNumber: "**** **** **** 1236",
  expiryMonth: 12,
  expiryYear: 2022,
  cvv: 123,
  postalCode: "93748"
)

示例代码

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

import 'package:flutter/services.dart';
import 'package:core_card_io_beta/core_card_io_beta.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  CoreCardIoResponse? card;

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

  Future<void> scanCard() async {
    if (!mounted) return;

    final card = await CoreCardIo.scanCard(
      hideCardIOLogo: true,
      requireExpiry: true,
      scanExpiry: true,
      suppressManualEntry: true
    );

    setState(() => this.card = card);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('扫描的卡片: ${card?.cardNumber ?? '无'}'),
              SizedBox(height: 8.0),
              OutlinedButton(onPressed: scanCard, child: Text("扫描卡片"))
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter信用卡扫描插件core_card_io_beta的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter信用卡扫描插件core_card_io_beta的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 core_card_io_beta Flutter 插件来扫描信用卡信息的示例代码。这个插件允许你在Flutter应用中集成信用卡扫描功能。

首先，确保你已经在 pubspec.yaml 文件中添加了 core_card_io_beta 依赖：

dependencies:
  flutter:
    sdk: flutter
  core_card_io_beta: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的 Flutter 应用中，你可以按照以下步骤来使用这个插件：

  1. 导入插件

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

import 'package:core_card_io_beta/core_card_io_beta.dart';
import 'package:flutter/material.dart';
  1. 创建一个按钮来启动信用卡扫描

在你的界面上添加一个按钮，点击按钮时启动信用卡扫描：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Credit Card Scanner Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _cardNumber = '';
  String _expiryDate = '';
  String _cvv = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Credit Card Scanner Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _startCreditCardScan,
              child: Text('Scan Credit Card'),
            ),
            SizedBox(height: 20),
            Text('Card Number: $_cardNumber'),
            SizedBox(height: 10),
            Text('Expiry Date: $_expiryDate'),
            SizedBox(height: 10),
            Text('CVV: $_cvv'),
          ],
        ),
      ),
    );
  }

  Future<void> _startCreditCardScan() async {
    try {
      var result = await CardIO.scanCard(
        requireExpiry: true,
        requireCVV: true,
        requirePostalCode: false,
        scanInstructions: "Hold your card up to the camera",
        localization: CardIOLocalization(
          cancelButtonText: "Cancel",
          doneButtonText: "Done",
          enterCardManuallyButtonText: "Enter manually",
        ),
      );

      if (result != null) {
        setState(() {
          _cardNumber = result.cardNumber;
          _expiryDate = result.expiryMonth + '/' + result.expiryYear.toString().substring(2);
          _cvv = result.cvv;
        });
      }
    } catch (e) {
      print("Error scanning card: $e");
    }
  }
}
  1. 处理扫描结果

在 _startCreditCardScan 方法中，我们调用 CardIO.scanCard 方法来启动扫描，并在扫描完成后处理结果。如果扫描成功，我们将结果更新到界面上。

注意事项

  • 权限：确保你的应用具有相机访问权限。你可能需要在 AndroidManifest.xml 和 Info.plist 中添加相关权限声明。
  • iOS设置：对于iOS，你可能需要在Xcode中进行一些额外的配置，比如启用相机权限和链接必要的库。

这个示例代码展示了如何使用 core_card_io_beta 插件来扫描信用卡信息并在Flutter应用中显示。根据你的具体需求，你可能需要进一步调整UI和逻辑。

回到顶部