Flutter支付插件MobPay的使用

MobPay 是一个用于通过 Interswitch 集成信用卡和移动支付的 Flutter 库。关注经营业务，减少支付对账时间。Quickteller Business 统一了来自不同渠道（信用卡、移动货币和Pesalink）的所有支付，都在一个随业务增长而扩展的支付平台上。使用 Quickteller Business，你将不再担心支付问题。

支持的功能

使用移动货币支付

Mpesa
T-Kash

使用信用卡支付

Verve
Mastercard
Visa

使用银行支付

使用Pesalink支付

使用方法

商户详情

你需要创建一个包含以下信息的 Merchant 实例：

商户 ID
域名 ID

Merchant merchant = Merchant("ISWKEN0001", "ISWKE");

支付详情

创建一个包含以下项目的 Payment 实例：

金额：以双精度货币格式发送，例如 99.90（九十九先令九十戈贝）应发送为 9990。
订单 ID：商户的订单 ID，类似于收据号，允许重复。
交易参考：在商户端的唯一交易标识符，最大长度为 15 个字符，重复将被拒绝。
支付项目
货币代码：例如 KES
描述

Payment payment = Payment(
  100,
  Random().nextInt(1000).toString(),
  Random().nextInt(1000).toString(),
  "food",
  "KES",
  "购买食品"
);

客户详情

创建一个包含以下信息的 Customer 实例：

客户 ID：商户视角下的客户 ID，例如电子邮件、电话或数据库/注册 ID。
名字
姓氏
电子邮件
手机号码
城市
国家
邮政编码
街道
州

Customer customer = Customer(
  "1",
  "John",
  "Doe",
  "someone@yopmail.com",
  "0700000000",
  "NBI",
  "KE",
  "00100",
  'KIBIKO',
  "KAJIADO"
);

额外配置

为了更改某些 UI 元素，我们有一个 Config 对象。允许额外配置的项目包括：

顶部左上角的图标

要更改顶部左上角的图标，请创建一个 Config 实例并传递 HTTPS 图标 URL 作为参数。

Config config = Config(
  iconUrl: "https://images.pexels.com/photos/104372/pexels-photo-104372.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  primaryAccentColor: '#D433FF'
);

MobPay 实例

创建一个 MobPay 实例，并传递商户详情以及是否处于生产环境。

Mobpay mobpay = Mobpay(merchant, false);

交易成功和失败回调

对于成功和失败的交易，你需要传递相应的函数。以下是示例：

交易成功示例

void transactionSuccessCallback(payload) {
  final snackBar = SnackBar(
    content: Text(payload.toString()),
    action: SnackBarAction(
      label: '撤销',
      onPressed: () {
        // 撤销操作
      },
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
}

交易失败示例

void transactionFailureCallback(payload) {
  final snackBar = SnackBar(
    content: Text(payload.toString()),
    action: SnackBarAction(
      label: '撤销',
      onPressed: () {
        // 撤销操作
      },
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
}

支付

调用 pay 函数进行支付：

mobpay.pay(
  payment: payment,
  customer: customer,
  transactionSuccessfulCallback: transactionSuccessCallback,
  transactionFailureCallback: transactionFailureCallback,
  config: config,
  context: context
);

完整示例代码

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:mobpay/mobpay.dart';
import 'package:mobpay/models/Config.dart';
import 'package:mobpay/models/Customer.dart';
import 'package:mobpay/models/Merchant.dart';
import 'package:mobpay/models/Payment.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Interswitch IPG 示例应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Interswitch IPG 示例应用'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _keyForm = GlobalKey<FormState>();
  final _merchantId = TextEditingController(text: "ISWKEN0001");
  final _domainId = TextEditingController(text: "ISWKE");

  final _amount = TextEditingController(text: "100");
  final _transactionRef = TextEditingController(text: Random().nextInt(1000).toString());
  final _orderId = TextEditingController(text: Random().nextInt(1000).toString());
  final _paymentItem = TextEditingController(text: "food");
  final _currencyCode = TextEditingController(text: "KES");
  final _narration = TextEditingController(text: "购买食品");

  final _id = TextEditingController(text: "1");
  final _firstName = TextEditingController(text: "Jane");
  final _secondName = TextEditingController(text: "Doe");
  final _email = TextEditingController(text: "john.doe@yopmail.com");
  final _mobile = TextEditingController(text: "0700000000");
  final _city = TextEditingController(text: "NBI");
  final _country = TextEditingController(text: "KEN");
  final _postalCode = TextEditingController(text: "00100");
  final _street = TextEditingController(text: "KIBIKO");
  final _state = TextEditingController(text: "KAJIADO");

  final _iconUrl = TextEditingController(
      text: "https://images.pexels.com/photos/104372/pexels-photo-104372.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  final _primaryAccentColor = TextEditingController(text: '#D433FF');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            SizedBox(
              height: MediaQuery.of(context).size.height,
              child: Form(
                key: _keyForm,
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: ListView(
                    children: [
                      TextFormField(
                        controller: _merchantId,
                        decoration: InputDecoration(hintText: '商户 ID', labelText: '商户 ID'),
                      ),
                      TextFormField(
                        controller: _domainId,
                        decoration: InputDecoration(hintText: '域名 ID', labelText: '域名 ID'),
                      ),
                      TextFormField(
                        controller: _amount,
                        decoration: InputDecoration(hintText: '金额', labelText: '金额'),
                      ),
                      TextFormField(
                        controller: _transactionRef,
                        decoration: InputDecoration(
                            hintText: '交易参考', labelText: '交易参考'),
                      ),
                      TextFormField(
                        controller: _orderId,
                        decoration: InputDecoration(hintText: '订单 ID', labelText: '订单 ID'),
                      ),
                      TextFormField(
                        controller: _paymentItem,
                        decoration: InputDecoration(hintText: '支付项目', labelText: '支付项目'),
                      ),
                      TextFormField(
                        controller: _currencyCode,
                        decoration: InputDecoration(
                            hintText: '货币代码', labelText: '货币代码'),
                      ),
                      TextFormField(
                        controller: _narration,
                        decoration: InputDecoration(hintText: '描述', labelText: '描述'),
                      ),
                      TextFormField(
                        controller: _id,
                        decoration: InputDecoration(hintText: '客户 ID', labelText: '客户 ID'),
                      ),
                      TextFormField(
                        controller: _firstName,
                        decoration: InputDecoration(hintText: '名字', labelText: '名字'),
                      ),
                      TextFormField(
                        controller: _secondName,
                        decoration: InputDecoration(hintText: '姓氏', labelText: '姓氏'),
                      ),
                      TextFormField(
                        controller: _email,
                        decoration: InputDecoration(hintText: '电子邮件', labelText: '电子邮件'),
                      ),
                      TextFormField(
                        controller: _mobile,
                        decoration: InputDecoration(hintText: '手机号码', labelText: '手机号码'),
                      ),
                      TextFormField(
                        controller: _city,
                        decoration: InputDecoration(hintText: '城市', labelText: '城市'),
                      ),
                      TextFormField(
                        controller: _country,
                        decoration: InputDecoration(hintText: '国家代码', labelText: '国家代码'),
                      ),
                      TextFormField(
                        controller: _postalCode,
                        decoration: InputDecoration(hintText: '邮政编码', labelText: '邮政编码'),
                      ),
                      TextFormField(
                        controller: _street,
                        decoration: InputDecoration(hintText: '街道', labelText: '街道'),
                      ),
                      TextFormField(
                        controller: _state,
                        decoration: InputDecoration(hintText: '州', labelText: '州'),
                      ),
                      TextFormField(
                        controller: _iconUrl,
                        decoration: InputDecoration(hintText: '图标 URL', labelText: '图标 URL'),
                      ),
                      TextFormField(
                        controller: _primaryAccentColor,
                        decoration: InputDecoration(
                            hintText: '主要颜色', labelText: '主要颜色'),
                      ),
                      Padding(
                        padding: EdgeInsets.only(bottom: 50, top: 50),
                        child: ElevatedButton(
                          onPressed: () {
                            Merchant merchant = Merchant(
                                _merchantId.value.text,
                                _domainId.value.text);
                            Payment payment = Payment(
                                int.parse(_amount.value.text),
                                _transactionRef.value.text,
                                _orderId.value.text,
                                _paymentItem.value.text,
                                _currencyCode.value.text,
                                _narration.value.text);
                            Customer customer = Customer(
                                _id.value.text,
                                _firstName.value.text,
                                _secondName.value.text,
                                _email.value.text,
                                _mobile.value.text,
                                _city.value.text,
                                _country.value.text,
                                _postalCode.value.text,
                                _street.value.text,
                                _state.value.text);
                            Config config = Config(
                                iconUrl: _iconUrl.value.text,
                                primaryAccentColor: _primaryAccentColor.value.text);
                            Mobpay mobpay = Mobpay(merchant: merchant, live: true);
                            mobpay.pay(
                                payment: payment,
                                customer: customer,
                                transactionSuccessfullCallback: transactionSuccessfullCallback,
                                transactionFailureCallback: transactionFailureCallback,
                                config: config,
                                context: context);
                          },
                          child: Text("支付"),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(10),
                        child: Text(""),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void transactionSuccessfullCallback(payload) {
    Clipboard.setData(ClipboardData(text: payload.toString()));
    final snackBar = SnackBar(
      content: Text("交易成功" + payload.toString()),
      action: SnackBarAction(
        label: '撤销',
        onPressed: () {
          // 撤销操作
        },
      ),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  void transactionFailureCallback(payload) {
    final snackBar = SnackBar(
      content: Text("交易失败" + payload.toString()),
      action: SnackBarAction(
        label: '撤销',
        onPressed: () {
          // 撤销操作
        },
      ),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }
}

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

songsunli 1楼

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

当然，以下是一个关于如何在Flutter项目中使用MobPay支付插件的示例代码。MobPay是一个假想的支付插件名称，因此以下代码是一个概念性的示例，用于展示如何在Flutter项目中集成和使用支付插件。在实际项目中，你需要参考MobPay支付插件的官方文档和API。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加MobPay支付插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  mobpay: ^x.y.z  # 替换为实际的版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入MobPay插件。

import 'package:mobpay/mobpay.dart';

3. 初始化MobPay

在应用启动时初始化MobPay插件，通常需要设置一些必要的参数，如API密钥、商户ID等。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化MobPay
  MobPay.init(
    apiKey: 'your_api_key',
    merchantId: 'your_merchant_id',
    // 其他初始化参数...
  );

  runApp(MyApp());
}

4. 实现支付功能

在你的支付页面或组件中，实现支付功能。以下是一个简单的示例，展示如何发起支付请求。

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

class PaymentPage extends StatefulWidget {
  @override
  _PaymentPageState createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobPay Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              // 创建支付请求
              var paymentRequest = MobPayPaymentRequest(
                amount: 100.0,  // 支付金额
                currency: 'USD',  // 货币单位
                description: 'Test Payment',  // 支付描述
                // 其他支付参数...
              );

              // 发起支付
              var paymentResult = await MobPay.startPayment(paymentRequest);

              // 处理支付结果
              if (paymentResult.status == MobPayStatus.success) {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Payment Successful'),
                    content: Text('Payment ID: ${paymentResult.paymentId}'),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: Text('OK'),
                      ),
                    ],
                  ),
                );
              } else {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: Text('Payment Failed'),
                    content: Text('Error: ${paymentResult.errorMessage}'),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () => Navigator.of(context).pop(),
                        child: Text('OK'),
                      ),
                    ],
                  ),
                );
              }
            } catch (e) {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text('Error'),
                  content: Text('An error occurred: $e'),
                  actions: <Widget>[
                    TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text('OK'),
                    ),
                  ],
                ),
              );
            }
          },
          child: Text('Pay Now'),
        ),
      ),
    );
  }
}

5. 处理支付回调（可选）

如果你的应用需要在后台处理支付回调（例如，服务器通知），你需要根据MobPay的文档设置相应的回调URL或处理逻辑。这通常涉及到服务器端代码的编写，不在Flutter前端代码的范围内。

注意

上述代码是一个概念性的示例，具体API和方法名需要根据MobPay支付插件的实际文档进行调整。
在实际项目中，务必遵循支付插件的安全最佳实践，如不要在客户端代码中硬编码敏感信息。
测试支付功能时，请使用测试环境和测试账户，避免产生实际费用。