Flutter支付集成插件midtranspayment的使用

Flutter支付集成插件midtranspayment的使用

midtrans 是一个非官方插件，用于在 Flutter 和 Midtrans 移动 SDK 之间进行集成。该插件在 Midtrans 的 Snap 模式下运行。您可以在此 文档 中阅读详细说明。

开始使用

必备条件

1. 客户端密钥：从 Midtrans 商户账户获取。
2. 商户服务器端实现：Midtrans 移动 SDK 需要后端支持。您可以参考 商户服务器实现指南，并根据您的后端需求实现所需的 API。

完成上述条件后，您需要配置项目。

配置项目

修改 AndroidManifest.xml

将以下内容添加到项目的 AndroidManifest.xml 文件中：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hello_example" xmlns:tools="http://schemas.android.com/tools">
   <application
        android:label="hello_example"
        android:icon="@mipmap/ic_launcher"
        tools:replace="android:label"
        android:theme="@style/AppTheme">
        .....
    </application>
</manifest>

修改 styles.xml

找到 android/app/src/main/res/values/styles.xml 文件，并将其修改为以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 启动主题（当系统暗模式设置关闭时） -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- 设置启动画面背景 -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- 应用主题（当进程开始时应用） -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <!-- 正常主题 -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

常见问题排查

如果遇到任何问题，可以打开 GitHub 提交 Issue 或联系开发者。

错误调试

运行时错误（例如调试模式下的崩溃）可能由第三方库引起。错误日志如下：

E/AndroidRuntime(28442): java.lang.AssertionError
E/AndroidRuntime(28442): 	at com.koushikdutta.async.AsyncSSLSocketWrapper.write(AsyncSSLSocketWrapper.java:390)

解决方法：

• 切换到发布模式运行。
• 将 Gradle 版本降级至 4.0.2 或更低版本。

修改 android/build.gradle 文件：

dependencies {
        classpath 'com.android.tools.build:gradle:4.0.2'
        .....
}

完整示例代码

以下是一个完整的示例代码，展示如何使用 midtranspayment 插件进行支付集成：

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

import 'package:flutter/services.dart';
import 'package:midtrans/midtranspayment.dart';

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

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

class _MyAppState extends State<MyApp> {
  final midtrans = Midtrans();
  String _platformVersion = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    midtrans.init(MidtransConfig(
      clientKey: 'YOUR_CLIENT_KEY', // 替换为您的客户端密钥
      merchantBaseUrl: 'https://YOUR_MERCHANT_URL_DOMAIN.com/', // 替换为您的商户 URL
      colorTheme: MidtransColorTheme(
        lightPrimaryColor: Colors.deepOrange, // 主色调（亮模式）
        darkPrimaryColor: Colors.deepOrange, // 主色调（暗模式）
        secondaryColor: Colors.blueAccent, // 辅助色
      ),
    ));
    midtrans.setTransactionFinishCallback((result) {
      print("Result ${result.status}"); // 打印交易状态
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Midtrans Payment Example'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await midtrans.payTransaction(MidtransTransaction(
              amount: 40000, // 支付金额（单位为分）
              skipCustomer: false, // 是否跳过客户信息
              midtransCustomer: MidtransCustomer(
                customerIdentifier: "USER01", // 用户标识符
                phone: "089689008988", // 用户电话
                lastName: "Hanif", // 用户姓氏
                firstName: "Ibrahim", // 用户名字
                email: 'email@mail.com', // 用户邮箱
                billingAddress: MidtransCustomerAddress(
                  address: "Losari Kidul", // 地址
                  city: "Cirebon", // 城市
                  postalCode: "45192", // 邮政编码
                ),
              ),
              items: [
                MidtransItem("id-10", 20000, 2, "Makanan"), // 商品项
              ],
            ));
          },
        ),
      ),
    );
  }
}