Flutter支付集成插件flutter_yoco的使用

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

Flutter支付集成插件flutter_yoco的使用

Yoco为您提供了一种快速简便的方式处理卡支付,无论是面对面交易还是在线商店。Yoco开发者网站详细介绍了如何将您的应用程序、商店或系统与Yoco集成以处理支付。

注意:此插件与Yoco官方无正式关系。所有Yoco的图像和商标均为Yoco公司财产。

目录

  1. 免责声明
  2. 概述
  3. 功能
  4. 安装
  5. 使用
  6. API
  7. 交易状态
  8. 贡献
  9. 支持
  10. 许可

免责声明

Yoco建议不要使用successUrlcancelUrlfailureUrl来确定支付状态。然而,此插件利用它们来更新UI。为了确保支付状态的安全和准确处理,强烈建议设置后端服务。详情可参见Yoco官方文档

概述

FlutterYoco小部件提供了在Flutter应用中集成Yoco支付的简单界面。通过webview,它处理支付过程并允许广泛的自定义。

功能

  • 简易初始化: 最小化设置所需参数。
  • 内置支付: 内置WebView,使支付过程无缝进行。

要求

Android iOS
支持 SDK 19+ 或 20+ 11.0+
android {
    defaultConfig {
        minSdkVersion 19
    }
}

安装

首先,在pubspec.yaml文件中添加flutter_yoco

dependencies:
  flutter:
    sdk: flutter
  flutter_yoco: ^latest_version

运行flutter pub get以安装该包。

导入模块

在你的Dart文件中导入flutter_yoco模块:

import 'package:flutter_yoco/flutter_yoco.dart';

使用

基本示例

在你的widget树中包含FlutterYoco小部件:

FlutterYoco(
  amount: 100.00,           // 支付金额,单位为兰特
  transactionId: 'txn_12345', // 交易ID
  secretKey: 'your_secret_key_here', // 你的Yoco账户的密钥
  successUrl: 'https://yourbackend.com/success/', // 成功支付后的回调地址
  cancelUrl: 'https://yourbackend.com/cancel/', // 取消支付后的回调地址
  failureUrl: 'https://yourbackend.com/failure/', // 支付失败后的回调地址
  onComplete: (YocoTransaction transaction) {
    // 处理支付结果
  },
)
高级配置

你可以通过使用额外的可选参数进一步自定义行为。(将在后续详细说明)

API

参数 类型 必填 描述
amount double 支付金额,单位为兰特
transactionId String 每笔交易的唯一标识符
secretKey String 你的Yoco账户的密钥
successUrl String 成功支付后的回调地址
cancelUrl String 取消支付后的回调地址
failureUrl String 支付失败后的回调地址
onComplete Function 当支付过程完成时触发的回调函数

交易状态

FlutterYoco小部件识别以下交易状态:

  • YocoTransactionStatus.Success
  • YocoTransactionStatus.Cancelled
  • YocoTransactionStatus.Failed

这些状态会触发指定的onComplete回调,并用于UI更新。

许可

请参阅项目的许可证以了解使用条款。


示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: FlutterYoco(
          secretKey: 'sk_test_d11077a4za4GP3K4bd04364ba388',
          amount: 100.00,
          transactionId: 1000070.toString(),
          successUrl: 'https://misomenze.info/success/',
          cancelUrl: 'https://misomenze.info/cancel/',
          failureUrl: 'https://misomenze.info/failure/',
          onComplete: (transaction) {
            print('Completed: ${transaction.toJson()}');
          },
        ),
      ),
    );
  }
}

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

1 回复

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


在Flutter应用中集成支付功能,特别是使用特定的支付插件如flutter_yoco,通常需要遵循该插件的官方文档和示例代码。尽管我无法确保flutter_yoco插件的具体实现细节和API在最新版本中保持不变(因为插件会随时间更新),但我可以提供一个基于插件典型使用方式的代码示例框架。请注意,你需要根据实际的插件文档和API进行调整。

首先,确保你已经在pubspec.yaml文件中添加了flutter_yoco依赖:

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

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

接下来,是一个基本的Flutter应用示例,展示如何集成和使用flutter_yoco插件进行支付:

import 'package:flutter/material.dart';
import 'package:flutter_yoco/flutter_yoco.dart';  // 假设插件提供了这样的导入路径

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

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

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

class _PaymentScreenState extends State<PaymentScreen> {
  final FlutterYoco _flutterYoco = FlutterYoco();

  Future<void> initiatePayment() async {
    try {
      // 假设Yoco支付需要这些参数,你需要根据实际的API文档调整
      Map<String, dynamic> paymentParams = {
        'amount': 100.0,  // 支付金额
        'currency': 'USD',  // 货币类型
        'description': 'Test Payment',  // 支付描述
        // 其他必要的支付参数...
      };

      // 调用插件的支付方法
      var result = await _flutterYoco.startPayment(paymentParams);

      // 处理支付结果
      if (result['success']) {
        // 支付成功逻辑
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Payment Success'),
            content: Text('Payment was successful!'),
            actions: <Widget>[
              FlatButton(
                child: Text('OK'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      } else {
        // 支付失败逻辑
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Payment Failed'),
            content: Text('Payment failed with error: ${result['error']}'),
            actions: <Widget>[
              FlatButton(
                child: Text('OK'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      }
    } catch (e) {
      // 处理异常
      print('Error initiating payment: $e');
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Error'),
          content: Text('An error occurred while initiating payment.'),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      );
    }
  }

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

注意

  1. 实际参数:上述代码中的paymentParams是一个假设的参数列表。你需要根据flutter_yoco插件的实际API文档调整这些参数。
  2. 错误处理:示例中包含了基本的错误处理,但你可能需要根据实际需求进行更详细的错误分类和处理。
  3. 插件更新:插件的API可能会随着版本更新而变化,因此务必查阅最新的官方文档。
  4. 权限和配置:支付功能可能需要特定的权限和配置,如网络权限、支付密钥等,这些都需要根据插件的文档进行设置。

在实际开发中,确保遵循插件的官方指南和最佳实践,以确保支付功能的稳定性和安全性。

回到顶部