Flutter支付功能插件open_payment的使用

Summary

此Flutter插件可让您无缝地将OPEN Payment Gateway集成到您的Flutter应用程序中，并开始收取付款。

要了解更多关于我们的SDK以及如何在项目中链接它们的信息，请参阅文档。

Pre-Requisites

Payment Token

支付令牌表示一个订单或购买。在应用中打开支付页面的第一步是创建支付令牌。 支付令牌可以通过调用创建支付令牌API来生成。此API应始终从您的服务器调用。您将收到支付令牌作为响应。

Access Token

访问密钥是从您的OPEN仪表板生成的唯一密钥。

Android

在android/app/build.gradle文件中更改minSdkVersion：

minSdkVersion 26

iOS

最低支持的iOS版本为14.0。

Get Started

Installation

在pubspec.yaml中添加依赖项：

dependencies:
  open_payment: ^3.0.0

Import

import 'package:open_payment/open_payment.dart';

Usage

调用支付功能

在按钮点击时调用支付功能：

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: onPaymentClick,
)

onPaymentClick函数

Future<void> onPaymentClick() async {
  OpenPaymentPayload openPaymentPayload = OpenPaymentPayload(
    accessToken: "your-access-token",
    paymentToken: "payment-token",
    environment: PaymentEnvironment.live, // 或 PaymentEnvironment.sandbox
    logoUrl: "your-logo-url",
    mainColor: "#83025c",
    errorColor: "#ff0000"
  );

  await OpenPayment.initiatePayment(
    openPaymentPayload: openPaymentPayload,
    onTransactionComplete: (TransactionDetails transactionDetails) {
      // 处理交易结果
    },
    onError: (String error) {
      // 处理集成错误
    }
  );
}

完整示例

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:open_payment/open_payment.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String accessToken = "c59bc560-c7ac-11eb-8009-bb514bcfec2b";
  String paymentToken = "pt_35672B414C88e2B";
  PaymentEnvironment environment = PaymentEnvironment.live;
  String? result;

  Future<void> onPaymentClick() async {
    OpenPaymentPayload openPaymentPayload = OpenPaymentPayload(
      accessToken: accessToken,
      paymentToken: paymentToken,
      environment: environment,
      // logoUrl: "your-logo-url",
      mainColor: "#83025c",
      errorColor: "#ff0000"
    );

    await OpenPayment.initiatePayment(
      openPaymentPayload: openPaymentPayload,
      onTransactionComplete: (TransactionDetails transactionDetails) {
        setState(() {
          result = transactionDetails.status;
        });
      },
      onError: (String error) {
        setState(() {
          result = error;
        });
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Open Payment Demo'),
        ),
        body: Center(
          child: Text(result ?? 'No result yet'),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: onPaymentClick,
        ),
      ),
    );
  }
}

Initialize OpenPaymentPayload

您需要创建一个包含以下参数的负载：

onTransactionComplete 实现

每当交易完成时都会调用此方法。TransactionDetails.status 可能是 captured、failed、pending 和 cancelled。

注意：如果调用了onTransactionComplete，并不意味着支付成功。它仅表示交易已完成。

onTransactionComplete: (TransactionDetails transactionDetails) {
  // 处理交易结果
}

onError 实现

每当发生集成错误时都会调用此方法。

onError: (String error) {
  // 处理集成错误
}

希望这些信息对您有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。