Flutter支付插件alatpay_flutter的使用

AlatPay支付SDK

AlatPayFlutter 类是一个 Flutter 小部件，允许你在 Flutter 项目中集成 WEMA 银行的 AlatPay 支付网关。它提供了一个 WebView，加载包含交易详情的 AlatPay 支付页面。该类处理来自支付网关的响应，并提供了用于处理成功交易和错误的回调函数。该类需要 metaData、businessId、apiKey 和 amount 等参数来处理支付。它支持 Android、iOS 和 Web 平台。其他平台即将推出。

作者

• Gideon Chukwuoma
• @egideonchuks
• 个人网站

特性

• 与 AlatPay 支付网关集成：AlatPayFlutter 类允许你轻松地将 Moamalat 支付网关集成到你的 Flutter 应用中。
• WebView 集成：该类提供一个 WebView，加载 AlatPay 的支付页面并处理交易详情。
• 交易处理：该类处理来自支付网关的响应，并提供回调函数以处理成功交易和错误。
• 安全交易：该类生成 AlatPay 所需的安全哈希，确保交易安全。
• 可定制化：该类可定制，并允许你配置 apiKey、businessId、currency、amount 和 metaData 等参数以处理支付。

总的来说，AlatPayFlutter 类提供了一种方便且安全的方式将 AlatPay 支付网关集成到你的 Flutter 应用中。

文档

• <code>businessId</code>：从 AlatPay 获取的企业 ID。
• <code>amount</code>：交易金额。
• <code>apiKey</code>：从 AlatPay 获取的 API 密钥。
• <code>onTransaction</code>：当支付成功完成时调用的回调函数。
• <code>onClose</code>：当服务关闭时调用的回调函数。

安装

要使用此包，请在 pubspec.yaml 文件中添加 alatpay_flutter 作为依赖项。

dependencies:
  alatpay_flutter: latest_version

示例

如何使用 alatpay_flutter 包

import 'dart:io';

import 'package:alatpay_flutter/alatpay_flutter.dart';
import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';

import 'screens/success.dart';
import 'src/constants.dart';
import 'src/controllers.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AlatPay',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: kAccentColor),
        useMaterial3: true,
      ),
      home: const PaymentScreen(),
    );
  }
}

class PaymentScreen extends StatefulWidget {
  const PaymentScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PaymentScreen> createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  // 布尔变量
  bool isLoading = false;

  // 函数
  void pay() {
    String apiKey = "alatPayPrimaryKey";
    String businessId = "alatPayBuinessId";
    String email = "johndoe@gmail.com";
    String phone = "+2348047589684";
    String firstName = "John";
    String lastName = "Doe";
    String currency = 'NGN';
    String amount = "20000";

    setState(() {
      isLoading = true;
    });

    try {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) {
          return AlatPayFlutter(
            apiKey: apiKey,
            businessId: businessId,
            email: email,
            phone: phone,
            firstName: firstName,
            lastName: lastName,
            currency: currency,
            amount: amount,
            onClose: () {
              Get.close(2);
            },
            onTransaction: (response) async {
              // 处理成功交易
              Get.to(const SuccessScreen());
            },
          );
        }),
      );
      setState(() {
        isLoading = false;
      });
    } on SocketException {
      ApiProcessorController.errorSnack("请连接到互联网");
    } catch (e) {
      print(e.toString());
    }
    setState(() {
      isLoading = false;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 10,
        title: Text(
          "AlatPay",
          style: TextStyle(
            color: Theme.of(context).appBarTheme.backgroundColor,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: pay,
            style: ElevatedButton.styleFrom(
              disabledBackgroundColor: Colors.grey.shade300,
              backgroundColor: Theme.of(context).primaryColor,
              elevation: 10,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              shadowColor: Colors.black.withOpacity(0.4),
            ),
            child: isLoading
                ? const Padding(
                    padding: EdgeInsets.all(10),
                    child: CircularProgressIndicator(color: Colors.white),
                  )
                : const Text(
                    "立即支付",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontFamily: "Sen",
                      fontWeight: FontWeight.w700,
                    ),
                  ),
          ),
        ),
      ),
    );
  }
}