Flutter支付功能插件mdpay的使用

Flutter支付功能插件mdpay的使用

Midtrans支付网关插件用于Flutter

Flutter Midtrans支付插件

请在使用此库之前阅读Midtrans文档，并确保您已经拥有Midtrans账户以访问仪表板。

Android设置

仅支持AndroidX，并且最低编译目标为28

在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">
        <!-- 显示启动屏幕。自动移除当Flutter绘制第一帧时 -->
        <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中应用主题：

android:theme="@style/AppTheme"

iOS设置

无需特定设置。

示例用法

确保您已经准备了以下变量：

• YOUR_CLIENT_ID: Midtrans客户端ID
• YOUR_URL_BASE: 后端API的基础URL以处理支付

示例代码如下：

import 'package:mdpay/mdpay.dart';
...

final mdpay = Mdpay();

// 初始化客户端ID和URL基础
mdpay.init("YOUR_CLIENT_ID", "YOUR_URL_BASE");

// 设置支付完成后的回调
mdpay.setFinishCallback((finished) {
    // finished 是 TransactionFinished
});

// 执行支付
mdpay
    .makePayment(
        MidtransTransaction(
            7500,
            MidtransCustomer(
                "Apin", "Prastya", "apin.klas@gmail.com", "08123456789"),
            [
                MidtransItem(
                    "5c18ea1256f67560cb6a00cdde3c3c7a81026c29",
                    7500,
                    2,
                    "USB FlashDisk",
                )
            ],
            skipCustomer: true,
            customField1: "ANYCUSTOMFIELD"),
    )
    .catchError((err) => print("ERROR $err"));

完整示例代码

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

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

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

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

class _MyAppState extends State<MyApp> {
  bool isMakePayment = false;
  final mdpay = Mdpay();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化客户端ID和URL基础
    mdpay.init("YOUR_CLIENT_ID", "YOUR_URL_BASE");
    // 设置支付完成后的回调
    mdpay.setFinishCallback(_callback);
  }

  // 执行支付
  _makePayment() {
    setState(() {
      isMakePayment = true;
    });
    mdpay
        .makePayment(
          MidtransTransaction(
              7500,
              MidtransCustomer(
                  "Apin", "Prastya", "apin.klas@gmail.com", "085235419949"),
              [
                MidtransItem(
                  "5c18ea1256f67560cb6a00cdde3c3c7a81026c29",
                  7500,
                  2,
                  "USB FlashDisk",
                )
              ],
              skipCustomer: true,
              customField1: "ANYCUSTOMFIELD"),
        )
        .catchError((err) => print("ERROR $err"));
  }

  // 支付完成后的回调
  Future<void> _callback(TransactionFinished finished) async {
    setState(() {
      isMakePayment = false;
    });
    return Future.value(null);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('mdpay 插件示例'),
        ),
        body: new Center(
          child: isMakePayment
              ? CircularProgressIndicator()
              : ElevatedButton(
                  child: Text("执行支付"),
                  onPressed: () => _makePayment(),
                ),
        ),
      ),
    );
  }
}