Flutter支付功能插件mypay_flutter的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter支付功能插件mypay_flutter的使用

简介

介绍一个非官方的Flutter插件，用于与MyPay支付网关无缝集成。该插件使你能够轻松地将MyPay支付网关集成到你的Flutter应用程序中，从而可以从您的尊贵客户那里接收付款。无论你是在开发电子商务平台还是其他任何需要安全交易的应用程序，此插件都能简化并加速集成过程，确保无摩擦体验。

Cover Image

注意事项

此包不依赖于任何插件或原生API进行支付初始化。相反，它利用了Flutter InAppWebView包。特别感谢InAppWebView包的开发者提供了这一宝贵的资源。

功能

  • 无缝集成
  • 简化设置
  • 纯Dart实现
  • 用户友好界面

要求

Android

  • minSdkVersion 设置为至少17。
  • 添加对androidx的支持（参见AndroidX迁移）。

iOS

  • 使用Swift语言 (--ios-language swift)。
  • Xcode版本>= 11。

设置

iOS

无需配置。

更多详情请参阅此处。

Android

在android/app/build.gradle文件中设置minSdkVersion为至少17。

更多详情请参阅此处。

使用方法

1. 添加依赖

在pubspec.yaml文件中添加mypay_flutter作为依赖项：

dependencies:
  mypay_flutter: ^1.0.1

2. 导入包

在Dart代码中导入包：

import 'package:mypay_flutter/mypay_flutter.dart';

3. 创建MyPayConfig实例

创建一个MyPayConfig实例，包含你的支付信息：

final config = MyPayConfig(
  amount: 2000,
  environment: MyPayEnvironment.dev,
  orderId: "QWE-SEW-SFES-QXZS",
  merchantId: "CAFEQ",
  userName: "username1",
  password: "decryptedPassword",
  returnUrl: "https://mypay.com.np"
);

4. 初始化支付

通过调用MyPay.payment()方法来初始化支付：

MyPay.payment(
  context,
  config: config,
  apiKey: "APIKEY123",
  onSuccess: (MyPaySuccessResult successResponse) {
    // 执行服务器验证
  },
  onFailure: (MyPayFailureResult failureResponse) {
    // 处理失败情况
  },
  onCancel: (MyPayCancelResult cancelResponse) {
    // 用户手动取消了交易
  },
);

5. 检查支付结果

一旦支付完成，插件会提供一个MyPaySuccessResult或MyPayFailureResult实例，具体取决于结果。如果支付成功，onSuccess参数会被触发，允许用户执行所需的操作。如果用户取消了支付，onCancel参数会被触发，提供机会采取适当的措施。同样，如果支付失败，onFailure参数会被触发，允许用户处理这种情况。

开发/生产模式

MyPayConfig支持开发和生产模式。对于生产模式，使用MyPayEnvironment.live值作为environment参数；对于开发模式，使用MyPayEnvironment.dev值作为environment参数。以下是一个使用开发模式的例子：

final config = MyPayConfig(
  amount: 2000,
  environment: MyPayEnvironment.dev,
  orderId: "QWE-SEW-SFES-QXZS",
  merchantId: "CAFEQ",
  userName: "username1",
  password: "decryptedPassword",
  returnUrl: "https://mypay.com.np"
);

API

类：MyPay

MyPay类提供MyPay支付集成的主要接口。

方法

  • payment(BuildContext context, {required config, required apiKey, ...}): 使用给定的配置初始化MyPay支付网关。它需要context、myPayConfig、onSuccess、onFailure、onCancel和appbar参数。

属性

  • context (必需): 这是小部件树的构建上下文。
  • apiKey (必需): 这是MyPay提供的API密钥。
  • onSuccess (必需): 当交易成功时被调用。
  • onFailure (必需): 当交易失败时被调用。
  • onCancel (必需): 当交易被取消时被调用。
  • appbar (可选): 这是你可以在其中放置自定义AppBar的参数。

类：MyPayConfig

MyPayConfig类用于配置MyPay支付网关。

属性

  • amount (必需): 这是要在支付时扣除的订单交易金额。
  • environment (必需): 这是为了设置生产环境或开发环境。
  • userName (必需): 这是由MyPay管理员提供的商户用户名。
  • password (必需): 这是由MyPay管理员提供的商户API密码。
  • merchantId (必需): 这是由MyPay管理员提供的唯一商户ID。
  • orderId (必需): 这是由商户提供的订单ID，格式为数字字符串，最小长度为6个字符。
  • returnUrl (可选): 期望MyPay在交易响应后发布的商户URL。默认返回URL为https://mypay.com.np。

类：MyPaySuccessResult

MyPaySuccessResult类表示支付交易的成功结果。

类：MyPayFailureResult

MyPayFailureResult类表示支付交易的失败结果。

MyPayPayButton

MyPayPayButton是一个可定制的按钮小部件，允许用户通过MyPay支付网关发起支付流程。可以通过调用MyPayPayButton构造函数并传递必要的参数轻松地将其集成到你的Flutter应用中。

示例代码

MyPayButton(
  paymentConfig: MyPayConfig(
    amount: 2000,
    environment: MyPayEnvironment.dev,
    orderId: "QWE-SEW-SFES-QXZS",
    merchantId: "CAFEQ",
    userName: "username1",
    password: "decryptedPassword",
    returnUrl: "https://mypay.com.np"
  ),
  width: 40,
  onSuccess: (MyPaySuccessResult successResponse) {
    // 处理成功场景
  },
  onFailure: (MyPayFailureResult failureResponse) {
    // 处理失败场景
  },
  onCancel: (MyPayCancelResult cancelResponse) {
    // 处理取消场景
  },
),

通过MyPayButton，集成MyPay支付网关变得更加简单，只需按下一个按钮即可启动支付流程。

可定制AppBar

你可以在MyPay.Payment函数中通过添加appBar参数来自定义MyPay SDK的AppBar。你可以查看以下示例：

MyPayButton(
  appBar: AppBar(
    title: const Text("MyPay Payment"),
    backgroundColor: Colors.green,
  ),
  paymentConfig: MyPayConfig(
    amount: 2000,
    environment: MyPayEnvironment.dev,
    orderId: "QWE-SEW-SFES-QXZS",
    merchantId: "CAFEQ",
    userName: "username1",
    password: "decryptedPassword",
    returnUrl: "https://mypay.com.np"
  ),
  ...
)

更多关于Flutter支付功能插件mypay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter支付功能插件mypay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用mypay_flutter插件来实现支付功能的示例代码。请注意，这只是一个基础示例，实际应用中可能需要根据具体需求进行调整和扩展。

首先，确保你已经在pubspec.yaml文件中添加了mypay_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  mypay_flutter: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，我们将展示如何在Flutter应用中实现支付功能。

1. 导入插件并配置支付参数

在你的Dart文件中（例如main.dart），导入mypay_flutter插件，并配置支付所需的参数。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyPay Flutter Example'),
        ),
        body: Center(
          child: PaymentButton(),
        ),
      ),
    );
  }
}

class PaymentButton extends StatefulWidget {
  @override
  _PaymentButtonState createState() => _PaymentButtonState();
}

class _PaymentButtonState extends State<PaymentButton> {
  final MyPayFlutter _myPay = MyPayFlutter();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 配置支付参数，这里以假设的参数为例
        Map<String, dynamic> paymentParams = {
          'merchant_id': 'your_merchant_id',
          'amount': '100.00',
          'currency': 'USD',
          'description': 'Test Payment',
          // 其他必要的支付参数
        };

        try {
          // 发起支付请求
          bool result = await _myPay.startPayment(paymentParams);
          if (result) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Payment Successful')),
            );
          } else {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Payment Failed')),
            );
          }
        } catch (e) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Error: ${e.message}')),
          );
        }
      },
      child: Text('Pay Now'),
    );
  }
}

2. 配置Android和iOS平台

在实际使用中，你需要在Android和iOS平台上分别配置mypay_flutter插件所需的参数，如商户ID、密钥等。这通常涉及到修改AndroidManifest.xml、Info.plist文件以及创建相应的支付配置文件。

由于具体配置步骤依赖于mypay_flutter插件的文档和支付平台的要求，这里不展开说明。请查阅mypay_flutter的官方文档以获取详细的配置指南。

3. 运行应用

完成上述步骤后，你可以运行Flutter应用并测试支付功能。确保你的设备或模拟器已经安装了相应的支付应用，并且已经正确配置了支付参数。

flutter run

这个示例展示了如何在Flutter应用中使用mypay_flutter插件来发起支付请求。实际应用中，你可能需要根据支付平台的要求和mypay_flutter插件的文档来调整支付参数和处理支付结果。

回到顶部