Flutter卡片展示插件card_flutter的使用

Flutter卡片展示插件card_flutter的使用

在Flutter应用中集成Card SDK可以帮助你实现卡片支付功能。以下是关于如何使用card_flutter插件的完整示例和详细步骤。

介绍

在开始开发之前，确保你的项目满足以下要求：

• iOS 13.0+
• Dart 3.0.0+
• Java版本11
• Android SDK/API级别至少为24
• 需要在iOS项目的info.plist中添加相机权限以支持卡片扫描功能。
• 在Android项目的manifest文件中添加互联网权限以支持在线支付。

<key>NSCameraUsageDescription</key> 
<string>Card SDK needs it for scanner functionality</string>

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

示例演示

步骤1：需求

确保你的项目满足上述要求，并准备好必要的API密钥。

步骤2：获取公共密钥

访问Tap公司的注册页面并注册你的包名以获取所需的Tap Key。

步骤3：安装

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  card_flutter: 1.0.8

然后在你的代码库中导入该插件：

import 'package:card_flutter/card_flutter.dart';

步骤4：集成Card-Flutter

这里提供简单集成和高级集成两种方式。我们将主要关注简单集成。

简单集成

创建一个包含必要参数的Map对象，并将其传递给TapCardViewWidget。

Map<String, dynamic> parameters = {
  "customer": {
    "name": [
      {"first": "TAP", "middle": "", "lang": "en", "last": "PAYMENTS"}
    ],
    "contact": {
      "email": "tap@tap.company",
      "phone": {"countryCode": "+965", "number": "88888888"}
    }
  },
  "purpose": "Charge",
  "operator": {"publicKey": "pk_test_YhUjg9PNT8oDlKJ1aE2fMRz7"},
  "scope": "Token",
  "order": {
    "description": "",
    "currency": "SAR",
    "amount": 1.0
  }
};

将这些参数传递给TapCardViewWidget：

TapCardViewWidget(
  sdkConfiguration: parameters,
  generateToken: generateToken,
);

完整代码示例

import 'package:card_flutter/card_flutter.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CardViewScreen extends StatefulWidget {
  final Map<String, dynamic> dictionaryMap;

  const CardViewScreen({super.key, required this.dictionaryMap});

  @override
  State<CardViewScreen> createState() => _CardViewScreenState();
}

class _CardViewScreenState extends State<CardViewScreen> {
  dynamic mCardSDKResponse;
  bool generateToken = false;
  bool showTapTokenButton = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
        leading: IconButton(
          onPressed: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(builder: (context) => const ConfigSettingsScreen()),
              (route) => false,
            );
          },
          icon: const Icon(CupertinoIcons.back),
        ),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TapCardViewWidget(
            sdkConfiguration: widget.dictionaryMap,
            onReady: () {
              setState(() {
                showTapTokenButton = true;
              });
            },
            onFocus: () {
              setState(() {
                generateToken = false;
              });
            },
            onSuccess: (String? success) {
              setState(() {
                mCardSDKResponse = success.toString();
                generateToken = false;
              });
            },
            onValidInput: (String? validInput) {
              setState(() {
                mCardSDKResponse = validInput.toString();
                generateToken = false;
              });
            },
            onHeightChange: (String? heightChange) {
              setState(() {
                mCardSDKResponse = heightChange.toString();
              });
            },
            onBinIdentification: (String? bindIdentification) {
              setState(() {
                mCardSDKResponse = bindIdentification.toString();
              });
            },
            onChangeSaveCard: (String? saveCard) {
              setState(() {
                mCardSDKResponse = saveCard.toString();
              });
            },
            onError: (String? error) {
              setState(() {
                mCardSDKResponse = error.toString();
                generateToken = false;
              });
            },
            generateToken: generateToken,
            cardNumber: "512345000000****",
            cardExpiry: "01/39",
          ),
          const SizedBox(height: 10),
          Visibility(
            visible: showTapTokenButton,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: FilledButton(
                onPressed: () {
                  setState(() {
                    generateToken = true;
                  });
                },
                style: FilledButton.styleFrom(
                  fixedSize: Size(MediaQuery.sizeOf(context).width * 0.96, 50),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                ),
                onHover: (bool? value) {},
                child: const Text("Get Tap Token"),
              ),
            ),
          ),
          const SizedBox(height: 10),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: SingleChildScrollView(
                child: SelectableText(
                  mCardSDKResponse == null ? "" : "SDK RESPONSE : $mCardSDKResponse",
                  textAlign: TextAlign.center,
                  style: const TextStyle(color: Colors.black, fontSize: 12),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

令牌化卡片

通过改变generateToken变量为true来启动令牌化过程。

setState(() {
  generateToken = true;
});