Flutter支付插件midtrans_sdk_v4的使用

Flutter支付插件midtrans_sdk_v4的使用

midtrans_sdk_v4

一个用于 Midtrans Mobile SDK 的 Flutter 插件。访问 https://midtrans.com。

支持的平台

• ✅ Android
• ✅ iOS
• ❌ Web

使用方法

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

开始使用

查看示例目录以了解如何使用 snap token 开始支付。

Android

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

打开 styles.xml 文件，并向文件中添加 AppTheme 样式：

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

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

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

MidtransConfig

开始使用 Midtrans 前，你需要创建一个 MidtransSDK 实例，然后使用任何其他功能。MidtransSDK 接收一个 MidtransConfig 对象。这是你可以配置 MidtransSDK 实例并连接到你的 Midtrans 账户的方式。

示例：

import 'package:midtrans_sdk_v4/midtrans_sdk_v4.dart';

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

初始化SDK

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

MidtransSDK.init(
    config: config,
);

开始支付

支付方法屏幕

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

使用snap token开始支付

我们提供了 SDK 方法，允许你通过传递 snap token 作为 startPaymentUiFlow 方法的参数来使用 snap token 进行支付，而无需首先初始化交易请求。

示例代码：

import 'package:flutter/material.dart';

import 'package:midtrans_sdk_v4/midtrans_sdk_v4.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](/user/override)
  _MyAppState createState() => _MyAppState();
}

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

  [@override](/user/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](/user/override)
  void dispose() {
    _midtrans?.removeTransactionFinishedCallback();
    super.dispose();
  }

  [@override](/user/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'],
              );
            },
          ),
        ),
      ),
    );
  }
}