Flutter支付集成插件finswich_checkout的使用

Flutter支付集成插件finswich_checkout的使用

Finswich checkout由Fuspay提供。

特性

通过将您的应用与我们的API进行一次集成，您的客户可以将“即时转账”发送到非洲乃至世界各地的每一个角落。

开始前的准备

  • Flutter
  • Web平台
  • Finswich账户

使用方法

以下是一个完整的示例，展示了如何在Flutter应用中使用finswich_checkout插件：

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  [@override](/user/override)
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  // 控制FinswichIframe是否可见
  bool ischeckoutvisible = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(),

        /// 您的其他widget应该放在这里替换container
        ischeckoutvisible
            ? FinswichIframe(
                // 设置用户的余额
                balance: "2400",
                // 控制FinswichIframe是否可见
                ischeckoutVisible: ischeckoutvisible,
                // 设置您的origin，可以通过window.location.origin获取
                origin: "https://exchanger-api.fuspay.finance",
                // 设置您的公钥
                publicKey: 
                    "live_public_f1f453b175384d3d08509809e9100823120dbXUnU8daZBBM5Cye3F0AryQVhbB5DWRwF9S0p5spFdBFIy8gZupLuwO5n2sO29nPN16875",
                // 设置一个唯一的交易参考号
                reference: "emcodeApp001Live",
                // 设置刷新UI的回调函数
                refreshUI: () {
                  setState(() {});
                },
              )
            : const SizedBox(),
      ],
    );
  }
}

更多关于Flutter支付集成插件finswich_checkout的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在Flutter中集成支付插件finswich_checkout通常涉及几个步骤，包括添加依赖、配置项目、初始化插件以及实现支付功能。以下是一个基本的代码案例，展示了如何在Flutter项目中使用finswich_checkout插件。

1. 添加依赖

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

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

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

2. 配置项目

确保你的AndroidManifest.xml和Info.plist文件中配置了必要的权限和网络访问设置，这通常取决于finswich_checkout的具体要求，但以下是一个通用的网络权限配置示例：

Android (AndroidManifest.xml):

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

iOS (Info.plist):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

3. 初始化插件

在你的Flutter应用的入口文件（通常是main.dart）中导入finswich_checkout包，并进行初始化。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  late FinswichCheckout finswichCheckout;

  @override
  void initState() {
    super.initState();
    // 初始化 FinswichCheckout
    finswichCheckout = FinswichCheckout(
      publicKey: '你的公钥', // 替换为你的实际公钥
      environment: FinswichEnvironment.sandbox, // 测试环境，生产环境使用 FinswichEnvironment.production
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Finswich Checkout Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _startPayment(),
          child: Text('Start Payment'),
        ),
      ),
    );
  }

  Future<void> _startPayment() async {
    try {
      // 构建支付请求
      final paymentRequest = FinswichPaymentRequest(
        amount: 1000, // 金额，单位通常是分（根据文档确认）
        currency: 'USD', // 货币代码
        description: 'Test Payment', // 支付描述
        // 其他参数根据文档添加，如：reference, metadata等
      );

      // 发起支付
      final result = await finswichCheckout.start(context, paymentRequest);
      if (result.status == FinswichPaymentStatus.success) {
        // 支付成功处理
        print('Payment successful: ${result.data}');
      } else {
        // 支付失败或取消处理
        print('Payment failed or canceled: ${result.status}');
      }
    } catch (e) {
      // 错误处理
      print('Error: $e');
    }
  }
}

注意事项

  1. 公钥和私钥：确保你使用的是从Finswich平台获取的正确公钥和私钥（私钥不会在你的客户端代码中使用，但需要在服务器端进行验证）。
  2. 支付环境：在开发过程中使用FinswichEnvironment.sandbox，发布到生产环境时切换到FinswichEnvironment.production。
  3. 支付回调：根据你的业务逻辑，你可能需要在服务器端处理支付回调，以验证支付结果。

以上代码提供了一个基本的集成示例，实际项目中可能需要根据具体需求进行调整和扩展。

回到顶部