Flutter支付集成插件skypay_sdk的使用

关于

SkyPay 是由 SkyBase Innovations 提供的尼泊尔综合支付网关解决方案。它简化了集成流程，提升了开发效率，降低了成本，并减少了技术挑战。SkyPay 提供多种选项，如手动输入、商户 API 和 SkyPay 管理，使在线支付更加便捷，尤其对开发者非常友好。它还支持多种支付方式，包括 Khalti，避免了单独与各银行集成的需求。

前置条件

1. 创建您的 免费商户账户：商户注册页面
2. 从仪表盘提供的链接下载并设置 商户应用
3. 复制您在仪表盘页面上提供的 API 密钥

开始使用

导入 Skypay SDK 包

要开始使用 Skypay SDK，请将其包导入到您的 Flutter 项目中。在您打算使用 Skypay 的 Dart 文件顶部添加以下导入语句：

import 'package:skypay_sdk/skypay_sdk.dart';

创建用于 SDK 导航的 Navigator Key

您创建的 navigator key 将专门用于 Flutter 应用程序中的 Skypay SDK 导航。在 main.dart 文件中，创建一个 navigatorKey，如下所示：

class SkyPayDemoApp extends StatefulWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  SkyPayDemoApp({super.key});
}

将 SDK Navigator Key 传递给 MaterialApp

将您为 SDK 创建的 navigatorKey 集成到 MaterialApp 中。这允许您在整个应用程序中控制特定于 Skypay SDK 的导航。更新您的 MaterialApp 如下：

return MaterialApp(
      navigatorKey: widget.navigatorKey,
    );

从 Skypay 仪表盘获取 API 密钥

导航到您的 Skypay 仪表盘，并从 <code>'My Profile'</code> 部分复制 API 密钥。

初始化 Skypay 配置

为了正确设置 Skypay，请在应用程序的开头包含此代码。具体来说，在主 Dart 文件 (main.dart) 或 Flutter 应用程序的主要入口点中放置它。

[@override](/user/override)
void initState() {

  // 提供 navigatorKey（将 'YOUR_NAVIGATOR_KEY' 替换为实际的 navigatorKey）

  Skypay.initConfig(
      navigatorKey: 'YOUR_NAVIGATOR_KEY', 
      apiKey: 'YOUR_API_KEY_HERE',
      );
  super.initState();
}

将 <code>'YOUR_API_KEY_HERE'</code> 替换为从您的 Skypay 仪表盘获取的实际 API 密钥。

初始化支付

要发起支付，请使用以下代码片段：

Skypay.initPayment(
    orderId: "Your_UNIQUE_Order_ID",
    amount: "Amount In Rupees",
    onSuccess: (data) {
        // 成功事件处理
    },
    onFailure: (data) {
        // 失败事件处理
    },
    onCancellation: () {
        // 取消事件处理
    },
);

将 <code>"Your_UNIQUE_Order_ID"</code> 替换为您唯一的订单标识符。

将 <code>"Amount In Rupees"</code> 替换为您所需的交易金额（以卢比为单位）。

参数

回调

在 Skypay 支付网关集成中，您可以利用回调函数来处理不同的交易结果。这些回调函数对于管理各种场景（如成功交易、失败交易和用户主动取消）至关重要。

onSuccess 回调

• <code>onSuccess</code> 回调是在交易成功完成时触发的。当交易成功时会调用此函数，允许您执行与成功交易相关的特定任务或操作。

onFailure 回调

• <code>onFailure</code> 回调在交易遇到问题且未能完成时触发。此回调函数负责管理失败的交易，为您提供处理错误情况、记录详细信息或采取适当措施的能力。

onCancel 回调

• <code>onCancel</code> 回调在用户决定在交易完成前取消付款时触发。此回调函数允许您管理取消事件，例如返回用户到特定屏幕或提供取消确认。

这些回调函数对于确保应用程序中无缝且友好的支付体验至关重要。您可以根据具体需求和用户交互自定义每个回调。

结论

本指南涵盖了使用 Skypay SDK 进行集成的基本步骤。您已经了解了如何初始化配置、设置导航以及利用回调函数处理交易结果。

希望这份文档能帮助您顺利将 Skypay SDK 集成到您的 Flutter 应用程序中。

有关 Skypay 初始化的更多详细信息，请参阅 Skypay 文档。

示例代码

以下是完整的示例代码，展示了如何使用 Skypay SDK：

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

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

class SkyPayDemoApp extends StatefulWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>(); // Navigator Key
  final String apiKey = "865773771"; // API Key

  SkyPayDemoApp({super.key});

  [@override](/user/override)
  State<SkyPayDemoApp> createState() => _SkyPayDemoAppState();
}

class _SkyPayDemoAppState extends State<SkyPayDemoApp> {
  String? message;
  bool isError = false;

  [@override](/user/override)
  void initState() {
    // 初始化 Skypay 配置
    Skypay.initConfig(navigatorKey: widget.navigatorKey, apiKey: widget.apiKey);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return MaterialApp(
      navigatorKey: widget.navigatorKey,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Spacer(),
              Center(
                child: ElevatedButton(
                  onPressed: _makePayment,
                  child: const Text("Pay with Skypay"),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                height: size.height / 2,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "Result",
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                    Text(
                      message ?? "No Result",
                      style: TextStyle(
                        color: isError ? Colors.red : Colors.black,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  void _makePayment() {
    // 初始化支付
    Skypay.initPayment(
      orderId: "123459",
      amount: 100,
      onSuccess: (data) {
        print(data);
        // 支付成功
        setState(() {
          message = data.toString();
          isError = false;
        });
      },
      onFailure: (data) {
        print(data);
        // 支付失败
        setState(() {
          message = data.toString();
          isError = true;
        });
      },
      onCancel: () {
        // 支付取消
        setState(() {
          message = "Payment Cancelled";
          isError = true;
        });
      },
    );
  }
}