Flutter支付集成插件flutterwave_standard_smart的使用

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

Flutter支付集成插件flutterwave_standard_smart的使用

标题

Flutter支付集成插件flutterwave_standard_smart的使用

内容

Flutterwave Flutter SDK (Standard) #

The Flutter library helps you create seamless payment experiences in your dart mobile app. By connecting to our modal, you can start collecting payment in no time time.

Available features include:

  • Collections: Card, Account, Mobile money, Bank Transfers, USSD, Barter.
  • Recurring payments: Tokenization and Subscriptions.
  • Split payments

Table of Contents <#</<>

  1. Requirements
  2. Installation</#>
  3. <Usage</#>
  4. <Support</#>
  5. <Contribution guidelines</#>
  6. <License</#>

Requirements <#</<>

  1. Flutterwave for business API Keys
  2. Supported Flutter version >= 1.17.0

Installation <#</<>

  1. Add the dependency to your project. In your pubspec.yaml file add: flutterwave_standard_smart: 1.0.0
  2. Run flutter pub get
<h

Usage <#</<></h<h>

Initializing a Flutterwave instance <#</<>

To create an instance, you should call the Flutterwave constructor. This constructor accepts a mandatory instance of the following:

  • The calling Context
  • publicKey
  • Customer
  • amount
  • email
  • fullName
  • txRef
  • isTestMode
  • paymentOptions
  • redirectUrl
  • Customization

It returns an instance of Flutterwave which we then call the async method .charge() on.

handlePaymentInitialization() async { 
	 final Customer customer = Customer(
	 name: "Flutterwave Developer",
	 phoneNumber: "1234566667777",   
     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 );
 } 

Handling the response <#</<>

Calling the .charge() method returns a Future of ChargeResponse which we await for the actual response as seen above.

final ChargeResponse response = await flutterwave.charge(); 

Call the verify transaction endpoint with the transactionID returned in response.transactionId or the txRef you provided to verify transaction before offering value to customer

Note

  • ChargeResponse can be null, depending on if the user cancels the transaction by pressing back.
  • You need to confirm the transaction is successful. Ensure that the txRef, amount, and status are correct and successful. Be sure to verify the transaction details before providing value.
  • Some payment methods are not instant, such a Pay with Bank Transfers, Pay with Bank, and so you would need to rely on webhooks or call the transaction verification service using the transactionId, or transaction reference you created(txRef)
  • For such long payments like the above, closing the payment page returns a cancelled status, so your final source of truth has to be calling the transaction verification service.
<h<h class="hash-header" id="support">Support <#</<></h<h>

For additional assistance using this library, contact the developer experience (DX) team via email or on slack.

You can also follow us [@FlutterwaveEng](/user/FlutterwaveEng) and let us know what you think 😊.

<h<h class="hash-header" id="contribution-guidelines">Contribution guidelines <#</<></h<h>

Read more about our community contribution guidelines here.

<h<h class="hash-header" id="license">License <#</<></h<h>

By contributing to the Flutter library, you agree that your contributions will be licensed under its MIT license.

Copyright (c) Flutterwave Inc.

<h<h class="hash-header" id="built-using">Built Using <
#</<></h<h>

<h<h class="hash-header" id="flutterwave-api--references">Flutterwave API References <#</<></h<h> ```

示例代码


更多关于Flutter支付集成插件flutterwave_standard_smart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter支付集成插件flutterwave_standard_smart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中集成并使用flutterwave_standard_smart插件进行支付的代码案例。这个插件允许你使用Flutterwave的Standard Smart Payment功能来处理支付。

首先,确保你已经在pubspec.yaml文件中添加了flutterwave_standard_smart依赖:

dependencies:
  flutter:
    sdk: flutter
  flutterwave_standard_smart: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,你需要进行一些基本的配置,包括设置你的公钥(public key)和加密密钥(encryption key),这些都可以在Flutterwave的仪表盘上找到。

以下是一个简单的示例,展示了如何集成并使用flutterwave_standard_smart插件:

import 'package:flutter/material.dart';
import 'package:flutterwave_standard_smart/flutterwave_standard_smart.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutterwave Payment Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PaymentScreen(),
    );
  }
}

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  final FlutterwaveStandardSmart _flutterwaveStandardSmart = FlutterwaveStandardSmart();

  // Replace these with your actual Flutterwave public key and encryption key
  final String publicKey = 'your_public_key_here';
  final String encryptionKey = 'your_encryption_key_here';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutterwave Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // Prepare payment data
            final Map<String, dynamic> paymentData = {
              'amount': 1000, // Amount in kobo (1000 kobo = ₦10.00)
              'currency': 'NGN',
              'tx_ref': DateTime.now().millisecondsSinceEpoch.toString(), // Unique transaction reference
              'customer': {
                'email': 'customer@example.com',
                'phone_number': '08012345678',
              },
              'meta': {
                'custom_fields': [
                  {'value': 'Custom Field 1', 'display_name': 'Custom Field 1'},
                ],
              },
            };

            try {
              // Initialize Flutterwave payment
              final result = await _flutterwaveStandardSmart.initializePayment(
                publicKey: publicKey,
                encryptionKey: encryptionKey,
                paymentData: paymentData,
                callbackUrl: 'your_callback_url_here', // This is optional and used for web payments
                onSuccess: (data) {
                  // Handle successful payment
                  print('Payment successful: $data');
                },
                onFailure: (error) {
                  // Handle payment failure
                  print('Payment failed: $error');
                },
                onClose: () {
                  // Handle payment screen close
                  print('Payment screen closed');
                },
              );

              // Result is the payment response from Flutterwave
              print('Payment result: $result');
            } catch (e) {
              // Handle any exceptions
              print('Error initializing payment: $e');
            }
          },
          child: Text('Initiate Payment'),
        ),
      ),
    );
  }
}

注意事项:

  1. 公钥和加密密钥:确保你使用的是从Flutterwave仪表盘上获取的公钥和加密密钥。
  2. 回调URL:这个参数是可选的,主要用于Web支付。如果你是在移动设备上集成,可以忽略这个参数。
  3. 支付数据paymentData中的参数应该根据你的实际需求进行调整,比如金额、货币类型、交易引用等。
  4. 错误处理:在实际应用中,你应该添加更详细的错误处理逻辑,以确保用户体验的流畅性。

这个示例提供了一个基本的框架,你可以根据具体需求进行扩展和修改。

回到顶部