Flutter支付集成插件fawry_sdk的使用

目录

1. 开始
   • 添加Fawry SDK插件
   • Android设置
   • iOS设置
   • Fawry SDK导入
   • 结果数据流
2. SDK初始化
   • 构建FawryLaunchModel
   • 示例
   • 启动支付
   • 打开卡片管理器
3. 自定义UI颜色
   • Android
   • iOS
4. 解决发布模式问题
5. 示例项目

开始

添加Fawry SDK插件

首先，在pubspec.yaml文件中添加Fawry SDK插件：

dependencies:
  fawry_sdk: ^2.0.11

Android设置

在AndroidManifest.xml中添加以下代码片段：

<application
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="Your App Label"
    tools:replace="android:label">
    <!-- Remove 'android:label' from tools:replace if not defining a label -->
</application>

更新build.gradle中的最低SDK版本到21或更高：

android {
    compileSdkVersion flutter.compileSdkVersion
    minSdkVersion 21
    // ...
}

注意: 确保升级Kotlin版本到1.9.0以确保与Fawry SDK兼容。

iOS设置

在Xcode中将最低iOS版本设置为12.1或更高，并在Podfile末尾添加以下代码：

post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
    end
end

Fawry SDK导入

在Dart文件开头导入必要的Fawry SDK包：

import 'package:fawry_sdk/fawry_sdk.dart';
import 'package:fawry_sdk/fawry_utils.dart';
import 'package:fawry_sdk/model/bill_item.dart';
import 'package:fawry_sdk/model/fawry_launch_model.dart';
import 'package:fawry_sdk/model/launch_customer_model.dart';
import 'package:fawry_sdk/model/launch_merchant_model.dart';
import 'package:fawry_sdk/model/payment_methods.dart';
import 'package:fawry_sdk/model/response.dart';

结果数据流

使用Flutter的流功能处理来自Fawry SDK的不同响应场景：

late StreamSubscription? _fawryCallbackResultStream;

@override
void initState() {
  super.initState();
  initSDKCallback();
}

@override
void dispose() {
  _fawryCallbackResultStream?.cancel();
  super.dispose();
}

Future<void> initSDKCallback() async {
  try {
    _fawryCallbackResultStream =
        FawrySdk.instance.callbackResultStream().listen((event) {
      setState(() {
        ResponseStatus response = ResponseStatus.fromJson(jsonDecode(event));
        handleResponse(response);
      });
    });
  } catch (ex) {
    debugPrint(ex.toString());
  }
}

void handleResponse(ResponseStatus response) {
  switch (response.status) {
    case FawrySdk.RESPONSE_SUCCESS:
      {
        debugPrint('Message: ${response.message}');
        debugPrint('Json Response: ${response.data}');
      }
      break;
    case FawrySdk.RESPONSE_ERROR:
      {
        debugPrint('Error: ${response.message}');
      }
      break;
    case FawrySdk.RESPONSE_PAYMENT_COMPLETED:
      {
        debugPrint(
            'Payment Completed: ${response.message}, ${response.data}');
      }
      break;
  }
}

SDK初始化

构建FawryLaunchModel

示例

BillItem item = BillItem(
  itemId: 'Item1',
  description: 'Book',
  quantity: 6,
  price: 50,
);

List<BillItem> chargeItems = [item];

LaunchCustomerModel customerModel = LaunchCustomerModel(
  customerProfileId: '533518',
  customerName: 'John Doe',
  customerEmail: 'john.doe@xyz.com',
  customerMobile: '+201000000000',
);

LaunchMerchantModel merchantModel = LaunchMerchantModel(
  merchantCode: 'YOUR MERCHANT CODE',
  merchantRefNum: FawryUtils.randomAlphaNumeric(10),
  secureKey: 'YOUR SECURE KEY',
);

FawryLaunchModel model = FawryLaunchModel(
  allow3DPayment: true,
  chargeItems: chargeItems,
  launchCustomerModel: customerModel,
  launchMerchantModel: merchantModel,
  skipLogin: true,
  skipReceipt: true,
  payWithCardToken: false,
  paymentMethods: PaymentMethods.ALL,
);

String baseUrl = "https://atfawry.fawrystaging.com/";

启动支付

Future<void> startPayment() async {
  await FawrySDK.instance.startPayment(
    launchModel: model,
    baseURL: baseUrl,
    lang: FawrySDK.LANGUAGE_ENGLISH,
  );
}

打开卡片管理器

Future<void> openCardsManager() async {
  await FawrySDK.instance.openCardsManager(
    launchModel: model,
    baseURL: baseUrl,
    lang: FawrySDK.LANGUAGE_ENGLISH,
  );
}

自定义UI颜色

Android

在android > app > src > main > res > values目录下创建colors.xml文件并添加颜色值：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="fawry_blue">#6F61C0</color> <!-- 设置您的主色调十六进制代码 -->
    <color name="fawry_yellow">#A084E8</color> <!-- 设置您的辅助色十六进制代码 -->
</resources>

iOS

在ios > Runner目录下创建Style.plist文件并添加颜色值：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>primaryColorHex</key>
    <string>#6F61C0</string> <!-- 设置您的主色调十六进制代码 -->
    <key>secondaryColorHex</key>
    <string>#A084E8</string> <!-- 设置您的辅助色十六进制代码 -->
    <key>tertiaryColorHex</key>
    <string>#8BE8E5</string> <!-- 设置您的第三色调十六进制代码 -->
    <key>headerColorHex</key>
    <string>#6F61C0</string> <!-- 设置您的头部色调十六进制代码 -->
</dict>
</plist>

在Xcode中右键点击Runner，选择“Add Files to ‘Runner’”，然后添加Style.plist文件。

解决发布模式问题

如果在发布模式下遇到问题，可以在Android应用的build.gradle中添加以下规则：

buildTypes {
    release {
        minifyEnabled false
        shrinkResources false
        // ...
    }
}