Flutter网页集成插件webirr的使用

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

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

使用方法

库需要配置一个商户IDAPI密钥。您可以通过联系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

1 回复

更多关于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。根据实际需求,你可以进一步扩展和优化这个示例。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!