Flutter支付集成插件flutterwave_standard的使用

Flutter支付集成插件flutterwave_standard的使用

Flutterwave Flutter SDK (标准版)

Flutter库帮助你在Dart移动应用中创建无缝的支付体验。通过连接到我们的模态窗口，你可以迅速开始收集付款。

可用功能包括：

• 收集：信用卡、账户、移动货币、银行转账、USSD、Barter。
• 定期支付：令牌化和订阅。
• 分割支付

目录

1. 需求
2. 安装
3. 使用
4. 支持
5. 贡献指南
6. 许可证

需求

1. Flutterwave for Business API密钥
2. 支持的Flutter版本 >= 1.17.0

安装

1. 在你的pubspec.yaml文件中添加依赖项：flutterwave_standard: 1.0.7
2. 运行 flutter pub get

使用

初始化Flutterwave实例

要创建一个实例，你应该调用Flutterwave构造函数。该构造函数接受以下必须参数的一个实例：

• 调用的Context
• publicKey
• Customer
• amount
• email
• fullName
• txRef
• isTestMode
• paymentOptions
• redirectUrl
• Customization

它返回一个Flutterwave实例，然后我们可以调用其异步方法.charge()。

handlePaymentInitialization() async { 
    final Customer customer = Customer(
    name: "Flutterwave Developer",
    phoneNumber: "1234566677777",   
    email: "customer@customer.com"  
);            
    final Flutterwave flutterwave = Flutterwave(
        context: context, publicKey: "Public Key-here",
        currency: "currency-here",   
        redirectUrl: "add-your-redirect-url-here",  
        txRef: "add-your-unique-reference-here",   
        amount: "3000",   
        customer: customer,   
        paymentOptions: "ussd, card, barter, payattitude",   
        customization: Customization(title: "My Payment"),
        isTestMode: true );
} 

处理响应

调用.charge()方法返回一个ChargeResponse的Future，我们可以通过上面的方法等待实际的响应。

final ChargeResponse response = await flutterwave.charge(); 

调用验证交易端点，使用response.transactionId或你提供的txRef来验证交易前提供价值给客户。

注意

• ChargeResponse可能是空的，这取决于用户是否取消了交易。
• 你需要确认交易是否成功。确保txRef、amount和status正确且成功。务必在提供价值之前验证交易详情。
• 一些支付方式不是即时的，例如“通过银行转账支付”，因此你需要依靠webhooks或使用交易验证服务，通过transactionId或你创建的交易引用（txRef）进行调用。
• 对于上述长时间支付，关闭支付页面会返回一个cancelled状态，因此你最终的真相来源必须是调用交易验证服务。

支持

如需额外的帮助使用此库，请通过电子邮件developers@flutterwavego.com或在Slack上联系开发者体验（DX）团队。

你也可以关注我们@FlutterwaveEng，并告诉我们你的想法😊。

贡献指南

了解更多关于我们社区贡献指南的详细信息，请参阅这里。

许可证

通过为Flutter库做出贡献，你同意你的贡献将根据其MIT许可证发布。

版权所有 © Flutterwave Inc.

构建工具

• flutter
• http
• flutter_inappwebview
• fluttertoast

Flutterwave API 参考资料

• Flutterwave API 文档
• Flutterwave 内联支付文档
• Flutterwave 仪表板

示例代码

import 'package:flutter/material.dart';
import 'package:flutterwave_standard/flutterwave.dart';
import 'package:uuid/uuid.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Standard Demo',
      home: MyHomePage('Flutterwave Standard'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage(this.title);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<FormState>();
  final amountController = TextEditingController();
  final currencyController = TextEditingController();
  final narrationController = TextEditingController();
  final publicKeyController = TextEditingController();
  final encryptionKeyController = TextEditingController();
  final emailController = TextEditingController();
  final phoneNumberController = TextEditingController();

  String selectedCurrency = "";

  bool isTestMode = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    this.currencyController.text = this.selectedCurrency;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: double.infinity,
        margin: EdgeInsets.fromLTRB(20, 10, 20, 10),
        child: Form(
          key: this.formKey,
          child: ListView(
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.amountController,
                  textInputAction: TextInputAction.next,
                  keyboardType: TextInputType.number,
                  style: TextStyle(color: Colors.black),
                  decoration: InputDecoration(hintText: "Amount"),
                  validator: (value) =>
                      value != null && value.isNotEmpty ? null : "Amount is required",
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.currencyController,
                  textInputAction: TextInputAction.next,
                  style: TextStyle(color: Colors.black),
                  readOnly: true,
                  onTap: this._openBottomSheet,
                  decoration: InputDecoration(
                    hintText: "Currency",
                  ),
                  validator: (value) =>
                  value != null && value.isNotEmpty ? null : "Currency is required",
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.publicKeyController,
                  textInputAction: TextInputAction.next,
                  style: TextStyle(color: Colors.black),
                  obscureText: true,
                  decoration: InputDecoration(
                    hintText: "Public Key",
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.encryptionKeyController,
                  textInputAction: TextInputAction.next,
                  style: TextStyle(color: Colors.black),
                  obscureText: true,
                  decoration: InputDecoration(
                    hintText: "Encryption Key",
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.emailController,
                  textInputAction: TextInputAction.next,
                  style: TextStyle(color: Colors.black),
                  decoration: InputDecoration(
                    hintText: "Email",
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: TextFormField(
                  controller: this.phoneNumberController,
                  textInputAction: TextInputAction.next,
                  style: TextStyle(color: Colors.black),
                  decoration: InputDecoration(
                    hintText: "Phone Number",
                  ),
                ),
              ),
              Container(
                width: double.infinity,
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: Row(
                  children: [
                    Text("Use Debug"),
                    Switch(
                      onChanged: (value) => {
                        setState(() {
                          isTestMode = value;
                        })
                      },
                      value: this.isTestMode,
                    ),
                  ],
                ),
              ),
              Container(
                width: double.infinity,
                height: 50,
                margin: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: ElevatedButton(
                  onPressed: this._onPressed,
                  child: Text(
                    "Make Payment",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  _onPressed() {
    final currentState = this.formKey.currentState;
    if (currentState != null && currentState.validate()) {
      this._handlePaymentInitialization();
    }
  }

  _handlePaymentInitialization() async {
    final Customer customer = Customer(email: "customer@customer.com");

    final Flutterwave flutterwave = Flutterwave(
        context: context,
        publicKey: this.publicKeyController.text.trim().isEmpty
            ? this.getPublicKey()
            : this.publicKeyController.text.trim(),
        currency: this.selectedCurrency,
        redirectUrl: 'https://facebook.com',
        txRef: Uuid().v1(),
        amount: this.amountController.text.toString().trim(),
        customer: customer,
        paymentOptions: "card, payattitude, barter, bank transfer, ussd",
        customization: Customization(title: "Test Payment"),
        isTestMode: this.isTestMode);
    final ChargeResponse response = await flutterwave.charge();
    this.showLoading(response.toString());
    print("${response.toJson()}");
  }

  String getPublicKey() {
    return "";
  }

  void _openBottomSheet() {
    showModalBottomSheet(
        context: this.context,
        builder: (context) {
          return this._getCurrency();
        });
  }

  Widget _getCurrency() {
    final currencies = ["NGN", "RWF", "UGX", "KES", "ZAR", "USD", "GHS", "TZS"];
    return Container(
      height: 250,
      margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
      color: Colors.white,
      child: ListView(
        children: currencies
            .map((currency) => ListTile(
                  onTap: () => {this._handleCurrencyTap(currency)},
                  title: Column(
                    children: [
                      Text(
                        currency,
                        textAlign: TextAlign.start,
                        style: TextStyle(color: Colors.black),
                      ),
                      SizedBox(height: 4),
                      Divider(height: 1)
                    ],
                  ),
                ))
            .toList(),
      ),
    );
  }

  _handleCurrencyTap(String currency) {
    this.setState(() {
      this.selectedCurrency = currency;
      this.currencyController.text = currency;
    });
    Navigator.pop(this.context);
  }

  Future<void> showLoading(String message) {
    return showDialog(
      context: this.context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Container(
            margin: EdgeInsets.fromLTRB(30, 20, 30, 20),
            width: double.infinity,
            height: 50,
            child: Text(message),
          ),
        );
      },
    );
  }
}