Flutter支付集成插件midtrans_sdk的使用

midtrans_sdk

这是一个用于Flutter的Midtrans移动SDK插件。访问 Midtrans官网 获取更多信息。

支持的平台

• ✅ Android
• ✅ iOS
• ❌ Web

使用方法

要使用此插件，请在您的 pubspec.yaml 文件中添加 midtrans_sdk 作为依赖项。

入门指南

请参阅 示例目录 了解如何使用 midtrans_sdk 开始支付的示例。

Android

Midtrans SDK UIKit 需要 Appcompat 来打开支付UI流屏幕。

1. 打开 styles.xml 文件并添加 AppTheme 样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>

1. 打开 AndroidManifest.xml 文件并为您的应用程序主题使用 AppTheme 样式：

<manifest>
  ...
  <application
      android:label="midtrans_sdk_example"
      tools:replace="android:label"
      android:theme="@style/AppTheme"
     >
     ...
  </application>
  ...
</manifest>

MidtransConfig

要开始使用 Midtrans，您需要首先创建一个 MidtransSDK 实例，然后才能使用我们SDK的其他功能。MidtransSDK 接收一个 MidtransConfig 对象。这是配置 MidtransSDK 实例并将其连接到您的 Midtrans 账户的方法。

示例：

import 'package:midtrans_sdk/midtrans_sdk.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart' as DotEnv;

var config = MidtransConfig(
  clientKey: DotEnv.env['MIDTRANS_CLIENT_KEY'] ?? "",
  merchantBaseUrl: DotEnv.env['MIDTRANS_MERCHANT_BASE_URL'] ?? "",
  colorTheme: ColorTheme(
    colorPrimary: Theme.of(context).colorScheme.secondary,
    colorPrimaryDark: Theme.of(context).colorScheme.secondary,
    colorSecondary: Theme.of(context).colorScheme.secondary,
  ),
);

初始化SDK

下一步是调用 init 方法，该方法需要一个 MidtransConfig 对象参数 config。调用 init 后，您可以使用 Midtrans SDK 的所有功能。初始化 SDK 以启用 Midtrans 开始支付。

MidtransSDK.init(
    config: config,
);

开始支付

显示支付方法屏幕

midtrans_sdk 的默认模式是显示支付方法屏幕。此屏幕将显示您所有可用的支付方法。您可以通过 Snap Preferences 在 MAP 中启用/禁用支付方法。

使用snap token开始支付

我们提供了一个SDK方法，允许您使用 snap token 进行支付，而无需先初始化交易请求。您只需将 snap token 作为 startPaymentUiFlow 方法的参数传递即可。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 midtrans_sdk 插件进行支付。

import 'package:flutter/material.dart';
import 'package:midtrans_sdk/midtrans_sdk.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart' as DotEnv;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DotEnv.load();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  MidtransSDK? _midtrans;

  @override
  void initState() {
    super.initState();
    initSDK();
  }

  void initSDK() async {
    _midtrans = await MidtransSDK.init(
      config: MidtransConfig(
        clientKey: DotEnv.env['MIDTRANS_CLIENT_KEY'] ?? "",
        merchantBaseUrl: DotEnv.env['MIDTRANS_MERCHANT_BASE_URL'] ?? "",
        colorTheme: ColorTheme(
          colorPrimary: Theme.of(context).colorScheme.secondary,
          colorPrimaryDark: Theme.of(context).colorScheme.secondary,
          colorSecondary: Theme.of(context).colorScheme.secondary,
        ),
      ),
    );
    _midtrans?.setUIKitCustomSetting(
      skipCustomerDetailsPages: true,
    );
    _midtrans!.setTransactionFinishedCallback((result) {
      print(result.toJson());
    });
  }

  @override
  void dispose() {
    _midtrans?.removeTransactionFinishedCallback();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text("Pay Now"),
            onPressed: () async {
              _midtrans?.startPaymentUiFlow(
                token: DotEnv.env['SNAP_TOKEN'],
              );
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们首先加载了环境变量，然后初始化了 MidtransSDK，设置了自定义UI设置，并注册了交易完成回调。最后，我们在界面上添加了一个按钮，点击该按钮将启动支付流程。