Flutter集成Inai平台插件inai_flutter_sdk的使用

Flutter集成Inai平台插件inai_flutter_sdk的使用

简介

inai-flutter-sdk 是一个用于在 Flutter 应用程序中集成 Inai 平台的插件。它提供了多种方法来处理与支付相关的操作。

本地设置

在 pubspec.yaml 文件中相对引用 Inai Flutter SDK 库：

inai_flutter_sdk:
  path: ../inai_flutter_sdk

安装

在 pubspec.yaml 文件中，在 dependencies 下添加以下依赖项：

inai_flutter_sdk: 0.1.6

初始化

为了使用 SDK 的接口，需要创建一个 InaiCheckout 对象实例。

// 创建 InaiCheckout 实例
InaiCheckout checkout = InaiCheckout(config);

配置参数

InaiConfig 对象必须传递给 checkout 实例。InaiConfig 包含以下参数：

// 创建样式对象
InaiConfigStyles styles = InaiConfigStyles(
  container: InaiConfigStylesContainer(backgroundColor: "#fff"),
  cta: InaiConfigStylesCta(backgroundColor: "#123456")
);

// 创建配置对象
InaiConfig config = InaiConfig(
  token: "token",
  orderId: "orderId",
  countryCode: "countryCode",
  locale: "locale",
  styles: styles
);

结账方式

Drop-In 结账

展示结账界面

展示客户可以使用的配置好的支付方法选项列表。

final result = await checkout.presentCheckout(context: context);

String resultStr = "";
switch (result.status) {
  case InaiStatus.success:
    // 处理支付成功
    break;
  case InaiStatus.failed:
    // 处理支付失败
    break;
  case InaiStatus.canceled:
    // 处理支付取消
    break;
}

展示添加支付方法界面

展示客户可以选择并保存支付方法的界面。一旦保存，返回的 payment_method_id 可用于后续支付，避免每次支付请求时重复输入支付详情。

final result = await checkout.addPaymentMethod(type: "card", context: context);

switch (result.status) {
  case InaiStatus.success:
    // 处理支付成功
    break;
  case InaiStatus.failed:
    // 处理支付失败
    break;
  case InaiStatus.canceled:
    // 处理支付取消
    break;
}

使用已保存的支付方法进行支付

当客户已经保存了一个支付方法时，可以使用 payment_method_id 来调用 presentPayWithPaymentMethod 接口。这可以让客户利用已保存的 payment_method_id 进行快速结账。

final result = await checkout.presentPayWithPaymentMethod(paymentMethodId: "<paymentMethodId>", context: context);

switch(result.status) {
  case InaiStatus.success:
    // 处理支付成功
    break;
  case InaiStatus.failed:
    // 处理支付失败
    break;
  case InaiStatus.canceled:
    // 处理支付取消
    break;
}

Headless 结账

验证字段

此接口用于验证客户输入的支付详细信息。

var paymentMethodOption = "card";

var paymentDetails = {
  "fields": [
    {"name": "number", "value": "5123456789012346"},
    {"name": "cvc", "value": "123"},
    {"name": "expiry", "value": "12/25"},
    {"name": "holder_name", "value": "John Doe"},
    {"name": "contact_number", "value": "01010101010"},
    {"name": "first_name", "value": "John"},
    {"name": "last_name", "value": "Doe"},
    {"name": "contact_email", "value": "customer@example.com"}
  ]
};

final result = await checkout.validateFields(
  paymentMethodOption: paymentMethodOption,
  context: context,
  paymentDetails: paymentDetails
);

switch (result.status) {
  case InaiStatus.success:
    // 处理支付成功
    break;
  case InaiStatus.failed:
    // 处理支付失败
    break;
  case InaiStatus.canceled:
    // 处理支付取消
    break;
}

执行支付

此接口用于执行无界面的支付。

var paymentMethodOption = "card";

var paymentDetails = {
  "fields": [
    {"name": "number", "value": "5123456789012346"},
    {"name": "cvc", "value": "123"},
    {"name": "expiry", "value": "12/25"},
    {"name": "holder_name", "value": "John Doe"},
    {"name": "contact_number", "value": "01010101010"},
    {"name": "first_name", "value": "John"},
    {"name": "last_name", "value": "Doe"},
    {"name": "contact_email", "value": "customer@example.com"}
  ]
};

final result = await checkout.makePayment(
  paymentMethodOption: paymentMethodOption,
  context: context,
  paymentDetails: paymentDetails
);

switch (result.status) {
  case InaiStatus.success:
    // 处理支付成功
    break;
  case InaiStatus.failed:
    // 处理支付失败
    break;
  case InaiStatus.canceled:
    // 处理支付取消
    break;
}