Flutter支付验证插件shuftipro_sdk的使用

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

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

1 回复

更多关于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'),
        ),
      ),
    );
  }
}

在这个示例中,我们完成了以下步骤:

  1. 初始化SDK:在initState方法中调用_initShuftipro函数来初始化Shuftipro SDK,并设置API密钥和环境(沙盒或生产)。

  2. 监听验证结果:通过_shuftipro!.onVerificationCompleted!监听支付验证的完成事件,并根据验证结果执行相应的操作。

  3. 启动验证流程:定义一个_startVerification函数来启动支付验证流程,该函数接受交易金额、货币、订单ID和重定向URL等参数。

  4. UI界面:在UI界面上添加一个按钮,当用户点击该按钮时,调用_startVerification函数启动支付验证流程。

请确保替换示例代码中的your_api_key_hereyour_order_id_herehttps://yourwebsite.com/redirect等占位符为你的实际配置。

这个示例代码仅展示了基本的使用流程,实际项目中可能需要根据具体需求进行更多的配置和处理。请参考shuftipro_sdk的官方文档以获取更多详细信息和高级用法。

回到顶部