Flutter支付集成插件midpay的使用

Midtrans Payment Gateway for Flutter

平台支持

Android 设置

在 android/app/src/main/res/values/styles.xml 中添加样式：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

完整的 styles.xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <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>
</resources>

在 AndroidManifest.xml 中的应用程序标签中添加样式：

tools:replace="android:label"
android:theme="@style/AppTheme"

iOS 设置

无需特定设置。

BASE_URL

请参考 Midtrans 官方文档 或 商户服务器 GitHub 示例 获取更多信息。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用 midpay 插件进行支付集成：

main.dart

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

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  final midpay = Midpay();

  // 测试支付
  _testPayment() async {
    // 对于Android，在调试时自动使用沙箱环境，在发布时使用生产环境
    midpay.init("CLIENT KEY", "BASE_URL", environment: Environment.sandbox);
    midpay.setFinishCallback(_callback);

    var midtransCustomer = MidtransCustomer(
        'Zaki', 'Mubarok', 'kakzaki@gmail.com', '085704703691');

    List<MidtransItem> listitems = [];
    var midtransItems = MidtransItem('IDXXX', 50000, 2, 'Charger');
    listitems.add(midtransItems);

    var midtransTransaction = MidtransTransaction(
        100000, midtransCustomer, listitems,
        skipCustomer: true);

    await midpay.makePayment(midtransTransaction).catchError((err) {
      print("ERROR $err");
    });
  }

  // 回调函数
  Future<void> _callback(TransactionFinished finished) async {
    print("Finish $finished");
    return Future.value(null);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Midpay Plugin example app'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text("Payment"),
            onPressed: () => _testPayment(),
          ),
        ),
      ),
    );
  }
}

使用说明

1. 初始化：通过 midpay.init() 方法初始化 midpay 插件，并设置您的客户端密钥、基础URL和环境（沙箱或生产）。
2. 设置回调：使用 midpay.setFinishCallback() 方法设置支付完成后的回调函数。
3. 创建客户信息：使用 MidtransCustomer 类创建客户对象。
4. 创建商品列表：使用 MidtransItem 类创建商品对象，并将其添加到商品列表中。
5. 创建交易对象：使用 MidtransTransaction 类创建交易对象。
6. 发起支付请求：调用 midpay.makePayment() 方法发起支付请求。
7. 处理回调：在回调函数中处理支付结果。

通过以上步骤，您可以在Flutter应用中集成Midtrans支付网关。希望这个示例能帮助您快速上手并成功实现支付功能。如果有任何问题，请随时提问！