Flutter支付插件pay_with_paymob的使用
Flutter支付插件pay_with_paymob的使用
pay_with_paymob
pay_with_paymob
是一个简化Paymob支付网关集成的Flutter包,支持Visa和移动钱包支付。
特性
- 无缝集成Paymob支付网关。
- 支持多种支付方式:Visa和移动钱包。
- 可定制化的支付视图,具有灵活的样式选项。
- 收集用户数据以提供个性化的支付体验。
- 提供回调函数处理支付成功和错误。
开始使用
先决条件
- 确保已安装Flutter SDK。
- 创建Paymob账户以获取API密钥和其他所需凭据。
安装
在pubspec.yaml
文件中添加以下内容:
dependencies:
pay_with_paymob: ^1.4.0
运行以下命令安装该包:
flutter pub get
使用
初始化支付数据
在main
函数或initState
中初始化支付数据:
PaymentData.initialize(
apiKey: "Your API Key", // 必需:在Dashboard -> Settings -> Account Info -> API Key下找到
iframeId: "Your Iframe ID", // 必需:在Developers -> iframes下找到
integrationCardId: "Your Card Integration ID", // 必需:在Developers -> Payment Integrations -> Online Card ID下找到
integrationMobileWalletId: "Your Wallet Integration ID", // 必需:在Developers -> Payment Integrations -> Mobile Wallet ID下找到
// 可选用户数据
userData: UserData(
email: "User Email", // 可选:默认为'NA'
phone: "User Phone", // 可选:默认为'NA'
name: "User First Name", // 可选:默认为'NA'
lastName: "User Last Name", // 可选:默认为'NA'
),
// 可选样式自定义
style: Style(
primaryColor: Colors.blue, // 默认:Colors.blue
scaffoldColor: Colors.white, // 默认:Colors.white
appBarBackgroundColor: Colors.blue, // 默认:Colors.blue
appBarForegroundColor: Colors.white, // 默认:Colors.white
textStyle: TextStyle(), // 默认:TextStyle()
buttonStyle: ElevatedButton.styleFrom(), // 默认:ElevatedButton.styleFrom()
circleProgressColor: Colors.blue, // 默认:Colors.blue
unselectedColor: Colors.grey, // 默认:Colors.grey
),
);
导航到支付视图
初始化支付数据后,导航到支付视图:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PaymentView(
onPaymentSuccess: () {
// 处理支付成功
},
onPaymentError: () {
// 处理支付失败
},
price: 100, // 必需:总价格(例如,100埃及镑)
),
),
);
更多关于Flutter支付插件pay_with_paymob的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter支付插件pay_with_paymob的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成和使用pay_with_paymob
插件的一个代码示例。pay_with_paymob
是一个用于集成Paymob支付网关的Flutter插件。
第一步:添加依赖
首先,在你的pubspec.yaml
文件中添加pay_with_paymob
依赖:
dependencies:
flutter:
sdk: flutter
pay_with_paymob: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖。
第二步:配置Paymob参数
在Flutter项目的lib
目录下创建一个新的Dart文件,比如paymob_config.dart
,用于存储Paymob的配置信息:
// paymob_config.dart
class PaymobConfig {
static const String publicKey = '你的Paymob公钥';
static const String secretKey = '你的Paymob私钥'; // 注意:私钥通常不在客户端代码中直接存储,这里仅为示例
static const String apiUrl = 'https://api.paymob.com/v3';
static const String merchantId = '你的商户ID';
}
第三步:初始化Paymob客户端
在你的主应用文件(例如main.dart
)中,初始化Paymob客户端:
import 'package:flutter/material.dart';
import 'package:pay_with_paymob/pay_with_paymob.dart';
import 'paymob_config.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Paymob Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
late Paymob paymob;
@override
void initState() {
super.initState();
paymob = Paymob(
publicKey: PaymobConfig.publicKey,
secretKey: PaymobConfig.secretKey, // 注意:实际使用中,私钥应保存在后端服务器
apiUrl: PaymobConfig.apiUrl,
merchantId: PaymobConfig.merchantId,
);
}
void _startPayment() async {
try {
var paymentRequest = PaymentRequest(
amount: 100, // 支付金额,单位为最小货币单位(例如,对于美元,1美元 = 100美分)
currency: 'USD',
description: '商品描述',
returnUrl: 'https://your-return-url.com', // 支付完成后的回调URL
customer: Customer(
email: 'customer@example.com',
phone: '1234567890',
),
);
var response = await paymob.startPayment(paymentRequest);
print('Payment response: $response');
} catch (e) {
print('Error: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Paymob Demo'),
),
body: Center(
child: ElevatedButton(
onPressed: _startPayment,
child: Text('Start Payment'),
),
),
);
}
}
class PaymentRequest {
final int amount;
final String currency;
final String description;
final String returnUrl;
final Customer customer;
PaymentRequest({
required this.amount,
required this.currency,
required this.description,
required this.returnUrl,
required this.customer,
});
}
class Customer {
final String email;
final String phone;
Customer({
required this.email,
required this.phone,
});
}
注意事项
- 私钥安全性:在实际应用中,不要将私钥存储在客户端代码中。私钥应该由后端服务器安全地存储和处理。
- 支付回调:
returnUrl
用于支付完成后的回调,确保你有一个后端服务器来处理这些回调,以验证支付状态。 - 错误处理:在实际应用中,你应该更全面地处理错误情况,例如网络错误、支付失败等。
这个示例展示了如何在Flutter应用中集成Paymob支付插件并进行支付请求。根据你的具体需求,你可能需要调整这个示例。