Flutter支付验证插件shuftipro_sdk的使用
Flutter支付验证插件shuftipro_sdk的使用
1. 简介
Shuftipro Flutter SDK 是一个用于集成身份验证和支付验证功能的插件。通过该插件,开发者可以轻松地在Flutter应用中实现用户的身份验证流程,包括证件扫描、面部识别等。本文将详细介绍如何使用 shuftipro_sdk
插件,并提供一个完整的示例代码。
2. 完整示例Demo
2.1. 添加依赖
首先,在 pubspec.yaml
文件中添加 shuftipro_sdk
依赖:
dependencies:
flutter:
sdk: flutter
shuftipro_sdk: ^latest_version # 请替换为最新的版本号
2.2. 初始化SDK
在 main.dart
文件中,我们需要导入必要的包并配置 SDK 的参数。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:shuftipro_sdk/shuftipro_sdk.dart';
import 'dart:convert';
// 替换为您的客户端ID和密钥
String clientId = ""; // enter client id here
String secretKey = ""; // enter secret key here
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(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: Colors.white,
fontFamily: 'OpenSans',
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 验证请求的认证信息
var authObject = {
"auth_type": "basic_auth",
"client_id": clientId,
"secret_key": secretKey,
};
// 验证请求的有效载荷
Map<String, Object> createdPayload = {
"country": "", // 国家代码(可选)
"language": "EN", // 语言(支持EN, AR, ES等)
"email": "", // 用户邮箱(可选)
"callback_url": "http://www.example.com", // 回调URL
"redirect_url": "https://www.mydummy.package_sample.com/", // 重定向URL
"show_consent": 1, // 是否显示同意页面
"show_privacy_policy": 1, // 是否显示隐私政策
"verification_mode": "image_only", // 验证模式(image_only, video, live_capture)
"face": {
"proof": "", // 面部验证证明(可选)
},
"document": {
"supported_types": [
"passport", // 支持的证件类型
"id_card",
"driving_license",
"credit_or_debit_card",
],
"name": {
"first_name": "", // 姓名(可选)
"last_name": "",
"middle_name": "",
},
"dob": "", // 出生日期(可选)
"document_number": "", // 证件号码(可选)
"expiry_date": "", // 有效期(可选)
"issue_date": "", // 发行日期(可选)
"gender": "", // 性别(可选)
"backside_proof_required": "0", // 是否需要背面验证
},
};
// SDK配置对象
Map<String, Object> configObj = {
"open_webview": false, // 是否在WebView中打开
"asyncRequest": false, // 是否异步请求
"captureEnabled": false, // 是否启用捕获功能
"dark_mode": false, // 是否启用暗黑模式
"show_requirement_page": true, // 是否显示要求页面
"font_color": "#263B54", // 字体颜色
"button_text_color": "#FFFFFF", // 按钮文字颜色
"button_background_color": "#1F5AF6", // 按钮背景颜色
};
/*
* 此函数发送请求到Shuftipro的Flutter插件
* 并接收响应
*/
Future<void> initPlatformState() async {
String response = "";
try {
// 发送请求
response = await ShuftiproSdk.sendRequest(
authObject: authObject,
createdPayload: createdPayload,
configObject: configObj);
// 解析响应
var object = jsonDecode(response);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(object.toString()),
));
print(object.toString());
print(object["event"].toString());
} catch (e) {
print(e);
}
if (!mounted) return;
}
/*
* 点击按钮时启动SDK流程
*/
void continueFun() {
var v = DateTime.now();
var reference = "package_sample_Flutter_$v"; // 生成唯一的参考编号
createdPayload["reference"] = reference; // 将参考编号添加到有效载荷中
initPlatformState(); // 发起验证请求
}
/*
* 应用程序的UI
*/
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
child: OutlinedButton(
onPressed: continueFun, // 点击按钮时触发验证流程
style: OutlinedButton.styleFrom(backgroundColor: Colors.blueAccent),
child: Container(
alignment: Alignment.center,
child: const Text(
"Continue", // 按钮文本
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontFamily: 'OpenSans',
),
),
),
),
),
),
);
}
}
更多关于Flutter支付验证插件shuftipro_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter支付验证插件shuftipro_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用shuftipro_sdk
插件进行支付验证的示例代码。这个示例将展示如何集成并使用该插件进行基本的支付验证流程。
首先,确保你已经在pubspec.yaml
文件中添加了shuftipro_sdk
依赖:
dependencies:
flutter:
sdk: flutter
shuftipro_sdk: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖。
接下来,在你的Flutter项目中创建一个新的Dart文件,比如payment_verification.dart
,并在其中编写以下代码:
import 'package:flutter/material.dart';
import 'package:shuftipro_sdk/shuftipro_sdk.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: PaymentVerificationScreen(),
);
}
}
class PaymentVerificationScreen extends StatefulWidget {
@override
_PaymentVerificationScreenState createState() => _PaymentVerificationScreenState();
}
class _PaymentVerificationScreenState extends State<PaymentVerificationScreen> {
Shuftipro? _shuftipro;
@override
void initState() {
super.initState();
// 初始化 Shuftipro SDK
_initShuftipro();
}
Future<void> _initShuftipro() async {
// 替换为你的实际配置
final String apiKey = 'your_api_key_here';
final String environment = 'sandbox'; // 或者 'production'
_shuftipro = await Shuftipro.init(apiKey, environment);
// 监听支付验证结果
_shuftipro!.onVerificationCompleted!.listen((result) {
if (result.status == 'approved') {
// 支付验证通过
print('Payment verification approved');
} else {
// 支付验证失败
print('Payment verification failed: ${result.error}');
}
});
}
Future<void> _startVerification() async {
if (_shuftipro == null) return;
// 开始支付验证流程
try {
await _shuftipro!.startVerification(
amount: 100.0, // 交易金额
currency: 'USD', // 交易货币
orderId: 'your_order_id_here', // 订单ID
redirectUrl: 'https://yourwebsite.com/redirect', // 重定向URL
);
} catch (e) {
print('Error starting verification: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Payment Verification'),
),
body: Center(
child: ElevatedButton(
onPressed: _startVerification,
child: Text('Start Verification'),
),
),
);
}
}
在这个示例中,我们完成了以下步骤:
-
初始化SDK:在
initState
方法中调用_initShuftipro
函数来初始化Shuftipro
SDK,并设置API密钥和环境(沙盒或生产)。 -
监听验证结果:通过
_shuftipro!.onVerificationCompleted!
监听支付验证的完成事件,并根据验证结果执行相应的操作。 -
启动验证流程:定义一个
_startVerification
函数来启动支付验证流程,该函数接受交易金额、货币、订单ID和重定向URL等参数。 -
UI界面:在UI界面上添加一个按钮,当用户点击该按钮时,调用
_startVerification
函数启动支付验证流程。
请确保替换示例代码中的your_api_key_here
、your_order_id_here
和https://yourwebsite.com/redirect
等占位符为你的实际配置。
这个示例代码仅展示了基本的使用流程,实际项目中可能需要根据具体需求进行更多的配置和处理。请参考shuftipro_sdk
的官方文档以获取更多详细信息和高级用法。