Flutter支付处理插件paytech的使用

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

Flutter支付处理插件paytech的使用

安装

Paytech 可通过 pub.dev 获取。要安装它,请在 pubspec.yaml 文件中添加以下行:

dependencies:  
  paytech: ^5.0.2 #最新 Flutter 版本(Android 编译版本为 34)
  
dependency_overrides:
  webview_flutter_android: 3.16.1
dependencies:  
  paytech: ^4.0.0 #Flutter 版本
dependencies:  
  paytech: ^3.0.2 #首次引入 null-safety
dependencies:  
  paytech: ^0.1.2 #不支持 null-safety

重要事项

当你向 https://paytech.sn/api/payment/request-payment 发起请求时,应该设置 success_urlcancel_url 字段分别为相应值:

  • https://paytech.sn/mobile/success 用于成功 URL。
  • https://paytech.sn/mobile/cancel 用于取消 URL。

示例如下:

{
  "item_name":  "商务机票 巴黎-达喀尔",
  "item_price":  560000,
  "currency":  "XOF",
  "ref_command":  "RV3Q2LDUQ0FMP9F2EV2OFU8WV2K2VBZFED5R0QQO33IXSVTHSK48LD9GHXCO79",
  "command_name":  "为 John Mcarty 购买三张巴黎至达喀尔的商务机票",
  "ipn_url":  "https://partner-domaine.com/api/ipn_callback",
  "success_url":  "https://paytech.sn/mobile/success",
  "cancel_url":  "https://paytech.sn/mobile/cancel",
  "custom_field":  "some_serialized_data"
}

这样做将使插件能够正确处理事件。

示例

要运行示例项目,请克隆仓库,并从 Example 目录中运行 flutter pub get

导入 PayTech 模块:

import 'package:paytech/paytech.dart';

使用 Paytech 小部件进行支付:

onPressed: () async {
  /** 
   * 从后端获取此 URL
   * 后端必须调用 https://paytech.sn/api/payment/request-payment 以生成支付令牌
   * 设置 success_url 为 https://paytech.sn/mobile/success
   * 设置 cancel_url 为 https://paytech.sn/mobile/cancel
   */
  var paymentUrl = "https://paytech.sn/payment/checkout/729b3e3021226cd27905";
  
  bool? paymentResult = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => PayTech(paymentUrl)),
  );

  if (paymentResult == true) {
    print("支付成功");
  } else {
    print("支付失败");
  }
},

PayTech 小部件

你可以向 PayTech 构造函数传递一些可选的附加参数:

{
  backButtonIcon: IconData, // 默认 Icons.arrow_back_ios
  appBarTitle: String, // 默认 "PayTech"
  centerTitle: bool, // 默认 true
  appBarBgColor: Color, // 默认 Color(0xFF1b7b80)
  appBarTextStyle: TextStyle, // 默认 TextStyle()
  hideAppBar: bool, // 默认 false
}

Web 支持(仅适用于 > paytech 5.0.2)

更新 web/index.html

对于 Web 平台,你需要在你的 web/index.html 文件中包含插件提供的 web_support.js 文件。此文件有助于初始化 Flutter Web 的 WebView。

  • https://raw.githubusercontent.com/touskar/paytech-flutter/master/web_support.js 下载 web_support.js
  • 包含到 /assets/packages/paytech/assets/web/
  • 在 web/index.html 的 <head> 部分添加以下脚本标签:
<head>
  <!-- ... -->
  <script type="application/javascript" src="/assets/packages/paytech/assets/web/web_support.js" defer></script>
  <!-- ... -->
</head>

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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用paytech插件来处理支付的代码案例。请注意,实际使用时需要替换一些占位符,如API密钥、支付配置等,这些通常来自你的支付服务提供商。

1. 添加依赖

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

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

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

2. 配置Android和iOS

Android

android/app/src/main/AndroidManifest.xml中添加必要的权限,比如网络权限:

<uses-permission android:name="android.permission.INTERNET"/>

同时,你可能需要在android/app/build.gradle文件中配置一些特定的签名信息,这通常与你的支付服务提供商的要求有关。

iOS

ios/Runner/Info.plist中,根据需要添加必要的权限,如网络访问权限。此外,你可能需要在Xcode中配置一些支付相关的URL schemes或entitlements,这取决于你的支付服务提供商的具体要求。

3. 初始化Paytech插件

在你的Flutter项目的main.dart或其他适当的文件中,初始化Paytech插件:

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

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

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

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

class _PaymentScreenState extends State<PaymentScreen> {
  Paytech _paytech = Paytech();

  @override
  void initState() {
    super.initState();
    // 初始化Paytech,通常这里需要传入你的API密钥或其他配置信息
    _paytech.initialize(
      apiKey: '你的API密钥', // 替换为你的实际API密钥
      environment: PaytechEnvironment.sandbox, // 或 PaytechEnvironment.production
    );
  }

  void _makePayment() async {
    try {
      var response = await _paytech.startPayment(
        amount: 100.0, // 支付金额
        currency: 'USD', // 货币代码
        description: 'Test Payment', // 支付描述
        // 其他必要的支付参数,如支付方式、用户信息等,根据Paytech文档添加
      );
      
      if (response.status == 'success') {
        // 支付成功处理
        print('Payment successful: ${response.data}');
      } else {
        // 支付失败处理
        print('Payment failed: ${response.error}');
      }
    } catch (e) {
      // 错误处理
      print('Error during payment: $e');
    }
  }

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

4. 处理支付回调

根据你的支付服务提供商的要求,你可能需要在Android和iOS原生代码中处理支付回调。这通常涉及到在MainActivity.kt(或MainActivity.java)和AppDelegate.swift(或AppDelegate.m)中添加代码来处理URL schemes或通知。

由于这部分高度依赖于具体的支付服务提供商和平台要求,这里不提供具体的代码示例。请参考paytech插件的官方文档或你的支付服务提供商的集成指南来获取这部分信息。

注意事项

  • 在实际项目中,请确保处理敏感信息(如API密钥)的安全性。
  • 在发布应用之前,请在测试环境中充分测试支付流程。
  • 遵守支付服务提供商的使用条款和隐私政策。

希望这个代码案例能帮助你在Flutter项目中集成和使用paytech插件来处理支付。如果你有更具体的问题或需要进一步的帮助,请随时提问。

回到顶部