Flutter支付集成插件paylink_payment的使用

概述

paylink_payment 是一个Flutter插件，旨在简化将Paylink支付网关集成到Flutter应用程序中。它提供了一种在Flutter应用内处理支付的简便方法。

功能特性

• 与Paylink支付网关轻松集成。
• 简化支付流程，仅需少量代码。
• 安全处理支付交易。
• 支持发票的创建、查询、取消等操作。

使用步骤

1. 安装插件

在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  paylink_payment: ^2.0.2 # 请使用最新版本

2. 导入包

在Dart文件中导入 paylink_payment 包：

import 'package:paylink_payment/paylink_payment.dart';

3. 初始化Paylink实例

根据环境选择测试或生产模式进行初始化：

测试模式

paylink = PaylinkPayment.test(
  context: context,
  webViewTitle: 'Payment Screen', // 可选
  textColor: Colors.white, // 可选
  themeColor: Colors.blue, // 可选
);

生产模式

paylink = PaylinkPayment.production(
  context: context,
  apiId: '**************',
  secretKey: '**************',
  webViewTitle: 'Payment Screen', // 可选
  textColor: Colors.white, // 可选
  themeColor: Colors.blue, // 可选
);

4. 使用示例

打开支付表单

当按钮或其他动作触发时，使用 PaylinkPayment 类打开支付表单：

paylink.openPaymentForm(
  transactionNo: '1713690519134',
  onPaymentComplete: (PaylinkInvoice orderDetails) {
    // 处理支付完成逻辑
  },
  onError: (Object error) {
    // 处理支付错误逻辑
  },
);

添加发票

paylink.addInvoice(
  amount: 220.0,
  clientMobile: '0512345678',
  clientName: 'Mohammed',
  orderNumber: '123456789',
  callBackUrl: 'https://example.com',
  products: [
    PaylinkProduct(title: 'Book', price: 100, qty: 2),
    PaylinkProduct(title: 'Pen', price: 2, qty: 10),
  ],
  cancelUrl: 'https://example.com',
  clientEmail: 'mohammed@test.com',
  currency: 'SAR',
  displayPending: true,
  note: 'Test invoice',
  smsMessage: 'URL: [SHORT_URL], Amount: [AMOUNT]',
  supportedCardBrands: ['mada', 'visaMastercard', 'amex', 'tabby', 'tamara', 'stcpay', 'urpay'],
).then((PaylinkInvoice orderDetails) {
  // 处理成功响应
}).onError((error, stackTrace) {
  // 处理错误响应
});

查询发票详情

paylink.getInvoice('1713690519134').then((PaylinkInvoice orderDetails) {
  // 处理成功响应
}).onError((error, stackTrace) {
  // 处理错误响应
});

取消发票

paylink.cancelInvoice('1713690519134').then((bool result) {
  // 处理成功响应
}).onError((error, stackTrace) {
  // 处理错误响应
});

完整示例Demo

以下是一个完整的示例应用，展示了如何在Flutter应用中集成 paylink_payment 插件。

import 'package:flutter/material.dart';
import 'package:paylink_payment/paylink_payment.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? paymentResponseMessage;
  late PaylinkPayment paylink;

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

  void paylinkInitialize() {
    paylink = PaylinkPayment.test(
      context: context,
      webViewTitle: 'Payment Screen',
      textColor: Colors.white,
      themeColor: Colors.blue,
    );
  }

  void addInvoice() {
    paylink.addInvoice(
      amount: 220.0,
      clientMobile: '0512345678',
      clientName: 'Mohammed',
      orderNumber: '123456789',
      callBackUrl: 'https://example.com',
      products: [
        PaylinkProduct(title: 'Book', price: 100, qty: 2),
        PaylinkProduct(title: 'Pen', price: 2, qty: 10),
      ],
      cancelUrl: 'https://example.com',
      clientEmail: 'mohammed@test.com',
      currency: 'SAR',
      displayPending: true,
      note: 'Test invoice',
      smsMessage: 'URL: [SHORT_URL], Amount: [AMOUNT]',
      supportedCardBrands: [
        'mada',
        'visaMastercard',
        'amex',
        'tabby',
        'tamara',
        'stcpay',
        'urpay'
      ],
    ).then((PaylinkInvoice orderDetails) {
      print('Invoice added successfully: $orderDetails');
    }).onError((error, stackTrace) {
      print('Error adding invoice: $error');
    });
  }

  void getInvoice(String transactionNo) {
    paylink.getInvoice(transactionNo).then((PaylinkInvoice orderDetails) {
      print('Invoice details: $orderDetails');
    }).onError((error, stackTrace) {
      print('Error getting invoice: $error');
    });
  }

  void checkout(String transactionNo) {
    paylink.openPaymentForm(
      transactionNo: transactionNo,
      onPaymentComplete: (PaylinkInvoice orderDetails) {
        print('Payment completed: $orderDetails');
      },
      onError: (error) {
        print('Payment error: $error');
      },
    );
  }

  void cancelInvoice(String transactionNo) {
    paylink.cancelInvoice(transactionNo).then((bool result) {
      print(result ? 'Invoice canceled successfully' : 'Failed to cancel invoice');
    }).onError((error, stackTrace) {
      print('Error canceling invoice: $error');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Paylink Payment Demo'),
        actions: [
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: addInvoice,
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => getInvoice('1713690519134'),
              child: const Text('Get Invoice'),
            ),
            ElevatedButton(
              onPressed: () => checkout('1713690519134'),
              child: const Text('Checkout Invoice'),
            ),
            ElevatedButton(
              onPressed: () => cancelInvoice('1713690519134'),
              child: const Text('Cancel Invoice'),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上步骤和示例代码，您可以快速地将 paylink_payment 插件集成到您的Flutter应用中，并实现支付功能。