Flutter支付集成插件lazerpay_flutter的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter支付集成插件lazerpay_flutter的使用

该插件使得在Flutter项目中使用Lazerpay变得简单。

📸 屏幕截图

屏幕截图1 屏幕截图2 屏幕截图3 屏幕截图4

🚀 如何使用插件

添加Material支持

android/build.gradle文件中添加以下依赖:

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
    // ...
}

使用LazerPay插件

启动LazerSendView作为底部弹窗

import 'package:lazerpay_flutter/lazerpay_flutter.dart';

void launch() async {
  await LazerPayView(
    data: LazerPayData(
       publicKey: "pk_live_...", // 替换为你的公钥
       reference: 'YOUR_REFERENCE', // 替换为你生成的引用
       name: "Chizo Ozioma",
       email: "test@gmail.com",
       amount: 1000,
       currency: LazerPayCurency.USD,
       acceptPartialPayment: true, // 默认为false
       metadata: {
          'product_id': '324324324324',
       }, // 元数据是可选参数
    ),
    showLogs: true,
    onInitialize: (data) {
       print('initialized');
    },
    onClosed: () {
       print('closed');
       Navigator.pop(context);
    },
    onSuccess: (data) {
       print(data);
       Navigator.pop(context);
    },
    onError: print,
  ).show(context);
}

使用LazerPayView小部件

import 'package:lazerpay_flutter/lazerpay_flutter.dart';

// ...

LazerPayView(
  data: LazerPayData(
     publicKey: "pk_live_...", // 替换为你的公钥
     reference: 'YOUR_REFERENCE', // 替换为你生成的引用
     name: "Package Free",
     email: "test@gmail.com",
     amount: 1000,
     currency: LazerPayCurency.NGN,
     acceptPartialPayment: true, // 默认为false
  ),
  onClosed: () {
     Navigator.pop(context);
     print('Widget closed');
  },
  onSuccess: (data) {
     print(data);
     Navigator.pop(context);
  },
  onError: print,
  error: Text('Error'),
)

成功事件返回的交易JSON示例:

{
  "event": "successful",
  "data": {
    "id": "12896b32-0d7d-4744-bc15-5960af40d519",
    "reference": "aa6KlHy88D",
    "senderAddress": "0x0B4d358D349809037003F96A3593ff9015E89efA",
    "recipientAddress": "0x785F44E779cfEeDeBf7aA7CFde19DaA3312fd19e",
    "actualAmount": 10,
    "amountPaid": 10,
    "fiatAmount": 10,
    "feeInCrypto": 0.17,
    "coin": "BUSD",
    "currency": "USD",
    "hash": "0x3332d7b046d53e90dc0337c715252f210386c2a471c5025c953a0b1d9bc90593",
    "blockNumber": 14160827,
    "type": "received",
    "status": "confirmed",
    "network": "mainnet",
    "acceptPartialPayment": true,
    "blockchain": "Binance Smart Chain",
    "customer": {
      "id": "b847dbbd-e5a4-4afc-ba26-b292707dc391",
      "customerName": "Njoku Emmanuel",
      "customerEmail": "kalunjoku123@gmail.com",
      "customerPhone": null,
      "network": "mainnet"
    }
  }
}

更多关于Flutter支付集成插件lazerpay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter支付集成插件lazerpay_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中集成并使用lazerpay_flutter插件来进行支付的示例代码。lazerpay_flutter是一个用于集成LazerPay支付的Flutter插件,可以帮助你在Flutter应用中轻松实现支付功能。

首先,确保你的Flutter开发环境已经配置好,并且已经创建了一个Flutter项目。然后,按照以下步骤进行集成:

1. 添加依赖

在你的pubspec.yaml文件中添加lazerpay_flutter依赖:

dependencies:
  flutter:
    sdk: flutter
  lazerpay_flutter: ^最新版本号  # 替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Android项目

android/app/src/main/AndroidManifest.xml中添加必要的权限和网络配置:

<uses-permission android:name="android.permission.INTERNET" />
<application
    ... >
    <activity
        ... >
        <!-- 其他配置 -->
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="your_custom_scheme" android:host="callback" />
        </intent-filter>
    </activity>
</application>

替换your_custom_scheme为你自定义的URL Scheme,这个将在支付回调中使用。

3. 配置iOS项目

对于iOS项目,你通常不需要特别的配置,但确保你的Info.plist中有必要的网络权限配置。

4. 初始化LazerPay

在你的Flutter代码中,导入lazerpay_flutter插件并进行初始化:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LazerPay Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PaymentScreen(),
    );
  }
}

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  final LazerPay _lazerPay = LazerPay();

  @override
  void initState() {
    super.initState();
    // 初始化LazerPay,替换以下参数为你的实际参数
    _lazerPay.initialize(
      publicKey: '你的公钥',
      secretKey: '你的私钥', // 注意:生产环境中不要直接在客户端存储私钥
      environment: 'sandbox', // 或 'production'
      isProduction: false,
      scheme: 'your_custom_scheme', // 与AndroidManifest.xml中的scheme一致
    );
  }

  void _startPayment() async {
    try {
      String result = await _lazerPay.startPayment(
        amount: '100.00', // 支付金额
        currency: 'USD', // 货币类型
        description: 'Test Payment', // 支付描述
        metadata: {
          'order_id': '123456', // 订单ID
          // 可以添加其他自定义元数据
        },
        successUrl: 'https://yourapp.com/success', // 支付成功回调URL
        failureUrl: 'https://yourapp.com/failure', // 支付失败回调URL
      );
      print('Payment Result: $result');
    } catch (e) {
      print('Payment Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LazerPay Payment Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}

5. 处理支付回调

在Android和iOS项目中,你需要处理支付回调。这通常涉及在你的原生代码(Java/Kotlin或Swift/Objective-C)中接收URL Scheme回调,并根据回调结果更新Flutter应用的状态。由于这涉及到原生代码的开发,具体实现可能会根据你的项目结构和需求有所不同。

以上是一个基本的集成示例,展示了如何在Flutter项目中集成lazerpay_flutter插件。根据你的实际需求,你可能需要进一步调整代码和配置。确保在生产环境中不要直接在客户端存储私钥,并遵循安全最佳实践。

回到顶部