Flutter支付集成插件stan_payment_sdk的使用

Flutter支付集成插件stan_payment_sdk的使用

概述

这是一个用于处理与Flick支付API交易的Flutter SDK。

功能

  • 使用Flick API发起支付请求。
  • 自动在浏览器中打开生成的结账URL。
  • 内置错误处理和用户友好的API。
  • 简单直观的SDK结构,便于集成。

使用方法

导入包
import 'package:flick_sdk/flick_sdk.dart';
初始化SDK

在应用中创建一个新的FlickSDK类实例,并提供必要的参数。

await flick.createCharge(
  amount: 1000,
  currencyCollected: 'USD',
  currencySettled: 'USD',
  phoneNumber: '1234567890',
  email: 'example@gmail.com',
  transactionId: 'your-transaction-id',
  redirectUrl: 'https://your-redirect-url.com',  // 可选
  webhookUrl: 'https://your-webhook-url.com',    // 可选
);

注意:<YOUR_API_KEY>替换为由Flick提供的API密钥。

示例应用

完整示例代码

以下是一个完整的示例代码,展示了如何使用该SDK。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FlickExample(),
    );
  }
}

class FlickExample extends StatelessWidget {
  final FlickSdk flickSdk = FlickSdk(
    apiKey: 'Your secret api key',
    amount: '1000',
    currencyCollected: 'USD',
    currencySettled: 'USD',
    phoneNo: '08067302418',
    email: 'example@mail.com',
    transactionId: 'Flick-5yfr733y5yrrscfd45',
    redirectUrl: 'https://your_redirect_url.com',
    webhookUrl: 'https://your_webhook_url.com',
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flick SDK Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => flickSdk.createCharge(context),
          child: const Text('Make Payment'),
        ),
      ),
    );
  }
}

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

1 回复

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


stan_payment_sdk 是一个用于 Flutter 应用的支付集成插件,允许开发者轻松集成支付功能。以下是如何使用 stan_payment_sdk 的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 stan_payment_sdk 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  stan_payment_sdk: ^1.0.0  # 请根据实际版本号进行替换

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

2. 初始化 SDK

在你的 Flutter 应用启动时,初始化 stan_payment_sdk。通常,这可以在 main.dart 文件中完成:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化支付 SDK
  await StanPaymentSdk.initialize(
    apiKey: 'YOUR_API_KEY', // 替换为你的 API 密钥
    environment: Environment.sandbox, // 使用沙盒环境进行测试
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Payment Demo',
      home: PaymentScreen(),
    );
  }
}

3. 创建支付界面

创建一个支付界面,用户可以在其中输入支付信息并触发支付操作。

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

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  final _formKey = GlobalKey<FormState>();
  final _amountController = TextEditingController();

  Future<void> _makePayment() async {
    if (_formKey.currentState!.validate()) {
      final amount = double.parse(_amountController.text);

      try {
        final paymentResult = await StanPaymentSdk.makePayment(
          amount: amount,
          currency: 'USD',
          description: 'Test Payment',
        );

        if (paymentResult.success) {
          // 支付成功
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Payment successful!')),
          );
        } else {
          // 支付失败
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Payment failed: ${paymentResult.message}')),
          );
        }
      } catch (e) {
        // 处理异常
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error: $e')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Make a Payment'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _amountController,
                decoration: InputDecoration(labelText: 'Amount'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter an amount';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _makePayment,
                child: Text('Pay Now'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _amountController.dispose();
    super.dispose();
  }
}

4. 处理支付结果

_makePayment 方法中,我们使用 StanPaymentSdk.makePayment 来发起支付请求,并根据返回的 paymentResult 来处理支付结果。

5. 测试支付

在开发过程中,建议使用沙盒环境进行测试。确保在初始化 SDK 时设置 environment: Environment.sandbox

6. 发布应用

在发布应用之前,将 SDK 的环境切换到生产环境:

await StanPaymentSdk.initialize(
  apiKey: 'YOUR_PRODUCTION_API_KEY',
  environment: Environment.production,
);
回到顶部