Flutter支付集成插件flutter_paystack_max的使用
Flutter支付集成插件flutter_paystack_max的使用
flutter_paystack_max
是一个用于通过 Paystack 支付网关进行支付的Flutter包。它支持所有Paystack支持的支付方式,并且在Android和iOS平台上都能很好地工作。
特性
- ✔️ 所有Paystack支持的支付方法/渠道
- Mobile Money
- Card
- USSD
- Bank Transfer
- Bank
- QR
- EFT
- ✔️ 验证交易
支持的平台
- Android
- iOS
前置条件
- Paystack 秘钥
- 回调URL
此包无需配置,开箱即用。
使用方法
创建一个交易请求对象
final request = PaystackTransactionRequest(
reference: '...',
secretKey: '....',
email: '...',
amount: 15 * 100,
currency: PaystackCurrency.ngn,
channel: [
PaystackPaymentChannel.mobileMoney,
PaystackPaymentChannel.card,
PaystackPaymentChannel.ussd,
PaystackPaymentChannel.bankTransfer,
PaystackPaymentChannel.bank,
PaystackPaymentChannel.qr,
PaystackPaymentChannel.eft,
],
);
初始化交易
final initializedTransaction = await PaymentService.initializeTransaction(request);
if (!initializedTransaction.status) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.red,
content: Text(initializedTransaction.message),
));
return;
}
打开支付模态框以接受付款
final response = await PaymentService.showPaymentModal(
context,
transaction: initializedTransaction,
// 回调URL必须与您在Paystack仪表板上指定的匹配,
callbackUrl: '...'
).then((_) async {
return await PaymentService.verifyTransaction(
paystackSecretKey: '...',
initializedTransaction.data?.reference ?? request.reference,
);
});
print(response); // 确认支付的结果
示例代码
下面是一个完整的示例代码,展示了如何在Flutter应用中使用 flutter_paystack_max
插件来实现支付功能:
import 'package:flutter/material.dart';
import 'package:flutter_paystack_max/flutter_paystack_max.dart';
import 'package:logger/logger.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Paystack Max',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Paystack Max'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool initializingPayment = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: initializingPayment
? const CircularProgressIndicator.adaptive()
: OutlinedButton(
onPressed: makePayment,
child: const Text('Make Payment'),
),
),
);
}
void makePayment() async {
const secretKey = 'sk_test_e9a2346830d863dad481ab4169f67d91a5f5260f';
final request = PaystackTransactionRequest(
reference: 'ps_${DateTime.now().microsecondsSinceEpoch}',
secretKey: secretKey,
email: 'test@mail.com',
amount: 15 * 100,
currency: PaystackCurrency.ngn,
channel: [
PaystackPaymentChannel.mobileMoney,
PaystackPaymentChannel.card,
PaystackPaymentChannel.ussd,
PaystackPaymentChannel.bankTransfer,
PaystackPaymentChannel.bank,
PaystackPaymentChannel.qr,
PaystackPaymentChannel.eft,
],
);
setState(() => initializingPayment = true);
final initializedTransaction =
await PaymentService.initializeTransaction(request);
if (!mounted) return;
setState(() => initializingPayment = false);
if (!initializedTransaction.status) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.red,
content: Text(initializedTransaction.message),
));
return;
}
await PaymentService.showPaymentModal(
context,
transaction: initializedTransaction,
// 回调URL必须与您在Paystack仪表板上指定的匹配,
callbackUrl: 'https://binemmanuel.com',
);
final response = await PaymentService.verifyTransaction(
paystackSecretKey: secretKey,
initializedTransaction.data?.reference ?? request.reference,
);
if (kDebugMode) Logger().i(response.data.status == PaystackTransactionStatus.abandoned);
}
}
更多信息
访问 Paystack文档 获取更多关于交易的信息。
贡献、问题和错误报告
这个项目是开放贡献的。如果您遇到了问题或想要报告一个bug,请在这里报告。
更多关于Flutter支付集成插件flutter_paystack_max的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter支付集成插件flutter_paystack_max的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter应用中集成flutter_paystack_max
插件的示例代码。flutter_paystack_max
是一个用于集成Paystack支付网关的Flutter插件。以下示例代码展示了如何初始化插件、启动支付流程并处理支付结果。
前提条件
- 确保你已经在Flutter项目中添加了
flutter_paystack_max
依赖。 - 确保你已经在Paystack后台配置了你的应用。
添加依赖
在你的pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter:
sdk: flutter
flutter_paystack_max: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
配置Android
在android/app/src/main/AndroidManifest.xml
中添加以下权限和Activity配置:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application
...>
<activity android:name="io.flutter.plugins.paystack.PaystackActivity"
android:launchMode="singleTask"
android:theme="@style/Theme.AppCompat.NoActionBar"
android:windowSoftInputMode="adjustResize">
<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>
</manifest>
确保替换your_custom_scheme
为你的自定义URL Scheme,这个Scheme将在Paystack后台配置。
配置iOS
在ios/Runner/Info.plist
中添加以下配置(如果需要):
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
初始化插件并启动支付
在你的Dart代码中,初始化flutter_paystack_max
插件并启动支付流程:
import 'package:flutter/material.dart';
import 'package:flutter_paystack_max/flutter_paystack_max.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Paystack Payment Integration'),
),
body: Center(
child: PaystackButton(
apiKey: '你的Paystack公钥', // 替换为你的Paystack公钥
email: 'customer@example.com',
amount: 1000, // 金额,单位为分(例如1000表示10.00)
currency: 'USD', // 货币类型
reference: 'unique_reference_${DateTime.now().toIso8601String()}', // 唯一支付引用
withCard: true, // 是否显示信用卡输入界面
onSuccessfulPayment: (paymentData) {
// 支付成功处理
print('Payment successful: $paymentData');
},
onFailedPayment: (error) {
// 支付失败处理
print('Payment failed: $error');
},
onClose: () {
// 用户关闭支付界面处理
print('Payment closed');
},
onPreAuthorize: (preAuthData) {
// 预授权处理(如果需要)
print('Pre-authorize data: $preAuthData');
},
),
),
),
);
}
}
class PaystackButton extends StatefulWidget {
final String apiKey;
final String email;
final int amount;
final String currency;
final String reference;
final bool withCard;
final ValueChanged<Map<String, dynamic>> onSuccessfulPayment;
final ValueChanged<String> onFailedPayment;
final VoidCallback onClose;
final ValueChanged<Map<String, dynamic>> onPreAuthorize;
PaystackButton({
required this.apiKey,
required this.email,
required this.amount,
required this.currency,
required this.reference,
required this.withCard,
required this.onSuccessfulPayment,
required this.onFailedPayment,
required this.onClose,
required this.onPreAuthorize,
});
@override
_PaystackButtonState createState() => _PaystackButtonState();
}
class _PaystackButtonState extends State<PaystackButton> {
final FlutterPaystackMax paystack = FlutterPaystackMax();
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () async {
try {
await paystack.initialize(
apiKey: widget.apiKey,
email: widget.email,
amount: widget.amount,
currency: widget.currency,
reference: widget.reference,
withCard: widget.withCard,
);
final result = await paystack.startTransaction(
onSuccessful: widget.onSuccessfulPayment,
onFailed: widget.onFailedPayment,
onClose: widget.onClose,
onPreAuthorize: widget.onPreAuthorize,
);
if (result) {
// 交易已启动,后续处理将在回调中完成
}
} catch (e) {
widget.onFailedPayment(e.toString());
}
},
child: Text('Pay Now'),
);
}
}
处理回调
确保在你的回调函数中处理支付结果,例如更新UI、发送通知或存储支付数据。
注意事项
- 替换示例代码中的
你的Paystack公钥
为你的实际Paystack公钥。 - 确保在Paystack后台正确配置了回调URL和自定义URL Scheme。
- 根据你的需求调整支付参数和回调处理逻辑。
这个示例代码展示了如何在Flutter应用中集成flutter_paystack_max
插件并启动支付流程。你可以根据需要进行进一步的自定义和扩展。