Flutter生物识别支付插件bootpay_bio的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter生物识别支付插件bootpay_bio的使用

bootpay_bio Flutter库

bootpay_bio 是由Bootpay提供的官方Flutter库，用于支持生物识别支付和便捷密码支付（客户端）。

  • PG支付窗口：在客户端库中进行集成（如JavaScript, Android, iOS, React Native, Flutter等）。
  • 支付验证及取消、账单键发行、身份认证：这些操作在服务器端进行（如Java, PHP, Python, Ruby, Node.js, Go, ASP.NET等）。

Bootpay版本信息

此模块支持Android和iOS。Android OS 23及以上版本，iOS OS 14及以上版本开始支持。该模块基于Bootpay V2。

功能

  • 支持iOS和Android平台
  • 支持通过REST接口进行卡定期支付的PG服务提供商

安装

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  ...
  bootpay_bio: last_version
  ...

然后执行flutter pub get以获取最新版本的库。

配置

Android

修改MainActivity.java文件，使用FlutterFragmentActivity替换FlutterActivity：

import android.os.Bundle;
import io.flutter.embedding.android.FlutterFragmentActivity;
import androidx.annotation.NonNull;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterFragmentActivity {

    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine)
    {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}

或者如果使用Kotlin，修改MainActivity.kt文件：

import io.flutter.embedding.android.FlutterFragmentActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterFragmentActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

在AndroidManifest.xml中添加以下权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
    <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
</manifest>

iOS

在{your project root}/ios/Runner/Info.plist文件中添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLName</key>
            <string>kr.co.bootpaySample</string> 
            <key>CFBundleURLSchemes</key>
            <array>
                <string>bootpaySample</string> 
            </array>
        </dict>
    </array>

    ...
    <key>NSFaceIDUsageDescription</key>
    <string>생체인증 결제 진행시 권한이 필요합니다</string>
</dict>
</plist>

使用

生物识别支付

初始化支付数据

在initState方法中初始化支付数据：

void bioDataInit() {
  Item item1 = Item();
  item1.name = "미키 마우스"; // 商品名称
  item1.qty = 1; // 商品数量
  item1.id = "ITEM_CODE_MOUSE"; // 商品唯一标识
  item1.price = 500; // 商品价格

  Item item2 = Item();
  item2.name = "키보드"; // 商品名称
  item2.qty = 1; // 商品数量
  item2.id = "ITEM_CODE_KEYBOARD"; // 商品唯一标识
  item2.price = 500; // 商品价格

  List<Item> itemList = [item1, item2];

  if(BioConstants.DEBUG) {
    bioPayload.webApplicationId = '5b9f51264457636ab9a07cdb'; // 网页应用ID
    bioPayload.androidApplicationId = '5b9f51264457636ab9a07cdc'; // Android应用ID
    bioPayload.iosApplicationId = '5b9f51264457636ab9a07cdd'; // iOS应用ID
  } else {
    bioPayload.webApplicationId = '5b8f6a4d396fa665fdc2b5e7'; // 网页应用ID
    bioPayload.androidApplicationId = '5b8f6a4d396fa665fdc2b5e8'; // Android应用ID
    bioPayload.iosApplicationId = '5b8f6a4d396fa665fdc2b5e9'; // iOS应用ID
  }

  bioPayload.pg = '나이스페이';
  bioPayload.method = '카드';
  bioPayload.orderName = '테스트 상품'; // 结算商品名称
  bioPayload.price = 1000.0; // 结算金额

  bioPayload.orderId = DateTime.now().millisecondsSinceEpoch.toString(); // 订单号，必须为开发方提供的唯一值
  bioPayload.metadata = {
    "callbackParam1" : "value12",
    "callbackParam2" : "value34",
    "callbackParam3" : "value56",
    "callbackParam4" : "value78",
  }; // 传递参数，支付后返回值
  bioPayload.items = itemList; // 商品信息数组

  User user = User(); // 购买者信息
  user.username = "사용자 이름";
  user.email = "user1234@gmail.com";
  user.area = "서울";
  user.phone = "010-1234-5678";
  user.addr = '서울시 동작구 상도로 222';

  BioExtra extra = BioExtra(); // 结算选项
  extra.appScheme = 'bootpayFlutterExample';
  extra.cardQuota = "3";
  bioPayload.user = user;
  bioPayload.extra = extra;
}

执行支付请求

定义一个按钮点击事件来执行支付请求：

Future<void> goBootpayTest(BuildContext context, String payType) async {
  String restApplicationId = "";
  String pk = "";
  if(BioConstants.DEBUG) {
    restApplicationId = "5b9f51264457636ab9a07cde";
    pk = "sfilSOSVakw+PZA+PRux4Iuwm7a//9CXXudCq9TMDHk=";
  } else {
    restApplicationId = "5b8f6a4d396fa665fdc2b5ea";
    pk = "rm6EYECr6aroQVG2ntW0A6LpWnkTgP4uQ3H18sDDUYw=";
  }
  var res = await _provider.getRestToken(restApplicationId, pk);

  var user = getUser();

  res = await _provider.getEasyPayUserToken(res.body['access_token'], user);
  goBootpayRequest(context, res.body["user_token"], user, payType);
}

void goBootpayRequest(BuildContext context, String easyUserToken, User user, String payType) {
  Item item1 = Item();
  item1.name = "미키 마우스"; // 商品名称
  item1.qty = 1; // 商品数量
  item1.id = "ITEM_CODE_MOUSE"; // 商品唯一标识
  item1.price = 500; // 商品价格

  Item item2 = Item();
  item2.name = "키보드"; // 商品名称
  item2.qty = 1; // 商品数量
  item2.id = "ITEM_CODE_KEYBOARD"; // 商品唯一标识
  item2.price = 500; // 商品价格
  List<Item> itemList = [item1, item2];

  var bioPayload = BioPayload();
  bioPayload.userToken = easyUserToken;
  if(BioConstants.DEBUG) {
    bioPayload.webApplicationId = '5b9f51264457636ab9a07cdb'; // 网页应用ID
    bioPayload.androidApplicationId = '5b9f51264457636ab9a07cdc'; // Android应用ID
    bioPayload.iosApplicationId = '5b9f51264457636ab9a07cdd'; // iOS应用ID
  } else {
    bioPayload.webApplicationId = '5b8f6a4d396fa665fdc2b5e7'; // 网页应用ID
    bioPayload.androidApplicationId = '5b8f6a4d396fa665fdc2b5e8'; // Android应用ID
    bioPayload.iosApplicationId = '5b8f6a4d396fa665fdc2b5e9'; // iOS应用ID
  }

  bioPayload.pg = '나이스페이';
  bioPayload.orderName = '플리츠레이어 카라숏원피스'; // 结算商品名称
  bioPayload.price = 1000.0; // 结算金额

  bioPayload.orderId = DateTime.now().millisecondsSinceEpoch.toString(); // 订单号，必须为开发方提供的唯一值
  bioPayload.metadata = {
    "callbackParam1" : "value12",
    "callbackParam2" : "value34",
    "callbackParam3" : "value56",
    "callbackParam4" : "value78",
  }; // 传递参数，支付后返回值
  bioPayload.items = itemList; // 商品信息数组

  BioExtra extra = BioExtra(); // 结算选项
  extra.appScheme = 'bootpayBioFlutterExample';
  extra.cardQuota = "3";
  extra.isShowTotalPay = false;
  bioPayload.user = user;
  bioPayload.extra = extra;
  bioPayload.names = ["블랙 (COLOR)", "55 (SIZE)"];
  bioPayload.prices = [
    BioPrice(name: '상품가격', price: 89000),
    BioPrice(name: '쿠폰적용', price: -25000),
    BioPrice(name: '배송비', price: 2500),
  ];

  if(payType == PAY_TYPE_BIO) {
    requestPaymentBio(context, bioPayload);
  } else if(payType == PAY_TYPE_PASSWORD){
    requestPaymentPassword(context, bioPayload);
  } else if(payType == PAY_TYPE_PASSWORD_NO_BILLING){
    requestPaymentPasswordNoBilling(context, bioPayload);
  }
}

请求生物识别支付

定义请求生物识别支付的方法：

requestPaymentBio(BuildContext context, BioPayload payload) {
  BootpayBio().requestPaymentBio(
    context: context,
    payload: payload,
    showCloseButton: false,
    themeData: BioThemeData(
      titleWidget: Image.asset("images/title_widget.png", height: 22), 
    ),
    onCancel: (String data) {
      print('------- onCancel: $data');
    },
    onError: (String data) {
      print('------- onError: $data');
    },
    onClose: () {
      print('------- onClose');
      BootpayBio().dismiss(context); // 显示关闭调用
      if(mounted) {
        BootpayBio().dismiss(context); // 显示关闭调用
      }
    },
    onIssued: (String data) {
      print('------- onIssued: $data');
    },
    onConfirm: (String data) {
      print('------- onConfirm: $data');
      return true; // 确认支付并返回true
    },
    onDone: (String data) {
      print('------- onDone: $data');
    },
  );
}

请求密码支付

定义请求密码支付的方法：

requestPaymentPassword(BuildContext context, BioPayload payload) {
  BootpayBio().requestPaymentPassword(
    context: context,
    payload: payload,
    showCloseButton: false,
    onCancel: (String data) {
      print('------- onCancel: $data');
    },
    onError: (String data) {
      print('------- onError: $data');
    },
    onClose: () {
      print('------- onClose');
      BootpayBio().dismiss(context); // 显示关闭调用
    },
    onIssued: (String data) {
      print('------- onIssued: $data');
    },
    onConfirm: (String data) {
      print('------- onConfirm: $data');
      return true; // 确认支付并返回true
    },
    onDone: (String data) {
      print('------- onDone: $data');
    },
  );
}

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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用bootpay_bio插件来实现生物识别支付的示例代码。bootpay_bio插件通常用于集成Bootpay的生物识别支付功能。

1. 添加依赖

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

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

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

2. 配置Android和iOS

Android

在android/app/src/main/AndroidManifest.xml中添加必要的权限：

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

确保你的MainActivity已经配置好，通常Flutter项目已经默认配置好了。

iOS

在ios/Runner/Info.plist中添加生物识别权限：

<key>NSFaceIDUsageDescription</key>
<string>需要生物识别来进行支付</string>
<key>NSTouchIDUsageDescription</key>
<string>需要Touch ID来进行支付</string>

3. 使用Bootpay进行生物识别支付

以下是一个简单的示例代码，展示如何使用bootpay_bio插件进行生物识别支付：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bootpay Bio Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _startPayment,
            child: Text('Start Payment'),
          ),
        ),
      ),
    );
  }

  Future<void> _startPayment() async {
    try {
      // 初始化Bootpay
      await BootpayBio.initialize(
        appId: '你的Bootpay App ID',
        appKey: '你的Bootpay App Key',
      );

      // 配置支付参数
      Map<String, dynamic> paymentData = {
        'name': '商品名称',
        'amount': 1000, // 金额（单位：韩元，如果是其他货币请相应调整）
        'currency': 'KRW', // 货币类型
        'order_id': '订单ID', // 订单唯一标识
        'memo': '支付备注',
      };

      // 启动生物识别支付
      BootpayBioResponse response = await BootpayBio.startPayment(paymentData: paymentData);

      // 处理支付结果
      if (response.success) {
        print('支付成功: ${response.data}');
      } else {
        print('支付失败: ${response.error?.message ?? '未知错误'}');
      }
    } catch (e) {
      print('发生错误: $e');
    }
  }
}

class BootpayBioResponse {
  final bool success;
  final dynamic data;
  final BootpayBioError? error;

  BootpayBioResponse({required this.success, required this.data, this.error});

  factory BootpayBioResponse.fromJson(Map<String, dynamic> json) {
    return BootpayBioResponse(
      success: json['success'] as bool,
      data: json['data'],
      error: json['error'] != null ? BootpayBioError.fromJson(json['error'] as Map<String, dynamic>) : null,
    );
  }
}

class BootpayBioError {
  final String code;
  final String message;

  BootpayBioError({required this.code, required this.message});

  factory BootpayBioError.fromJson(Map<String, dynamic> json) {
    return BootpayBioError(
      code: json['code'] as String,
      message: json['message'] as String,
    );
  }
}

注意事项

  1. 替换App ID和App Key：在调用BootpayBio.initialize方法时，请确保使用你自己的Bootpay App ID和App Key。
  2. 支付金额和货币：根据实际需要调整支付金额和货币类型。
  3. 错误处理：在实际应用中，请添加更多的错误处理和用户提示。

这段代码展示了如何在Flutter应用中使用bootpay_bio插件进行生物识别支付的基本流程。请根据你的具体需求进行调整和扩展。

回到顶部