Flutter直接借记支付插件b24_direct_debit_sdk的使用

B24 Direct Debit

这是一个用于在Flutter应用中展示银行并订阅直接借记服务的插件。

使用

要使用此插件，请在pubspec.yaml文件中添加b24_direct_debit_sdk依赖：

dependencies:
  b24_direct_debit_sdk: 1.0.0

要求

dart_sdk: ^3.5.x
flutter_sdk: >=1.17.0

配置

iOS

在info.plist文件中添加配置方案：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
</array>

Android

在AndroidManifest.xml文件中添加配置方案：

<uses-permission android:name="android.permission.INTERNET" />
<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="http" />
    </intent>
</queries>

调用SDK

首先，导入插件包：

import 'package:b24_direct_debit_sdk/b24_direct_debit_sdk.dart';

然后，初始化SDK：

B24DirectDebitSdk.initSdk(
    context: context,
    subscriptionNo: '879839883',
    refererKey: '123X',
    isDarkMode: false,
    language: 'km',
    isProduction: false,
    isPopup: true // 仅适用于Web
);

示例

以下是一个完整的示例代码，展示了如何使用b24_direct_debit_sdk插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Init SDK Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
            onPressed: () {
              // 加载SDK
              B24DirectDebitSdk.initSdk(
                context: context,
                subscriptionNo: '879839883',
                refererKey: '123X',
                isDarkMode: false,
                language: 'km',
                isProduction: false,
                isPopup: true  // 仅适用于Web
              );
            },
            child: const Text("Init SDK")),
      ),
    );
  }
}

带有输入框的示例

下面是一个更详细的示例，其中包含输入框以便用户输入订阅号、引用键和语言代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Init SDK Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHome(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  final _subscriptionNoController = TextEditingController();

  final _refererKeyController = TextEditingController();

  final _languageCodeController = TextEditingController(text: 'km');
  bool isDarkmode = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(
            height: 80,
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            child: TextFormField(
              controller: _subscriptionNoController,
              decoration: InputDecoration(
                  suffixIcon: IconButton(
                      onPressed: () async {
                        pastText(_subscriptionNoController);
                      },
                      icon: const Icon(Icons.paste_outlined)),
                  label: const Text('Subscription No'),
                  border: const OutlineInputBorder()),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            child: TextFormField(
              controller: _refererKeyController,
              decoration: InputDecoration(
                  suffixIcon: IconButton(
                      onPressed: () async {
                        pastText(_refererKeyController);
                      },
                      icon: const Icon(Icons.paste_outlined)),
                  label: const Text('Referer Key'),
                  border: const OutlineInputBorder()),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            height: 50,
            child: TextFormField(
              controller: _languageCodeController,
              decoration: InputDecoration(
                  suffixIcon: IconButton(
                      onPressed: () async {
                        pastText(_languageCodeController);
                      },
                      icon: const Icon(Icons.paste_outlined)),
                  label: const Text('Language Code'),
                  border: const OutlineInputBorder()),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Checkbox(
                  value: isDarkmode,
                  onChanged: (value) {
                    setState(() {
                      isDarkmode = value!;
                    });
                  }),
              const Text("DarkMode")
            ],
          ),
          ElevatedButton(
              style: const ButtonStyle(
                  padding: MaterialStatePropertyAll(EdgeInsets.all(20)),
                  backgroundColor: MaterialStatePropertyAll(Colors.blue)),
              onPressed: () {
                if (_subscriptionNoController.text.isEmpty) {
                  _subscriptionNoController.text = '5KO9B8O52R1k';
                }
                if (_refererKeyController.text.isEmpty) {
                  _refererKeyController.text =
                      'd945botz-dc54-483d-9759-f9858a9211a0';
                }

                B24DirectDebitSdk.initSdk(
                    context: context,
                    subscriptionNo: _subscriptionNoController.text,
                    refererKey: _refererKeyController.text,
                    isDarkMode: isDarkmode, // 可选，默认为false
                    language: _languageCodeController.text, // 可选，默认为'km'
                    isProduction: false, // 可选，默认为false（演示环境）
                    isPopup: true,
                    testingEnv: 'Stag' // (Stag, Pilot, Demo) 可选，默认为'Demo'
                    );
              },
              child: const Text(
                "Init SDK",
                style: TextStyle(color: Colors.white),
              ))
        ],
      ),
    );
  }
}

void pastText(TextEditingController controller) async {
  ClipboardData? data = await Clipboard.getData('text/plain');
  if (data != null) {
    controller.text = data.text ?? "";
  }
}

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

phonegap100 1楼

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

当然，以下是如何在Flutter项目中使用b24_direct_debit_sdk插件的详细步骤和代码示例。请注意，这个插件的具体实现和API可能会随着版本的更新而变化，因此请参考最新的官方文档以确保准确性。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  b24_direct_debit_sdk: ^最新版本号 # 替换为最新的版本号

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

步骤 2: 配置Android和iOS

根据插件的官方文档，你可能需要在AndroidManifest.xml和Info.plist中添加一些必要的配置。例如，你可能需要声明网络权限或配置支付相关的URL Scheme。具体配置请参考官方文档。

步骤 3: 导入插件并使用

在你的Flutter项目中，导入b24_direct_debit_sdk并开始使用它。以下是一个简单的代码示例，展示了如何初始化插件并进行支付操作。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Direct Debit Payment Example'),
        ),
        body: Center(
          child: DirectDebitPaymentButton(),
        ),
      ),
    );
  }
}

class DirectDebitPaymentButton extends StatefulWidget {
  @override
  _DirectDebitPaymentButtonState createState() => _DirectDebitPaymentButtonState();
}

class _DirectDebitPaymentButtonState extends State<DirectDebitPaymentButton> {
  final B24DirectDebitSdk _b24Sdk = B24DirectDebitSdk();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 配置支付参数，这里只是一个示例，请根据实际情况填写
        var paymentConfig = B24PaymentConfig(
          merchantId: '你的商户ID', // 替换为你的商户ID
          publicKey: '你的公钥', // 替换为你的公钥
          amount: 100, // 支付金额，单位：分
          currency: 'CNY', // 货币代码
          description: '商品描述', // 支付描述
          // 其他必要的配置参数...
        );

        try {
          var result = await _b24Sdk.startPayment(paymentConfig);
          if (result.status == B24PaymentStatus.success) {
            // 支付成功处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('支付成功')),
            );
          } else {
            // 支付失败处理
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('支付失败: ${result.message}')),
            );
          }
        } catch (e) {
          // 异常处理
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('发生错误: $e')),
          );
        }
      },
      child: Text('发起直接借记支付'),
    );
  }
}

注意事项

支付配置：确保你正确配置了支付所需的所有参数，如商户ID、公钥、金额、货币代码等。
错误处理：添加适当的错误处理逻辑，以便在支付过程中出现问题时能够给用户明确的反馈。
安全性：不要在代码中硬编码敏感信息，如公钥和私钥。考虑使用环境变量或安全的存储方式来管理这些信息。
用户隐私：确保你的应用符合相关的隐私政策和数据保护法规。

这个示例提供了一个基本的框架，你可以根据具体需求进一步定制和扩展。务必参考b24_direct_debit_sdk的官方文档和API参考，以获取更多详细信息和高级用法。