Flutter支付集成插件kkiapay_flutter_sdk的使用

Kkiapay是一个开发者友好的解决方案，允许您在应用程序或网站中接受移动支付和信用卡支付。在使用此SDK之前，请确保您已经在Kkiapay上拥有正确的商户账户，否则请注册并创建您的账户（免费且无痛 😎）。

安装

要使用这个包，在pubspec.yaml文件中添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  kkiapay_flutter_sdk:

对于Web应用，在index.html中添加以下脚本：

<script src="https://cdn.kkiapay.me/k.js"></script>

使用

初始化Kkiapay实例

首先需要导入包：

import 'package:kkiapay_flutter_sdk/kkiapay_flutter_sdk.dart';

然后初始化KKiaPay对象：

final kkiapay = KKiaPay(
    callback: (response, context) {
      // 处理支付回调逻辑
    },
    amount: 1000, // 支付金额，例如：1000
    apikey: "XXXX_public_api_key_XXX", // 您的API密钥
    sandbox: true, // 是否为沙箱模式
    data: 'Big data', // 自定义数据
    phone: "22961000000", // 手机号码
    name: "John Doe", // 用户姓名
    reason: "transaction reason", // 交易原因
    email: "email@mail.com", // 邮箱地址
    callbackUrl: "http://kkiapay.me", // 回调URL
    theme: "#222F5A", // 主题颜色
    countries: ["CI","BJ"], // 国家列表
    partnerId: 'AxXxXXxId', // 合作伙伴ID
    paymentMethods: ["momo","card"] // 支付方式
);

创建支付页面实例

对于移动端：

Navigator.push(context, MaterialPageRoute(builder: (context) => kkiapay));

对于Web端：

KkiapayFlutterSdkPlatform.instance.pay(kkiapay, context, callback);

示例代码

下面是一个完整的示例代码，演示如何使用kkiapay_flutter_sdk进行支付集成：

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

void main() => runApp(const App());

void callback(response, context) {
  switch (response['status']) {
    case PAYMENT_CANCELLED:
      debugPrint(PAYMENT_CANCELLED);
      Navigator.pop(context);
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text(PAYMENT_CANCELLED),
      ));
      break;

    case PENDING_PAYMENT:
      debugPrint(PENDING_PAYMENT);
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text(PENDING_PAYMENT),
      ));
      break;

    case PAYMENT_INIT:
      debugPrint(PAYMENT_INIT);
      break;

    case PAYMENT_SUCCESS:
      debugPrint(PAYMENT_SUCCESS);
      Navigator.pop(context);
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
        content: Text(PAYMENT_SUCCESS),
      ));
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SuccessScreen(
            amount: response['requestData']['amount'],
            transactionId: response['transactionId'],
          ),
        ),
      );
      break;

    default:
      debugPrint(UNKNOWN_EVENT);
      break;
  }
}

const kkiapay = KKiaPay(
    amount: 1,
    sandbox: false,
    apikey: public_api_key,
    callback: callback,
  //countries: ["BJ","CI","SN","TG"],
  //phone: "22961000000",
  //name: "John Doe",
  //email: "email@mail.com",
  //reason: 'transaction reason',
  //data: 'Fake data',
  //theme: defaultTheme,
  //partnerId: 'AxXxXXxId',
  //paymentMethods: ["momo", "card"]
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: const Text('Kkiapay Sample'),
          centerTitle: true,
        ),
        body: const KkiapaySample(),
      ),
    );
  }
}

class KkiapaySample extends StatelessWidget {
  const KkiapaySample({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ButtonTheme(
          minWidth: 500.0,
          height: 100.0,
          child: TextButton(
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all(const Color(0xff222F5A)),
              foregroundColor: MaterialStateProperty.all(Colors.white),
            ),
            child: const Text(
              'Pay Now ( on Mobile )',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => kkiapay),
              );
            },
          ),
        ),
        const SizedBox(height: 50,),
        ButtonTheme(
          minWidth: 500.0,
          height: 100.0,
          child: TextButton(
            style: ButtonStyle(
              backgroundColor:
                  MaterialStateProperty.all(const Color(0xff222F5A)),
              foregroundColor: MaterialStateProperty.all(Colors.white),
            ),
            child: const Text(
              'Pay Now ( on WEB )',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: () {
              KkiapayFlutterSdkPlatform.instance.pay(kkiapay, context, callback);
            },
          ),
        )
      ],
    ));
  }
}

参考

以下是KKiaPay构造函数参数的详细信息：

successCallback函数接收两个参数：

• Map<String,dynamic>包含交易信息
• BuildContext上下文类型

您可以根据自己的需求调整这些参数，并通过GitHub提交问题以发送反馈或报告错误。感谢您的支持！

如果您有任何问题或需要进一步的帮助，请随时联系我。希望这篇文档能帮助您顺利集成Kkiapay支付功能！