Flutter支付集成插件flutterbudpay的使用

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

Flutter支付集成插件flutterbudpay的使用

Flutter插件用于通过BudPay支付系统进行支付。完全支持所有平台。

特性

当前特性：

  • 卡支付
  • 银行支付

安装

要使用此插件，在pubspec.yaml文件中添加flutterbudpay作为依赖项。

然后在您的widget的initState方法中初始化插件。

import 'package:flutterbudpay/flutterbudpay.dart';

class _ExamplePayementPageState extends State<ExamplePayementPage> {
  var publicKey = 'Add your BudPay Public Key Here';
  var secretKey = 'Add your Budpay Secret Key Here';
  final plugin = Budpay();

  [@override](/user/override)
  void initState() {
    plugin.initialize(publicKey: publicKey, secretKey: secretKey);
  }
}

进行支付

您可以使用两种方式进行支付：

  1. 结账：这是简单的方式；插件处理了支付过程中涉及的所有过程（除了交易初始化和验证，这些应从您的后端完成）。
  2. 刷卡：这是更复杂的方式；您需要处理所有回调和UI状态。

1. 结账（推荐）

初始化一个带有金额、邮箱和访问码或引用的收费对象。

Charge charge = Charge()
      ..amount = 10000
      ..reference = _getReference()
      // 或者 ..accessCode = _getAccessCodeFrmInitialization()
      ..email = 'customer@email.com';
CheckoutResponse response = await plugin.checkout(
  context,
  method: CheckoutMethod.card, // 默认为CheckoutMethod.selectable
  charge: charge,
);

plugin.checkout()返回支付的状态和详细信息在一个CheckoutResponse实例中。

2. 刷卡

您可以选择在本地或通过后端初始化支付。

发送支付详情到plugin.chargeCard。

Charge charge = Charge();
charge.card = _getCardFromUI();
charge
  ..amount = 2000
  ..email = 'user@email.com'
  ..reference = _getReference()
  ..putCustomField('Charged From', 'Flutter PLUGIN');
_chargeCard();

验证卡详情

您需要但不是必须构建UI让用户输入他们的支付详情。为了更方便的验证，将TextFormField包裹在Form小部件内。如果这对你来说是新的，请查看这篇关于如何在Flutter上验证表单的文章。

注意： 您不必将卡片对象传递给Charge。插件会调用UI让用户输入他们的卡信息。

您可以使用以下方法来验证字段：

card.validNumber

该方法帮助检查卡号是否有效。

card.validCVC

该方法检查卡安全码是否有效。

card.validExpiryDate

该方法检查过期日期（年月组合）是否有效。

card.isValid

该方法检查卡是否有效。在刷卡前始终执行此检查。

card.getType

该方法返回卡片类型（发行机构）的字符串表示形式。

运行示例项目

对于如何开始使用Flutter，请查看在线文档。

在这个插件中提供了一个示例项目。克隆此仓库并导航到example文件夹。使用支持的IDE打开它，或者在终端中从该文件夹执行flutter run。

贡献、问题和错误报告

该项目公开接受贡献。请自由贡献。

遇到问题或想报告错误？请在此处报告。记得尽可能详细描述。

示例代码

// 忽略对文件的库私有类型的公共API
import 'dart:developer';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutterbudpay/flutterbudpay.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

import 'themeclass.dart';

// 定义您的后端URL和Budpay公钥。
String backendUrl = '{YOUR_BACKEND_URL}';
String budpayPublicKey = '{YOUR_budpay_PUBLIC_KEY}';
const String appName = 'Budpay Example';

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

// MyApp是主要的应用程序小部件。
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();

  // 从任何上下文中获取MyApp小部件的状态。
  static _MyAppState of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>()!;
}

class _MyAppState extends State<MyApp> {
  // 默认主题模式为系统。
  ThemeMode _themeMode = ThemeMode.system;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      debugShowCheckedModeBanner: false,
      themeMode: _themeMode,
      theme: ThemeClass.lightTheme,
      darkTheme: ThemeClass.darkTheme,
      home: const Newpage(),
    );
  }

  // 更改主题模式的函数。
  void changeTheme(ThemeMode themeMode) {
    setState(() {
      _themeMode = themeMode;
    });
  }
}

// 检查应用程序是否处于暗模式。
bool get isDarkMode {
  var brightness = SchedulerBinding.instance.window.platformBrightness;
  return brightness == Brightness.dark;
}

// Newpage是应用程序的主要界面。
class Newpage extends StatefulWidget {
  const Newpage({Key? key}) : super(key: key);
  [@override](/user/override)
  _NewpageState createState() => _NewpageState();
}

class _NewpageState extends State<Newpage> {
  var currency = ["USD", "NGN"]; // 支持的货币。
  String dropdownvalue = 'NGN'; // 默认货币。
  TextEditingController phoneController = TextEditingController(); // 控制器用于金额文本框。
  bool isloading = false; // 结账按钮的加载状态。
  final plugin = Budpay(); // Budpay插件的实例。
  final _formKey = GlobalKey<FormState>(); // 表单键用于验证表单。
  bool check = false; // 暗模式复选框的状态。

  [@override](/user/override)
  void initState() {
    check = isDarkMode;
    plugin.initialize(
        publicKey: 'pk_test_oppvguyfnlna4f1eidl1bqrkxrxfszgdvgwq1q',
        secretKey: 'sk_test_genllkfsimb3wrqamv02hcqbr3fuo1alekr7cpy'); // 替换为您自己的密钥
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xff6C30F4),
        title: const Text("BUDPAY SDK SAMPLE"),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Checkbox(
                  value: check,
                  onChanged: (bool? value) {
                    setState(() {
                      check = !check;
                    });
                    if (!check) {
                      MyApp.of(context).changeTheme(ThemeMode.light);
                    } else {
                      MyApp.of(context).changeTheme(ThemeMode.dark);
                    }
                  }),
              const SizedBox(
                height: 20,
              ),
              DropdownButton(
                // 初始值
                value: dropdownvalue,

                // 下拉箭头图标
                icon: const Icon(Icons.keyboard_arrow_down),

                // 项目数组
                items: currency.map((String items) {
                  return DropdownMenuItem(
                    value: items,
                    child: Text(items),
                  );
                }).toList(),
                // 选择所需选项后，将按钮值更改为所选值
                onChanged: (String? newValue) {
                  setState(() {
                    dropdownvalue = newValue!;
                  });
                },
              ),
              const SizedBox(
                height: 30,
              ),
              Container(
                decoration: const BoxDecoration(
                    color: Color(0xffF4F4F6),
                    borderRadius: BorderRadius.all(Radius.circular(15.0))),
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: TextFormField(
                  decoration: InputDecoration(
                    fillColor: const Color(0xffF4F4F6),
                    hintText: "1000",
                    hintStyle: TextStyle(
                        fontSize: 16.56,
                        fontWeight: FontWeight.w500,
                        color: isDarkMode ? null : Colors.black),
                    enabledBorder: const OutlineInputBorder(
                      borderRadius:
                           BorderRadius.all(Radius.circular(15.0)),
                      borderSide: BorderSide(color: Color(0xffF4F4F6)),
                    ),
                    focusedBorder: const OutlineInputBorder(
                      borderRadius:
                          BorderRadius.all(Radius.circular(15.0)),
                      borderSide: BorderSide(color: Color(0xffF4F4F6)),
                    ),
                    disabledBorder: const OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(15.0)),
                      borderSide: BorderSide(color: Color(0xffF4F4F6)),
                    ),
                  ),
                  style: TextStyle(
                      fontSize: 16.56,
                      fontWeight: FontWeight.w500,
                      color: isDarkMode ? null : Colors.black),
                  controller: phoneController,
                  keyboardType: TextInputType.phone,
                  onChanged: (value) {
                    if (value.isEmpty) {
                      setState(() {});
                    }
                  },
                  validator: (value) {
                    if (value!.isEmpty) {
                      return "This field can't be empty";
                    }

                    return null;
                  },
                ),
              ),
              const SizedBox(
                height: 50,
              ),
              GestureDetector(
                child: Container(
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                      color: Color(0xff6C30F4)),
                  height: 65,
                  width: MediaQuery.of(context).size.width - 70,
                  padding: const EdgeInsets.symmetric(vertical: 15),
                  margin: const EdgeInsets.symmetric(
                      horizontal: 10, vertical: 10),
                  alignment: Alignment.center,
                  child: isloading
                      ? loadingWidget
                      : const Text(
                          "Checkout",
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                ),
                onTap: () {
                  if (_formKey.currentState!.validate()) {
                    _handleCheckout(context);
                  }
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  _handleCheckout(BuildContext context) async {
    setState(() => isloading = true);
    _formKey.currentState?.save();
    Charge charge = Charge()
      ..amount = int.parse(phoneController.text) // 基本货币单位
      ..email = 'sdkapp@email.com'
      ..currency = dropdownvalue;

    charge.reference = _getReference();

    try {
      var response = await plugin.checkout(
        context,
        charge: charge,
      );
      log('Response = $response');
      setState(() => isloading = false);
      _updateStatus(response.reference, '$response');
    } catch (e) {
      setState(() => isloading = false);
      _showMessage("Check console for error");
      rethrow;
    }
  }

  String _getReference() {
    String platform;
    if (!kIsWeb) {
      if (Platform.isIOS) {
        platform = 'iOS';
      } else {
        platform = 'Android';
      }
    } else {
      platform = "WEB";
    }
    return 'ChargedFrom${platform}_${DateTime.now().millisecondsSinceEpoch}';
  }

  _updateStatus(String? reference, String message) {
    _showMessage('Reference: $reference \n Response: $message',
        const Duration(seconds: 7));
  }

  _showMessage(String message,
      [Duration duration = const Duration(seconds: 4)]) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(message),
      duration: duration,
      action: SnackBarAction(
          label: 'CLOSE',
          onPressed: () =>
              ScaffoldMessenger.of(context).removeCurrentSnackBar()),
    ));
  }
}

const loadingWidget = SpinKitThreeBounce(
  color: Colors.white,
  size: 30.0,
);

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

Harmonyos Next教程
1 回复

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


当然，关于在Flutter项目中集成flutterbudpay支付插件，下面是一个基本的代码示例，用于展示如何集成和使用该插件。请注意，实际使用中可能需要根据具体的业务逻辑和flutterbudpay插件的文档进行更多的配置和调整。

首先，确保你已经在Flutter项目中添加了flutterbudpay插件。你可以在你的pubspec.yaml文件中添加以下依赖：

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

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

接下来，你可以在你的Flutter应用中初始化并使用flutterbudpay插件。以下是一个基本的示例代码：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final FlutterBudPay _flutterBudPay = FlutterBudPay();

  @override
  void initState() {
    super.initState();
    // 初始化FlutterBudPay插件（如果需要的话，这里可以添加初始化代码）
  }

  void _initiatePayment() async {
    try {
      // 替换为你的实际支付参数
      String publicKey = "your_public_key";
      String amount = "100.00"; // 金额
      String currency = "USD"; // 货币类型
      String description = "Test Payment"; // 支付描述

      // 发起支付请求
      var result = await _flutterBudPay.initiatePayment(
        publicKey: publicKey,
        amount: amount,
        currency: currency,
        description: description,
      );

      // 处理支付结果
      if (result.status == "success") {
        // 支付成功处理逻辑
        print("Payment Successful: ${result.data}");
      } else if (result.status == "error") {
        // 支付失败处理逻辑
        print("Payment Failed: ${result.message}");
      } else if (result.status == "pending") {
        // 支付待处理逻辑（例如需要用户确认支付）
        print("Payment Pending: ${result.data}");
      }
    } catch (e) {
      // 处理异常
      print("Error initiating payment: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BudPay Integration'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _initiatePayment,
          child: Text('Initiate Payment'),
        ),
      ),
    );
  }
}

在上面的代码中，我们定义了一个简单的Flutter应用，其中包含一个按钮用于发起支付。当用户点击按钮时，_initiatePayment方法会被调用，该方法使用flutterbudpay插件的initiatePayment方法来发起支付请求。

请注意，你需要替换your_public_key为你的实际公钥，以及根据需求调整其他支付参数（如金额、货币类型、描述等）。

此外，flutterbudpay插件的API可能会随着版本更新而发生变化，因此建议查阅最新的官方文档以获取最准确的API信息和使用指南。

回到顶部