Flutter支付插件uzpay的使用
Flutter支付插件UzPay的使用
UzPay 是一个为在乌兹别克斯坦运营的支付系统提供支付功能的 Flutter 包。
简介
特性
- 支持内部和外部浏览器打开支付页面
- 可以自定义内部浏览器的头部样式（颜色和文本）
- 可以在外部浏览器中添加个人菜单项
- 目前支持的支付系统：
- 即将支持的支付系统：
- Uzcard
- Oson
- Paynet
- Upay
开始使用
首先，在你的 Flutter 项目中添加 uzpay 包：
dependencies:
uzpay: ^x.y.z
然后运行以下命令来获取依赖包：
flutter pub get
使用示例
在 Dart 文件中导入 uzpay 包：
import 'package:uzpay/uzpay.dart';
UzPay 类有一个静态方法 doPayment，用于执行支付操作。该方法的调用方式如下：
/// 首先定义参数
var paymentParams = Params(
paymeParams: PaymeParams(
transactionParam: TRANS_ID,
merchantId: PAYME_MERCHANT_ID,
// 下面的字段是可选的
accountObject: 'userId', // 如果有变化
headerColor: Colors.indigo, // 头部颜色
headerTitle: "Payme tizimi orqali to'lash"), // 头部文本
clickParams: ClickParams(
transactionParam: TRANS_ID,
merchantId: CLICK_MERCHANT_ID,
serviceId: CLICK_SERVICE_ID,
merchantUserId: CLICK_MERCHANT_USER_ID,
// 下面的字段是可选的
headerColor: Colors.blue, // 头部颜色
headerTitle: "Click tizimi orqali to'lash"), // 头部文本
);
/// 在外部浏览器中打开支付页面
UzPay.doPayment(context,
amount: 5000, // 支付金额
paymentSystem: PaymentSystem.Payme,
paymentParams: paymentParams,
browserType: BrowserType.External,
/// 可选参数
externalBrowserMenuItem: ChromeSafariBrowserMenuItem(
id: 1,
label: '开发者信息',
action: (url, title) {
launchCustomUrl('https://flutterdev.uz/men-haqimda/')));
枚举
enum PaymentSystem { Click, Payme, PaymeTest }
enum BrowserType { External, Internal, ExternalOrDeepLink, InternalOrDeeplink }
注意：如果支付金额是以货币单位（如 tiyin）输入，请确保只输入实际金额。例如，5000 索姆应该写成 amount: 5000。
如有任何问题或建议，请联系：https://allmylinks.com/mamasodikov
完整示例代码
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:uzpay/enums.dart';
import 'package:uzpay/objects.dart';
import 'package:uzpay/uzpay.dart';
import 'package:zoom_tap_animation/zoom_tap_animation.dart';
/// 如果你想要在外部浏览器中使用菜单项，你需要手动导入此包
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'dialog_skeleton.dart';
import 'dotted_border.dart';
import 'functions.dart';
void main() {
runApp(MaterialApp(home: const MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController _controller = TextEditingController();
/// 不用担心，这个包不会向第三方发布您的*秘密*，您可以分析代码:)
String CLICK_SERVICE_ID = '38944';
String CLICK_MERCHANT_ID = '31069';
String CLICK_MERCHANT_USER_ID = '48614';
String PAYME_MERCHANT_ID = 'REPLACE_WITH_YOURS';
String TRANS_ID = 'REPLACE_WITH_YOURS';
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('乌兹别克支付系统 🇺🇿💳'),
backgroundColor: Colors.indigo,
),
body: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: [
TextFormField(
controller: _controller,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'^(\d+)?\.?\d{0,2}'))
],
decoration: const InputDecoration(
hintText: "请输入金额...",
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.indigo, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.indigo, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
),
),
const SizedBox(
height: 25,
),
Text("支付系统",
style: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(fontSize: 20)),
const SizedBox(
height: 10,
),
Row(
children: [
Expanded(
flex: 1,
child: InkWell(
onTap: () => doPayment(
amount: _controller.text.isNotEmpty
? double.parse(_controller.text.toString())
: 0,
paymentSystem: PaymentSystem.Click,
paymentParams: Params(
clickParams: ClickParams(
transactionParam: TRANS_ID,
merchantId: CLICK_MERCHANT_ID,
serviceId: CLICK_SERVICE_ID,
merchantUserId: CLICK_MERCHANT_USER_ID))),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/click_logo.png',
width: 120,
fit: BoxFit.contain,
)),
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: InkWell(
onTap: () => doPayment(
amount: _controller.text.isNotEmpty
? double.parse(_controller.text.toString())
: 0,
paymentSystem: PaymentSystem.Payme,
paymentParams: Params(
paymeParams: PaymeParams(
transactionParam: TRANS_ID,
merchantId: PAYME_MERCHANT_ID,
accountObject: 'userId'))),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/payme_logo.png',
width: 100,
fit: BoxFit.contain,
)),
),
),
),
),
],
),
const SizedBox(
width: 20,
),
Row(
children: [
Expanded(
flex: 1,
child: InkWell(
onTap: () => CustomToast.showToast('即将推出...'),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/uzcard_logo.png',
width: 120,
fit: BoxFit.contain,
)),
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: InkWell(
onTap: () => CustomToast.showToast('即将推出...'),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/oson_logo.png',
width: 100,
fit: BoxFit.contain,
)),
),
),
),
),
],
),
const SizedBox(
width: 20,
),
Row(
children: [
Expanded(
flex: 1,
child: InkWell(
onTap: () => CustomToast.showToast('即将推出...'),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/paynet_logo.jpeg',
width: 120,
fit: BoxFit.contain,
)),
),
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: InkWell(
onTap: () => CustomToast.showToast('即将推出...'),
child: Card(
elevation: 1,
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Container(
height: 90,
child: Image.asset(
'assets/upay_logo.png',
width: 100,
fit: BoxFit.contain,
)),
),
),
),
),
],
)
],
),
),
);
}
doPayment(
{required double amount,
required PaymentSystem paymentSystem,
required Params paymentParams}) async {
if (amount > 500) {
showDialog(
context: context,
builder: (context) => DialogSkeleton(
title: '选择浏览器',
icon: 'assets/tick-circle.svg',
color: Theme.of(context).cardTheme.color,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 20, horizontal: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 10,
),
ZoomTapAnimation(
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
scaffoldBackgroundColor:
Theme.of(context).cardTheme.color,
),
child: InkWell(
onTap: () async {
Navigator.pop(context);
var paymentParams = Params(
paymeParams: PaymeParams(
transactionParam: TRANS_ID,
merchantId:
PAYME_MERCHANT_ID,
// 这些字段是可选的
accountObject: 'userId',
// 如果改变
headerColor: Colors.indigo,
headerTitle:
"Payme tizimi orqali to'lash"),
clickParams: ClickParams(
transactionParam: TRANS_ID,
merchantId:
CLICK_MERCHANT_ID,
serviceId: CLICK_SERVICE_ID,
merchantUserId:
CLICK_MERCHANT_USER_ID));
/// 通过外部浏览器进行支付
UzPay.doPayment(context,
amount: amount,
paymentSystem: paymentSystem,
paymentParams: paymentParams,
browserType:
BrowserType.External,
// 这个字段是可选的
externalBrowserMenuItem:
ChromeSafariBrowserMenuItem(
id: 1,
label:
'应用支持',
action: (url, title) {
launchCustomUrl(
'https://t.me/your_support_bot');
}));
},
child: DottedBorderWidget(
child: Center(
child: Padding(
padding:
const EdgeInsets.all(8),
child: Column(
children: [
Image.asset(
'assets/browsers.png',
height: 40,
// color: cFirstColor,
),
const SizedBox(
height: 10,
),
Container(
width: 100,
child: Text(
'外部浏览器',
textAlign:
TextAlign.center,
overflow: TextOverflow
.ellipsis,
maxLines: 3,
style: TextStyle(
fontSize: 18,
fontFamily:
'Medium',
color: Theme.of(
context)
.textTheme
.bodyMedium
?.color),
),
),
],
),
),
),
),
),
),
),
]),
),
const SizedBox(
width: 10,
),
Column(mainAxisSize: MainAxisSize.min, children: [
const SizedBox(
height: 10,
),
ZoomTapAnimation(
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
scaffoldBackgroundColor:
Theme.of(context).cardTheme.color,
),
child: InkWell(
onTap: () {
Navigator.pop(context);
/// 通过内部浏览器进行支付
UzPay.doPayment(context,
amount: amount,
paymentSystem: paymentSystem,
paymentParams: paymentParams,
browserType: BrowserType.Internal);
},
child: DottedBorderWidget(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Image.asset(
'assets/browser.png',
height: 40,
// color: cFirstColor,
),
const SizedBox(
height: 10,
),
Container(
width: 100,
child: Text(
'内部浏览器',
textAlign: TextAlign.center,
overflow:
TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontSize: 18,
fontFamily: 'Medium',
color: Theme.of(context)
.textTheme
.bodyMedium
?.color),
),
),
],
),
),
),
),
),
),
),
])
],
),
SizedBox(
height: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(
height: 10,
),
ZoomTapAnimation(
child: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
scaffoldBackgroundColor:
Theme.of(context).cardTheme.color,
),
child: InkWell(
onTap: () async {
Navigator.pop(context);
var paymentParams = Params(
paymeParams: PaymeParams(
transactionParam: TRANS_ID,
merchantId: PAYME_MERCHANT_ID,
// 这些字段是可选的
accountObject: 'userId',
// 如果改变
headerColor: Colors.indigo,
headerTitle:
"Payme tizimi orqali to'lash"),
clickParams: ClickParams(
transactionParam: TRANS_ID,
merchantId: CLICK_MERCHANT_ID,
serviceId: CLICK_SERVICE_ID,
merchantUserId:
CLICK_MERCHANT_USER_ID));
/// 通过外部浏览器进行支付
UzPay.doPayment(context,
amount: amount,
paymentSystem: paymentSystem,
paymentParams: paymentParams,
browserType: BrowserType.ExternalOrDeepLink,
// 这个字段是可选的
externalBrowserMenuItem:
ChromeSafariBrowserMenuItem(
id: 1,
label:
'应用支持',
action: (url, title) {
launchCustomUrl(
'https://t.me/your_support_bot');
}));
},
child: DottedBorderWidget(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Image.asset(
'assets/deeplink.png',
height: 40,
// color: cFirstColor,
),
const SizedBox(
height: 10,
),
Text(
"从应用内（如果已安装，否则使用外部浏览器）",
textAlign: TextAlign.center,
overflow:
TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontSize: 18,
fontFamily: 'Medium',
color: Theme.of(context)
.textTheme
.bodyMedium
?.color),
),
],
),
),
),
),
),
),
),
]),
),
],
)),
));
} else {
CustomToast.showToast(
"支付不可行，最低金额为 500 索姆！");
}
}
}
更多关于Flutter支付插件uzpay的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter支付插件uzpay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
UzPay 是一个用于在 Flutter 应用中集成支付功能的插件，特别是在乌兹别克斯坦等地区使用。它支持多种支付方式，例如信用卡、电子钱包等。使用 UzPay 插件可以帮助开发者快速集成支付功能，并提供安全的支付流程。
以下是如何在 Flutter 项目中使用 UzPay 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 uzpay 插件的依赖：
dependencies:
flutter:
sdk: flutter
uzpay: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 初始化 UzPay
在你的 Dart 文件中，导入 uzpay 并初始化支付实例：
import 'package:uzpay/uzpay.dart';
final uzpay = UzPay();
3. 配置支付参数
在你需要发起支付的地方，配置支付参数并调用支付方法。通常，你需要提供以下信息：
amount: 支付金额orderId: 订单IDmerchantId: 商户IDdescription: 支付描述
void initiatePayment() async {
final paymentParams = PaymentParams(
amount: 1000.0, // 支付金额
orderId: '123456', // 订单ID
merchantId: 'yourMerchantId', // 商户ID
description: 'Payment for goods', // 支付描述
);
try {
final paymentResult = await uzpay.initiatePayment(paymentParams);
if (paymentResult.success) {
// 支付成功
print('Payment successful: ${paymentResult.transactionId}');
} else {
// 支付失败
print('Payment failed: ${paymentResult.errorMessage}');
}
} catch (e) {
// 处理异常
print('Error during payment: $e');
}
}