Flutter网页集成插件webirr的使用
Flutter网页集成插件webirr的使用
官方Dart客户端库用于WeBirr支付网关API。
此客户端库提供了方便的方式,使Dart/Flutter应用能够访问WeBirr支付网关API。
需要Dart SDK >=2.12.0 <3.0.0
安装
运行以下命令以安装webirr客户端库:
使用Dart
$ dart pub add webirr
使用Flutter
$ flutter pub add webirr
使用方法
库需要配置一个商户ID
和API密钥
。您可以通过联系webirr.com来获取这些信息。
您可以使用此库在生产环境或测试环境中。当创建WeBirrClient
对象时,需要将isTestEnv
设置为true
用于测试环境,false
用于生产环境。
示例
创建一个新的账单/更新现有的账单到WeBirr服务器
import 'package:webirr/webirr.dart';
void main() async {
const apikey = 'YOUR_API_KEY';
const merchantId = 'YOUR_MERCHANT_ID';
var api = new WeBirrClient(apikey: apikey, isTestEnv: true);
var bill = new Bill(
amount: '270.90',
customerCode: 'cc01', // 可以是电子邮件地址或电话号码,如果没有客户代码
customerName: 'Elias Haileselassie',
time: '2021-07-22 22:14', // 您的账单时间,始终以这种格式
description: 'hotel booking',
billReference: 'drt/2021/125', // 您的唯一参考编号
merchantID: merchantId,
);
print('Creating Bill...');
var res = await api.createBill(bill);
var paymentCode = '';
if (res.error == null) {
// 成功
paymentCode = res.res ?? ''; // 返回支付代码,例如 429 723 975
print(
'Payment Code = $paymentCode'); // 我们可能希望在本地数据库中保存支付代码。
} else {
// 失败
print('error: ${res.error}');
print(
'errorCode: ${res.errorCode}'); // 可以用来处理特定业务错误,如ERROR_INVLAID_INPUT_DUP_REF
}
// 如果未付款,更新现有的账单
bill.amount = "278.00";
bill.customerName = 'Elias dart3';
// bill.billReference = "WE CAN NOT CHANGE THIS";
print('Updating Bill...');
res = await api.updateBill(bill);
if (res.error == null) {
// 成功
print(
'bill is updated successfully'); // res.res 将是 'OK',无需检查这里!
} else {
// 失败
print('error: ${res.error}');
print(
'errorCode: ${res.errorCode}'); // 可以用来处理特定业务错误,如ERROR_INVLAID_INPUT
}
}
获取现有账单的支付状态
import 'package:webirr/webirr.dart';
void main() async {
const apikey = 'YOUR_API_KEY';
var api = new WeBirrClient(apikey: apikey, isTestEnv: true);
var paymentCode = 'PAYMENT_CODE_YOU_SAVED_AFTER_CREATING_A_NEW_BILL'; // 例如 '141 263 782';
print('Getting Payment Status...');
var r = await api.getPaymentStatus(paymentCode);
if (r.error == null) {
// 成功
if (r.res?.isPaid ?? false) {
print('bill is paid');
print('bill payment detail');
print('Bank: ${r.res?.data?.bankID}');
print('Bank Reference Number: ${r.res?.data?.paymentReference}');
print('Amount Paid: ${r.res?.data?.amount}');
} else {
print('bill is pending payment');
}
} else {
// 失败
print('error: ${r.error}');
print(
'errorCode: ${r.errorCode}'); // 可以用来处理特定业务错误,如ERROR_INVLAID_INPUT
}
}
删除现有的账单(如果未付款)
import 'package:webirr/webirr.dart';
void main() async {
const apikey = 'YOUR_API_KEY';
var api = new WeBirrClient(apikey: apikey, isTestEnv: true);
var paymentCode = 'PAYMENT_CODE_YOU_SAVED_AFTER_CREATING_A_NEW_BILL'; // 例如 '141 263 782';
print('Deleting Bill...');
var res = await api.deleteBill(paymentCode);
if (res.error == null) {
// 成功
print(
'bill is deleted successfully'); // res.res 将是 'OK',无需检查这里!
} else {
// 失败
print('error: ${res.error}');
print(
'errorCode: ${res.errorCode}'); // 可以用来处理特定业务错误,如ERROR_INVLAID_INPUT
}
}
更多关于Flutter网页集成插件webirr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter网页集成插件webirr的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter Web项目中集成并使用webview_flutter
插件(虽然你提到的是webirr
,但根据我的了解,webview_flutter
是Flutter社区广泛使用的用于嵌入网页内容的插件,而webirr
并不是一个已知的Flutter插件,因此我将以webview_flutter
为例)的示例代码。
首先,确保你的Flutter环境已经配置好,并且你的项目已经创建。
1. 添加依赖
在你的pubspec.yaml
文件中添加webview_flutter
的依赖:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^3.0.4 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
2. 配置iOS和Android(对于Web项目,这一步可以跳过)
虽然你是在Web平台上使用,但如果你打算同时支持移动平台,需要配置iOS和Android的相关信息。对于Web项目,这一步可以省略。
3. 使用WebView
在你的Flutter项目中创建一个新的页面或组件来使用WebView。以下是一个简单的示例:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WebViewExample(),
);
}
}
class WebViewExample extends StatefulWidget {
@override
_WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
late WebViewController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WebView Example'),
),
body: WebView(
initialUrl: 'https://flutter.dev', // 这里设置你要加载的网页URL
javascriptMode: JavascriptMode.unrestricted, // 允许执行JavaScript
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
// 可以在这里执行一些初始化的操作,比如加载特定的URL或执行JavaScript代码
},
onPageFinished: (String url) {
// 页面加载完成后可以执行的操作
print("Page finished loading: $url");
},
gestureNavigationEnabled: true, // 允许手势导航
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
// 示例:加载一个新的URL
await _controller.loadUrl('https://google.com');
},
tooltip: 'Load google.com',
child: Icon(Icons.arrow_forward),
),
);
}
}
4. 运行你的应用
确保你的开发环境支持Flutter Web,然后运行以下命令来启动你的应用:
flutter run -d web-server --web-port=8080
或者你可以直接在支持Flutter Web的IDE中运行,比如VSCode或Android Studio。
这个示例展示了如何在Flutter Web应用中集成WebView,并允许用户浏览网页内容,同时提供了一些基本的交互功能,如加载新的URL。根据实际需求,你可以进一步扩展和优化这个示例。