Flutter支付集成插件tingo_pay的使用

Flutter支付集成插件tingo_pay的使用

特性

版本: 0.0.9


### 特性
支付服务

### 开始使用
此包为Flutter开发者提供了方便使用Tingo支付网关的方法。

### 使用方法
初始化Tingo支付并在您的应用中使用Tingo网关小部件。

```dart
import 'package:flutter/material.dart';
import 'package:tingo_pay/tingo_controller.dart';
import 'package:tingo_pay/tingo_pay.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      title: 'TingoPay Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  [@override](/user/override)
  void initState() {
    // 初始化这里
    Tingo.init(
      merchantKey: "GnL1MblYPNDomiH0",
      publicKey: "PUB-oAx2H6CmWDvvbBeDv5X9Ge4vzSeJC5uK",
      successUrl: "sampleSuccessUrl",
      callbackUrl: "sampleCallbackUrl",
      failUrl: "sampleFailUrl",
    );
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TingoGateWay(
      email: "samwhitedove@gmail.com",
      description: "Description",
      firstName: "seun",
      lastName: "samuel",
    );
  }
}

额外信息

所有您需要做的就是初始化该包，该包会处理一切。

完整示例代码

import 'package:flutter/material.dart';
import 'package:tingo_pay/tingo_controller.dart';
import 'package:tingo_pay/tingo_pay.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      title: 'TingoPay Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  void initState() {
    // 初始化Tingo支付
    Tingo.init(
      merchantKey: "GnL1MblYPNDomiH0",
      publicKey: "PUB-oAx2H6CmWDvvbBeDv5X9Ge4vzSeJC5uK",
      successUrl: "sampleSuccessUrl",
      callbackUrl: "sampleCallbackUrl",
      failUrl: "sampleFailUrl",
    );
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const TingoGateWay(
      email: "samwhitedove@gmail.com",
      description: "Description",
      firstName: "seun",
      lastName: "samuel",
    );
  }
}

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

1 回复

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


tingo_pay 是一个用于集成支付功能的 Flutter 插件，通常用于在 Flutter 应用中实现支付功能，特别是与 TingoPay 支付平台的集成。以下是如何在 Flutter 项目中使用 tingo_pay 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  tingo_pay: ^latest_version  # 请替换为最新的版本号

然后运行 flutter pub get 来获取依赖。

2. 初始化 TingoPay

在启动支付之前，你需要初始化 TingoPay。通常这需要在应用的 main.dart 文件中完成：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await TingoPay.initialize(
    appId: 'YOUR_APP_ID',  // 你的 TingoPay App ID
    appKey: 'YOUR_APP_KEY', // 你的 TingoPay App Key
    env: TingoPayEnv.SANDBOX, // 或者 TingoPayEnv.PRODUCTION
  );
  runApp(MyApp());
}

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

3. 发起支付

在你的支付页面中，你可以使用 TingoPay 来发起支付请求。以下是一个简单的示例：

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

class PaymentScreen extends StatelessWidget {
  Future<void> _makePayment() async {
    try {
      final response = await TingoPay.pay(
        amount: 100.0, // 支付金额
        currency: 'USD', // 货币类型
        orderId: 'ORDER12345', // 订单ID
        productName: 'Example Product', // 商品名称
        productDescription: 'This is an example product', // 商品描述
        customerEmail: 'customer@example.com', // 客户邮箱
        callbackUrl: 'https://example.com/callback', // 回调URL
      );

      if (response.status == TingoPayStatus.SUCCESS) {
        print('Payment successful: ${response.transactionId}');
      } else {
        print('Payment failed: ${response.message}');
      }
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TingoPay Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _makePayment,
          child: Text('Make Payment'),
        ),
      ),
    );
  }
}

4. 处理支付回调

在支付完成后，TingoPay 会将支付结果返回到你指定的 callbackUrl。你需要在服务器端处理这些回调，并根据支付结果更新订单状态。

5. 处理支付结果

你可以在 TingoPay.pay 方法的回调中处理支付结果。TingoPayStatus 表示支付的状态，你可以根据状态来更新 UI 或执行其他操作。

if (response.status == TingoPayStatus.SUCCESS) {
  // 支付成功
} else if (response.status == TingoPayStatus.FAILED) {
  // 支付失败
} else if (response.status == TingoPayStatus.PENDING) {
  // 支付处理中
}
回到顶部