Flutter支付集成插件xpay_element_flutter_dev的使用

特性

无缝支付集成

轻松地将支付功能集成到您的Flutter应用中，而无需重定向用户到外部应用或页面。

自定义样式

根据您的应用主题自定义支付SDK的样式，包括可定制的标签、占位符等。

嵌入式认证

在您的应用内进行OTP认证，确保流畅且安全的用户体验。

事件处理

利用内置事件（如onBinDiscount和onReady）动态管理更改并验证输入。

开始使用

要将XPay嵌入式支付系统集成到您的Flutter应用中，请首先在pubspec.yaml文件中添加以下依赖项：

dependencies:
  xpay_element_flutter_dev: ^1.0.1

使用方法

导入包

import 'package:xpay_element_flutter_dev/xpay_element_flutter_dev.dart';

初始化元素控制器

创建一个带有XPay仪表板上所需凭据的XPayElementController实例：

final XPayElementController controller = XPayElementController(
  publicKey: "your_account_public_key",
  hmacKey: "your_account_hmac_key",
  accountId: "your_account_id"
);

嵌入支付小部件

将XPayElementWidget集成到您的应用的小部件树中，并用控制器配置它：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('XPay支付示例')),
    body: XPayElementWidget(controller: controller),
  );
}

自定义样式

自定义SDK的外观以无缝集成到您的应用风格和主题中。XPay SDK允许您修改元素的样式和外观，使其适应各种设计需求。

初始化和应用自定义样式

初始化XPayElementCustomStyle并将自定义样式配置传递给构造函数。以下是如何调整支付元素外观的一个示例：

@override
XPayElementCustomStyle elementCustomStyle =
    XPayElementCustomStyle.configureCustomStyle({
  "inputConfiguration": {
    "cardNumber": {
      "label": "卡号",
      "placeholder": "输入卡号"
    },
    "expiry": {"label": "有效期", "placeholder": "MM/YY"},
    "cvc": {"label": "CVC", "placeholder": "输入CVC"}
  },
  "inputStyle": {
    "height": 40,
    "textColor": 0xff000000,
    "textSize": 16,
    "fontWeight": 400,
    "borderColor": 0xffe6e6e6,
    "borderRadius": 5,
    "borderWidth": 1
  },
  "inputLabelStyle": {
    "textSize": 16,
    "fontWeight": 400,
    "textColor": 0xff000000
  },
  "onFocusInputStyle": {
    "textColor": 0xff000000,
    "textSize": 16,
    "fontWeight": 400,
    "borderColor": 0xffc8dbf9,
    "borderWidth": 1
  },
  "invalidStyle": {
    "borderColor": 0xffff0000,
    "borderWidth": 1,
    "textColor": 0xffff0000,
    "textSize": 14,
    "fontWeight": 400
  },
  "errorMessageStyle": {
    "textColor": 0xffff0000,
    "textSize": 14,
    "fontWeight": 400
  }
});

应用自定义样式

配置好样式后，将其应用于XPayElementWidget以增强用户界面：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('自定义样式的XPay元素')),
    body: XPayElementWidget(style: elementCustomStyle, controller: controller)
  );
}

以上样式属性均为可选；您可以仅定义需要的属性，确保灵活性和根据特定设计需求的定制。

元素事件

处理特定于元素的事件以增强用户体验：

onReady事件

当所有表单字段有效且表单准备好提交时触发此事件。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('自定义样式的XPay元素')),
    body: XPayElementWidget(
            controller: controller,
            onReady: (bool isReady) {
                // 更新您的状态以启用支付提交
            },
        )
    );
}

onBinDiscount事件

当用户输入卡号时接收与卡BIN相关的数据，可用于实施折扣或促销活动。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('自定义样式的XPay元素')),
    body: XPayElementWidget(
            controller: controller,
            onBinDiscount: (dynamic binDiscountData) {
                // 处理并应用基于BIN的折扣
            },
        )
    );
}

确认支付

当所有表单字段有效且onReady事件返回true时，您应该执行一些必要的步骤来继续支付确认。首先，确保您已经启动了服务器端API调用来创建支付意向。此创建意图API负责生成clientSecret和encryptionKey，这些对于确保支付确认至关重要。

服务器端支付意向创建

在客户端调用支付确认之前，您的后端应调用创建意图API以获得：

• clientSecret: 用于安全地启动支付过程的秘密密钥。
• encryptionKey: 用于在传输前加密敏感信息。

确认支付

一旦从后端获取了必要的密钥，使用之前初始化的XPayElementController调用confirmPayment方法。以下是您可以在Flutter应用中实现的方法：

void confirmPayment() async {
  try {
    // 假设'controller'是您的XPayElementController实例
    var paymentResponse = await controller.confirmPayment(
      customerName: "客户名称",
      clientSecret: "来自意图API的client_secret",
      encryptionKeys: "来自意图API的encryption_keys"
    );

    if (paymentResponse.error) {
      // 处理支付失败
      print("支付失败: ${paymentResponse.message}");
    } else {
      // 处理支付成功
      print("支付成功: ${paymentResponse.message}");
    }
  } catch (e) {
    // 处理异常
    print("支付错误: $e");
  }
}

确认支付响应

confirmPayment的响应包含两个键：

• error: 一个布尔值，表示支付是否不成功。如果为真，则表示支付失败。
• message: 包含服务器消息的字符串。此消息提供了支付结果或错误信息的详细信息。

清除方法

clear方法用于重置支付表单。如果您有一个按钮用于清除表单或重置结账流程，这特别有用。

// 假设'controller'是您的XPayElementController实例
controller.clear();