Flutter支付集成插件flutter_khipu的使用

Flutter支付集成插件flutter_khipu的使用

安装插件

首先，在您的 pubspec.yaml 文件中添加此插件作为依赖项：

flutter pub add flutter_khipu

然后获取依赖项：

flutter pub get

平台设置

iOS

目前，对于 iOS 开发来说，无需进行特殊设置。

Android

仓库

在 android/build.gradle 文件中添加 Khipu 仓库：

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://dev.khipu.com/nexus/content/repositories/khenshin' }
    }
}

请注意，google() 和 mavenCentral() 仓库通常已经添加。

Jetifier

如果您仍在使用 Jetifier，请将 jackson-core 添加到忽略列表中。编辑 android/gradle.properties 文件并添加以下行：

android.jetifier.ignorelist = jackson-core

Gradle 插件

确保 android/settings.gradle 文件包含至少版本 1.9.0 的 Kotlin Android Gradle 插件：

plugins {
    id "org.jetbrains.kotlin.android" version "1.9.0" apply false
}

使用插件

您可以使用以下代码来初始化和启动支付操作：

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

import 'package:flutter/services.dart';
import 'package:flutter_khipu/flutter_khipu.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  KhipuResult _result = KhipuResult();
  final _flutterKhipuPlugin = FlutterKhipu();

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

  // 平台消息是异步的，所以我们在这里初始化。
  Future<void> initPlatformState() async {
    KhipuResult result;
    // 平台消息可能会失败，因此我们使用 try/catch 处理 PlatformException。
    // 我们还处理消息可能返回 null 的情况。
    try {
      KhipuStartOperationOptions options = KhipuStartOperationOptions(
          operationId: 'mxitm6yzdjwl', // 支付意图的唯一标识符
          locale: 'es_CL', // 区域设置，用于界面语言
          title: 'FlutterKhipu', // 显示在顶部栏的文本
          skipExitPage: true, // 是否跳过结束页面
          theme: 'light', // 界面主题，可以是 light、dark 或 system
          colors: KhipuColors(
              // darkBackground: '#00ff00',
              // darkPrimary: '#ff0000',
              // darkOnBackground: '#0000ff',
              // darkTopBarContainer: '#ffffff',
              // darkOnTopBarContainer: '#333333'
              ));

      result = await _flutterKhipuPlugin.startOperation(options) ?? KhipuResult();
    } on PlatformException {
      result = KhipuResult();
    }

    // 如果小部件从树中被移除而异步平台消息正在飞行，我们希望丢弃回复而不是调用 setState 来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _result = result;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text('OperationId: ${_result.operationId ?? '尚未获取'}\n'),
            Text('result: ${_result.result ?? '尚未获取'}\n'),
            Text('exitTitle: ${_result.exitTitle ?? '尚未获取'}\n'),
            Text('exitMessage: ${_result.exitMessage ?? '尚未获取'}\n'),
            Text('exitUrl: ${_result.exitUrl ?? '尚未获取'}\n'),
            Text('failureReason: ${_result.failureReason ?? '尚未获取'}\n'),
            Text('continueUrl: ${_result.continueUrl ?? '尚未获取'}\n'),
            Text(
                'events: ${_result.events?.map((event) => '${event.name}(${event.type}) ${event.timestamp}').join(" - ") ?? '尚未获取'}\n'),
          ],
        )),
      ),
    );
  }
}

KhipuResult 对象将包含以下字段：

• operationId: 字符串，表示支付意图的唯一标识符。
• exitTitle: 字符串，表示在退出屏幕上向用户显示的标题，反映操作的结果。
• exitMessage: 字符串，表示向用户显示的消息，提供有关操作结果的额外详细信息。
• exitUrl: 字符串，表示应用程序在过程结束时返回的 URL。
• result: 字符串，表示操作的一般结果，可能的值包括：
  • OK: 成功
  • ERROR: 错误
  • WARNING: 警告
  • CONTINUE: 操作需要更多步骤
• failureReason: 字符串（可选），描述失败的原因，如果操作未成功。
• continueUrl: 字符串（可选），仅当结果为 CONTINUE 时可用，指示需要继续操作的 URL。
• events: 数组，表示生成支付所采取的步骤及其时间戳。

示例代码

以下是完整的示例代码：

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

import 'package:flutter/services.dart';
import 'package:flutter_khipu/flutter_khipu.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  KhipuResult _result = KhipuResult();
  final _flutterKhipuPlugin = FlutterKhipu();

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

  // 平台消息是异步的，所以我们在这里初始化。
  Future<void> initPlatformState() async {
    KhipuResult result;
    // 平台消息可能会失败，因此我们使用 try/catch 处理 PlatformException。
    // 我们还处理消息可能返回 null 的情况。
    try {
      KhipuStartOperationOptions options = KhipuStartOperationOptions(
          operationId: 'mxitm6yzdjwl', // 支付意图的唯一标识符
          locale: 'es_CL', // 区域设置，用于界面语言
          title: 'FlutterKhipu', // 显示在顶部栏的文本
          skipExitPage: true, // 是否跳过结束页面
          theme: 'light', // 界面主题，可以是 light、dark 或 system
          colors: KhipuColors(
              // darkBackground: '#00ff00',
              // darkPrimary: '#ff0000',
              // darkOnBackground: '#0000ff',
              // darkTopBarContainer: '#ffffff',
              // darkOnTopBarContainer: '#333333'
              ));

      result = await _flutterKhipuPlugin.startOperation(options) ?? KhipuResult();
    } on PlatformException {
      result = KhipuResult();
    }

    // 如果小部件从树中被移除而异步平台消息正在飞行，我们希望丢弃回复而不是调用 setState 来更新我们的非存在的外观。
    if (!mounted) return;

    setState(() {
      _result = result;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text('OperationId: ${_result.operationId ?? '尚未获取'}\n'),
            Text('result: ${_result.result ?? '尚未获取'}\n'),
            Text('exitTitle: ${_result.exitTitle ?? '尚未获取'}\n'),
            Text('exitMessage: ${_result.exitMessage ?? '尚未获取'}\n'),
            Text('exitUrl: ${_result.exitUrl ?? '尚未获取'}\n'),
            Text('failureReason: ${_result.failureReason ?? '尚未获取'}\n'),
            Text('continueUrl: ${_result.continueUrl ?? '尚未获取'}\n'),
            Text(
                'events: ${_result.events?.map((event) => '${event.name}(${event.type}) ${event.timestamp}').join(" - ") ?? '尚未获取'}\n'),
          ],
        )),
      ),
    );
  }
}