Flutter支付网关插件nano_payment_gateway的使用

Flutter支付网关插件nano_payment_gateway的使用

安装

1. 添加依赖到pubspec.yaml

   在pubspec.yaml文件中添加以下依赖项。获取最新版本可以在pub.dartlang.org上的“Installing”标签页查看。

   dependencies:
     nano_payment_gateway: <latest_version>
   

2. 导入包

   在需要使用该插件的Dart文件中导入以下包：

   import 'package:nano_payment_gateway/nano_payment_gateway.dart';
   

3. 添加PaymentWidget

   使用PaymentWidget组件来实现支付功能。你可以选择使用带参数或不带参数的方式。

   • 带参数的示例：

     PaymentWidget(
       requestBody: requestBody,
       onTapConfirmAfterOTP: onTapConfirmAfterOTP,
     );
     

   • 带可选参数的示例：

     PaymentWidget(
       requestBody: requestBody,
       onTapConfirmAfterOTP: onTapConfirmAfterOTP,
       showAddress: true,
     );
     

   • requestBody参数应该以Map<String,dynamic>格式传递。例如：

     Map<String, dynamic> requestBody = {
       "merchantId": "$merchantId",
       "merchantName": "$merchantName",
       "currencyCode": "$currencyCode",
       "amount": "$price",
       "merchantPublicKey": "$merchantPublicKey",
       "orderId": "$orderId",
       "cartId": "$cartId",
       "billingAddress": jsonEncode(billingAddress),
       "shippingAddress": jsonEncode(shippingAddress),
       "customerId": "$customerId",
     };
     

   • 示例JSON数据：

     Map<String, dynamic> requestBody = {
       "merchantId": "1",
       "merchantName": "EzKart ECOM Provider",
       "currencyCode": "AED",
       "amount": "1000",
       "merchantPublicKey": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC5whV5aZ1mPiohGkE7GT2dYpr0iAW6STLbrE2yuT4DPAFRpXgeLJEPCGr2jakHlzEujzX+mr9ZHdY9ukp0ebyWBibWGPpqyVuSqGOx4BAukviltqPCmA+DGffxRcDh7cl+5HPwFCryiD7zKo1BOHCLLZFpck1ClgWETXIqbu8YEQIDAQAB",
       "orderId": "Y665JG",
       "cartId": "2",
       "billingAddress": jsonEncode(billingAddress),
       "shippingAddress": jsonEncode(shippingAddress),
       "customerId": "0000000000001",
     };
     

   • 示例billingAddress数据：

     Map<String, dynamic> billingAddress = {
       "billingName": "$billingName",
       "billingZip": "$billingZip",
       "billingState": "$billingState",
       "billingCountry": "$billingCountry",
       "billingTel": "$billingTel",
       "billingEmail": "$billingEmail",
       "billingCity": "$billingCity",
       "billingAddress": "$billingAddress",
     };
     

   • 示例shippingAddress数据：

     Map<String, dynamic> shippingAddress = {
       "deliveryName": "$deliveryName",
       "deliveryState": "$deliveryState",
       "deliveryCountry": "$deliveryCountry",
       "deliveryTel": "$deliveryTel",
       "deliveryZip": "$deliveryZip",
       "deliveryCity": "$deliveryCity",
       "deliveryAddress": "$deliveryAddress",
     };
     

额外信息

nano_payment_gateway 包使用了 flutter_dotenv 包来从应用程序的 .env 文件中检索API密钥。应用程序应包含一个 .env 文件，并且示例API密钥如下：

APIKEY=http://sandboxdev.omaemirates.com:9507

如何使用

查看示例应用中的example目录或在pub.dartlang.org上的“Example”标签页，可以找到更完整的示例。

开始使用

这个项目是一个Dart包的起点，包含可以在多个Flutter或Dart项目中共享的库模块。

完整示例Demo

以下是在main.dart文件中的完整示例代码：

import 'dart:convert';

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

void main() => runApp(const MySample());

class MySample extends StatefulWidget {
  const MySample({super.key});

  [@override](/user/override)
  State<StatefulWidget> createState() => MySampleState();
}

class MySampleState extends State<MySample> {
  // 处理用户输入OTP后的回调方法
  void onTapConfirmAfterOTP(ResponseModel response) {
    Navigator.of(context).pushReplacementNamed('/shopping', arguments: {
      'description': response.data!['responseMessage'],
      'statusCode': response.status
    });
  }

  // 获取请求体数据的方法
  RequestBodyModel getRequestBody() {
    Map<String, dynamic> billingAddress = {
      "billingName": "",
      "billingZip": "",
      "billingState": "",
      "billingCountry": "",
      "billingTel": "",
      "billingEmail": "",
      "billingCity": "",
      "billingAddress": ""
    };

    Map<String, dynamic> shippingAddress = {
      "deliveryName": "",
      "deliveryState": "",
      "deliveryCountry": "",
      "deliveryTel": "",
      "deliveryZip": "",
      "deliveryCity": "",
      "deliveryAddress": ""
    };

    Map<String, dynamic> objectBody = {
      "merchantId": "1",
      "merchantName": "EzKart ECOM Provider",
      "currencyCode": "AED",
      "amount": "1000",
      "merchantPublicKey": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC5whV5aZ1mPiohGkE7GT2dYpr0iAW6STLbrE2yuT4DPAFRpXgeLJEPCGr2jakHlzEujzX+mr9ZHdY9ukp0ebyWBibWGPpqyVuSqGOx4BAukviltqPCmA+DGffxRcDh7cl+5HPwFCryiD7zKo1BOHCLLZFpck1ClgWETXIqbu8YEQIDAQAB",
      "orderId": "Y665JG",
      "cartId": "2",
      "billingAddress": jsonEncode(billingAddress),
      "shippingAddress": jsonEncode(shippingAddress),
      "customerId": "0000000000001",
    };

    RequestBodyModel requestBody =
        requestBodyModelFromJson(jsonEncode(objectBody));

    return requestBody;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PaymentWidget(
      requestBody: getRequestBody(),
      onTapConfirmAfterOTP: onTapConfirmAfterOTP,
      showAddress: true,
    );
  }
}