Flutter支付插件khalti_flutter的使用

Khalti是尼泊尔的一种支付网关，数字钱包和API提供商系统。khalti_flutter插件允许Flutter应用集成Khalti支付功能。以下是详细的使用指南。

目录

• 介绍
• 开始
• 支持的平台
• 设置
  • Android
  • iOS
  • Web
  • 桌面
• 初始化
  • Navigator方法
  • Router方法
• 启动支付界面
  • 使用KhaltiButton
  • 手动方法
• 自定义返回URL
• 自定义UI
• 示例
• 服务器验证

介绍

Khalti提供了多种支付方式，包括Khalti用户、电子银行用户、移动银行用户等。详细信息请参阅Khalti官方文档。

开始

首先需要创建一个商户账户，并获取公共密钥。注册商户账户。

支持的平台

设置

Android

在AndroidManifest.xml中添加以下内容：

<activity ...>
    <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="kpg" android:host="{your package name}" />
    </intent-filter>
</activity>

iOS

在Info.plist中添加以下属性：

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>kpg</string>
        </array>
        <key>CFBundleURLName</key>
        <string>{your package name}</string>
    </dict>
</array>

Web

无需配置。

桌面

无需配置。

初始化

将应用程序的顶级小部件包装在KhaltiScope小部件中，并添加支持的语言环境和KhaltiLocalizations.delegate。

Navigator方法

当使用MaterialApp或类似组件时：

KhaltiScope(
  publicKey: 'test_public_key_dc74e0fd57cb46cd93832aee0a507256',
  builder: (context, navigatorKey) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      supportedLocales: const [
        Locale('en', 'US'),
        Locale('ne', 'NP'),
      ],
      localizationsDelegates: const [
        KhaltiLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: HomePage(),
    );
  },
);

Router方法

当使用MaterialApp.router或类似组件时：

final routerDelegate = YourRouterDelegate();

KhaltiScope(
  publicKey: 'test_public_key_dc74e0fd57cb46cd93832aee0a507256',
  navigatorKey: routerDelegate.navigatorKey,
  builder: (context, _) {
    return MaterialApp.router(
      routerDelegate: routerDelegate,
      supportedLocales: const [
        Locale('en', 'US'),
        Locale('ne', 'NP'),
      ],
      localizationsDelegates: const [
        KhaltiLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: HomePage(),
    );
  },
);

启动支付界面

有两种方法可以启动支付界面。

使用KhaltiButton

可以通过以下代码使用预设按钮：

final config = PaymentConfig(
  amount: 10000, // Amount should be in paisa
  productIdentity: 'dell-g5-g5510-2021',
  productName: 'Dell G5 G5510 2021',
  productUrl: 'https://www.khalti.com/#/bazaar',
  additionalData: { // Not mandatory; can be used for reporting purpose
    'vendor': 'Khalti Bazaar',
  },
  mobile: '9800000001', // Not mandatory; can be used to fill mobile number field
  mobileReadOnly: true, // Not mandatory; makes the mobile field not editable
);

KhaltiButton(
  config: config,
  preferences: [ // Not providing this will enable all the payment methods.
    PaymentPreference.khalti,
    PaymentPreference.eBanking,
  ],
  onSuccess: (successModel) {
    // Perform Server Verification 
  },
  onFailure: (failureModel) {
    // What to do on failure?
  },
  onCancel: () {
    // User manually cancelled the transaction
  },
);

手动方法

另一种方法是使用KhaltiScope.pay()方法：

Inkwell(
  onTap: () {
    KhaltiScope.of(context).pay(
      config: config,
      preferences: [
        PaymentPreference.connectIPS,
        PaymentPreference.eBanking,
        PaymentPreference.sct,
      ],
      onSuccess: onSuccess,
      onFailure: onFailure,
      onCancel: onCancel,
    );
  },
  child: Text('Launch Payment Interface'),
);

自定义返回URL

可以通过在PaymentConfig中设置自定义返回URL：

final config = PaymentConfig(
  returnUrl: 'https://example.com/test',
  ...
);

自定义UI

该插件不支持高度自定义的UI。如果需要自定义界面，请参考khalti包。

示例

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:khalti_flutter/khalti_flutter.dart';

const String testPublicKey = 'test_public_key_dc74e0fd57cb46cd93832aee0a507256';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return KhaltiScope(
      publicKey: testPublicKey,
      enabledDebugging: true,
      builder: (context, navKey) {
        return MaterialApp(
          title: 'Khalti Payment Gateway',
          supportedLocales: const [
            Locale('en', 'US'),
            Locale('ne', 'NP'),
          ],
          theme: ThemeData(
            colorSchemeSeed: Colors.deepPurple,
            useMaterial3: true,
          ),
          debugShowCheckedModeBanner: false,
          navigatorKey: navKey,
          localizationsDelegates: const [
            KhaltiLocalizations.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          home: HomePage(),
        );
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final config = PaymentConfig(
      amount: 10000,
      productIdentity: 'dell-g5-g5510-2021',
      productName: 'Dell G5 G5510 2021',
      productUrl: 'https://www.khalti.com/#/bazaar',
    );

    return Scaffold(
      appBar: AppBar(title: Text('Khalti Payment')),
      body: Center(
        child: KhaltiButton(
          config: config,
          preferences: [PaymentPreference.khalti],
          onSuccess: (model) {
            print('Payment Success: ${model.token}');
          },
          onFailure: (model) {
            print('Payment Failure: ${model.message}');
          },
          onCancel: () {
            print('Payment Cancelled');
          },
        ),
      ),
    );
  }
}

服务器验证

在客户端支付成功后，需要进行服务器验证以确保支付的真实性。具体步骤请参阅Khalti官方文档。

通过以上步骤，您可以在Flutter应用中轻松集成Khalti支付功能。希望对您有所帮助！