Flutter移动支付插件flutter_jiopay_pg的使用

JioPay Flutter

Flutter 插件用于 JioPay SDK。

开始使用

此 Flutter 插件是围绕我们的 Android 和 iOS SDK 构建的包装器。

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

flutter_jiopay_pg: ^0.0.1

注意（Android）：确保应用程序的最低 API 级别为 19 或更高。

使用方法

示例代码可以在 example/lib/main.dart 中找到。

导入包

import 'package:flutter_jiopay_pg/flutter_jiopay_pg.dart';

创建 Jiopay 实例

JiopayPg jiopayFlutterPlugin = JiopayPg();

添加事件监听器

该插件使用基于事件的通信方式，并在支付失败或成功时发出事件。

事件名称通过 JiopayPg 类中的常量 EVENT_PAYMENT_SUCCESS 和 EVENT_PAYMENT_ERROR 暴露。

使用 JiopayPg 实例上的 on(String event, Function handler) 方法附加事件监听器。

jiopayFlutterPlugin.on(JiopayPg.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
jiopayFlutterPlugin.on(JiopayPg.EVENT_PAYMENT_ERROR, _handlePaymentError);

处理程序定义如下：

void _handlePaymentSuccess(PaymentSuccessResponse response) {
  debugPrint(msg: "SUCCESS: " + response.tnxId!);
}

void _handlePaymentError(PaymentFailureResponse response) {
  debugPrint('_handlePaymentError: $response');
}

设置选项

var options = {
  'appaccesstoken': "APP_ACCESS_TOKEN",
  'appidtoken': "APP_ID_TOKEN",
  'intentid': "INTENT_ID",
  'buildVariant': "prod", // 可选值：pp, sit, prod
  'theme': {
    'brandColor': "BRAND_COLOR_HEX",
    'bodyBgColor': "BODY_BG_COLOR_HEX",
    'bodyTextColor': "BODY_TEXT_COLOR",
    'headingText': "HEADING_TEXT_COLOR",
  },
};

打开支付页面

jiopayFlutterPlugin.open(options);

示例代码

以下是完整的示例代码，包含主应用文件和支付页面。

主应用文件 (example/lib/main.dart)

import 'package:flutter/material.dart';
import 'HomeScreen.dart'; // 引入支付页面

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 初始化状态
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown'; // 平台版本信息

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 应用主体
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'), // 应用标题
        ),
        body: HomeScreen(), // 显示支付页面
      ),
    );
  }
}

支付页面 (example/lib/HomeScreen.dart)

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

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final JiopayPg _jiopayFlutterPlugin = JiopayPg(); // 创建 Jiopay 实例

  [@override](/user/override)
  void initState() {
    super.initState();

    // 添加事件监听器
    _jiopayFlutterPlugin.on(JiopayPg.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
    _jiopayFlutterPlugin.on(JiopayPg.EVENT_PAYMENT_ERROR, _handlePaymentError);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 打开支付页面
          _jiopayFlutterPlugin.open({
            'appaccesstoken': "APP_ACCESS_TOKEN",
            'appidtoken': "APP_ID_TOKEN",
            'intentid': "INTENT_ID",
            'buildVariant': "prod",
            'theme': {
              'brandColor': "#FF5722",
              'bodyBgColor': "#FFFFFF",
              'bodyTextColor': "#000000",
              'headingText': "#000000",
            },
          });
        },
        child: Text("支付"),
      ),
    );
  }

  // 处理支付成功事件
  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    debugPrint("SUCCESS: " + response.tnxId!);
  }

  // 处理支付失败事件
  void _handlePaymentError(PaymentFailureResponse response) {
    debugPrint('_handlePaymentError: $response');
  }
}