Flutter支付集成插件swervpay_widget的使用

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

Flutter支付集成插件swervpay_widget的使用

Flutter Widget for Swervpay

pub package License: MIT


探索文档 »

X (Twitter) · LinkedIn · 更新日志

安装

$ flutter pub add swervpay_widget

配置

创建一个带有您的secret_key和business_id的Swervpay实例：

import "package:swervpay_widget/swervpay_widget.dart";

Navigator.of(context).push(
    CupertinoPageRoute(
        builder: (c) => SwervpayView(
            sandbox: true,
            publicKey: const String.fromEnvironment('SWERV_PUBLIC_KEY', defaultValue: 'pk_dev_123'),
            businessId: const String.fromEnvironment('SWERV_BUSINESS_ID', defaultValue: 'bsn_123'),
            // checkoutId: 'hbnbbbbbb',
            data: SwervpayCheckoutDataModel(
                reference: DateTime.now().toString(),
                amount: 10000,
                description: 'description',
                currency: 'NGN',
            ),
            onSuccess: (response) {
                print(response);
            },
            onClose: () => print('closed'),
            onLoad: () => print('loaded'),
        ),
    ),
);

// 或者

await SwervpayWidget.launchWidget(
    context,
    sandbox: true,
    key: const String.fromEnvironment('SWERV_PUBLIC_KEY', defaultValue: 'pk_dev_123'),
    businessId: const String.fromEnvironment('SWERV_BUSINESS_ID', defaultValue: 'bsn_123'),
    // checkoutId: 'hbnbbbbbb',
    data: SwervpayCheckoutDataModel(
        reference: DateTime.now().toString(),
        amount: 100,
        description: 'description',
        currency: 'NGN',
    ),
    onSuccess: (response) {
        print(response);
    },
    onClose: () => print('closed'),
    onLoad: () => print('loaded'),
);

请将<SWERV_PUBLIC_KEY> 和 <SWERV_BUSINESS_ID> 替换为您实际的secret key和business ID。

文档

查看这里的文档。

示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:swervpay_widget/swervpay_widget.dart';

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

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Swervpay Widget 示例'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          Navigator.of(context).push(
            CupertinoPageRoute(
              builder: (c) => SwervpayView(
                sandbox: true,
                debugMode: true,
                publicKey: const String.fromEnvironment('SWERV_PUBLIC_KEY',
                    defaultValue: 'pk_dev_123'),
                businessId: const String.fromEnvironment('SWERV_BUSINESS_ID',
                    defaultValue: 'bsn_123'),
                // checkoutId: 'hbnbbbbbb',
                data: SwervpayCheckoutDataModel(
                  reference: DateTime.now().toString(),
                  amount: 10000,
                  description: 'description',
                  currency: 'NGN',
                ),
                onSuccess: (response) {
                  print(response);
                },
                onClose: () => print('closed'),
                onLoad: () => print('loaded'),
                onEvent: (value) => print(value),
              ),
            ),
          );
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), //
      body: Center(
        child: GestureDetector(
          onTap: () async {
            // 使用showDialog
            await SwervpayWidget.launchWidget(
              context,
              sandbox: true,
              debugMode: true,
              key: const String.fromEnvironment('SWERV_PUBLIC_KEY',
                  defaultValue: 'pk_dev_123'),
              businessId: const String.fromEnvironment('SWERV_BUSINESS_ID',
                  defaultValue: 'bsn_123'),
              // checkoutId: 'hbnbbbbbb',
              data: SwervpayCheckoutDataModel(
                reference: DateTime.now().toString(),
                amount: 100,
                description: 'description',
                currency: 'NGN',
              ),
              onSuccess: (response) {
                print(response);
              },
              onClose: () => print('closed'),
              onLoad: () => print('loaded'),
              onEvent: (value) => print(value),
            );
          },
          child: const Text('打开 Swervpay Widget'),
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter项目中集成swervpay_widget插件以实现支付功能，你可以按照以下步骤进行。以下是一个基本的代码示例，展示如何集成和使用swervpay_widget插件。

1. 添加依赖

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

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

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

2. 导入插件

在你需要使用支付功能的Dart文件中导入swervpay_widget插件：

import 'package:swervpay_widget/swervpay_widget.dart';

3. 配置支付参数

在调用支付之前，你需要配置支付参数。这些参数通常包括支付金额、货币类型、描述等信息。以下是一个配置示例：

Map<String, dynamic> paymentConfig = {
  'amount': 100.0,          // 支付金额
  'currency': 'USD',        // 货币类型
  'description': 'Test Payment', // 支付描述
  // 其他需要的配置参数，根据swervpay_widget的文档进行添加
};

4. 调用支付功能

使用SwervpayWidget启动支付流程。下面是一个简单的调用示例：

void _startPayment() async {
  // 初始化SwervpayWidget
  final SwervpayWidget swervpay = SwervpayWidget();

  // 启动支付流程
  try {
    bool result = await swervpay.startPayment(
      config: paymentConfig,
      onSuccess: (paymentResponse) {
        // 支付成功后的回调处理
        print('Payment successful: $paymentResponse');
      },
      onFailure: (error) {
        // 支付失败后的回调处理
        print('Payment failed: $error');
      },
      onClose: () {
        // 用户取消支付后的回调处理
        print('Payment closed by user');
      },
    );

    if (result) {
      print('Payment initiated successfully');
    } else {
      print('Failed to initiate payment');
    }
  } catch (e) {
    // 处理其他可能的异常
    print('Error initiating payment: $e');
  }
}

5. 在UI中触发支付

你可以在UI中添加一个按钮来触发支付功能，例如：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Swervpay Widget Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _startPayment,
            child: Text('Start Payment'),
          ),
        ),
      ),
    );
  }
}

注意事项

  1. API密钥和配置：确保你已经从Swervpay获取了必要的API密钥，并在paymentConfig中正确配置。
  2. 错误处理：在实际应用中，应该添加更详细的错误处理逻辑，以提供更好的用户体验。
  3. 安全性：不要在客户端代码中硬编码敏感信息，如API密钥，应使用安全存储机制。

这个示例展示了如何在Flutter项目中集成swervpay_widget插件，并启动支付流程。根据你的具体需求，你可能需要调整支付配置和处理回调逻辑。

回到顶部