Flutter支付集成插件myfatoorah_pay的使用

Flutter支付集成插件myfatoorah_pay的使用

myfatoorah_pay

My Fatoorah Pay

开始使用

首先，确保你已经添加了myfatoorah_pay依赖到你的项目中。在pubspec.yaml文件中添加以下内容：

dependencies:
  myfatoorah_pay: any

然后运行flutter pub get以安装该插件。

配置

iOS

在Info.plist文件中添加以下配置：

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Android

在AndroidManifest.xml文件中添加以下配置：

<application android:usesCleartextTraffic="true">
  <!-- 其他配置 -->
</application>

使用对话框进行支付

你可以通过调用MyFatoorahPay.startPayment方法来启动支付流程。这是一个简单的示例代码：

import 'package:myfatoorah_pay/myfatoorah_pay.dart';
import 'dart:developer';

var response = await MyFatoorahPay.startPayment(
  context: context,
  request: MyfatoorahRequest.test(
    currencyIso: Country.SaudiArabia,
    invoiceAmount: 100,
    language: ApiLanguage.English,
    token: "Your token here",
  ),
);

示例代码

以下是完整的示例代码，展示了如何在应用中集成支付功能：

import 'dart:developer';

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

// 在这里插入你的API测试令牌
const String myFatoorahApiTest = 'rLtt6JWvbUHDDhsZnfpAhpYk4dxYDQkbcPTyGaKp2TYqQgG7FGZ5Th_WD53Oq8Ebz6A53njUoo1w3pjU1D4vs_ZMqFiz_j0urb_BH9Oq9VZoKFoJEDAbRZepGcQanImyYrry7Kt6MnMdgfG5jn4HngWoRdKduNNyP4kzcp3mRv7x00ahkm9LAK7ZRieg7k1PDAnBIOG3EyVSJ5kK4WLMvYr7sCwHbHcu4A5WwelxYK0GMJy37bNAarSJDFQsJ2ZvJjvMDmfWwDVFEVe_5tOomfVNt6bOg9mexbGjMrnHBnKnZR1vQbBtQieDlQepzTZMuQrSuKn-t5XZM7V6fCW7oP-uXGX-sMOajeX65JOf6XVpk29DP6ro8WTAflCDANC193yof8-f5_EYY-3hXhJj7RBXmizDpneEQDSaSz5sFk0sV5qPcARJ9zGG73vuGFyenjPPmtDtXtpx35A-BVcOSBYVIWe9kndG3nclfefjKEuZ3m4jL9Gg1h2JBvmXSMYiZtp9MR5I6pvbvylU_PP5xJFSjVTIz7IQSjcVGO41npnwIxRXNRxFOdIUHn0tjQ-7LwvEcTXyPsHXcMD8WtgBh-wxR8aKX7WPSsT1O8d8reb2aR7K3rkV3K82K_0OgawImEpwSvp9MNKynEAJQS6ZHe_J_l77652xwPNxMRTMASk1ZsJL';

void main() {
  runApp(const MyfatoorahPay());
}

class MyfatoorahPay extends StatelessWidget {
  const MyfatoorahPay({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'MyFatoorah Pay',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();

  MyHomePage();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyFatoorah Pay'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              child: Container(
                  width: MediaQuery.of(context).size.width * 0.6,
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(16)),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.grey.shade200,
                          offset: Offset(2, 4),
                          blurRadius: 5,
                          spreadRadius: 2)
                    ],
                  ),
                  child: Text('payment dialog', style: TextStyle(color: Colors.white))),
              onTap: () async {
                var response = await MyFatoorahPay.startPayment(
                  context: context,
                  request: MyfatoorahRequest.test(
                    currencyIso: Country.SaudiArabia,
                    invoiceAmount: 100,
                    language: ApiLanguage.English,
                    token: myFatoorahApiTest, // 你的API测试令牌
                  ),
                );
                debugPrint("isSuccess ${response.isSuccess}, ${response.status}");

                if (response.isSuccess) {
                  // 支付成功... 执行一些操作
                } else {
                  // 支付失败... 告诉用户重试
                }
              },
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter应用中集成并使用myfatoorah_pay插件的示例代码。假设你已经有一个Flutter项目，并且已经添加了myfatoorah_pay依赖。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加myfatoorah_pay依赖：

dependencies:
  flutter:
    sdk: flutter
  myfatoorah_pay: ^最新版本号  # 请替换为实际可用的最新版本号

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

2. 配置Android和iOS

Android

在android/app/src/main/AndroidManifest.xml中添加必要的权限：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- 其他必要的权限 -->

    <application
        ... >
        <!-- 其他配置 -->
    </application>
</manifest>

iOS

在ios/Runner/Info.plist中确保你的应用配置正确，并且添加必要的权限（如果有）。

3. 初始化并使用myfatoorah_pay

在你的Flutter应用中，你可以按照以下步骤初始化并使用myfatoorah_pay插件。

导入插件

在你希望使用支付的Dart文件中导入插件：

import 'package:myfatoorah_pay/myfatoorah_pay.dart';

初始化支付

在使用支付功能之前，你可能需要初始化一些配置。以下是一个简单的示例：

void initializeMyFatoorahPay() async {
  // 替换为你的实际API Key
  String apiKey = 'your_api_key_here';
  String publicKey = 'your_public_key_here';
  String privateKey = 'your_private_key_here';
  String merchantId = 'your_merchant_id_here';

  await MyFatoorahPay.initialize(
    apiKey: apiKey,
    publicKey: publicKey,
    privateKey: privateKey,
    merchantId: merchantId,
  );
}

启动支付流程

一旦初始化完成，你可以启动支付流程。例如：

void startPaymentProcess() async {
  // 初始化插件（假设已在应用启动时调用initializeMyFatoorahPay）

  // 支付参数
  var paymentDetails = MyFatoorahPayDetails(
    amount: 100.0, // 支付金额
    currency: 'SAR', // 货币类型
    description: 'Test Payment', // 支付描述
    orderId: 'order_123456', // 订单ID
    returnUrl: 'https://yourapp.com/return', // 支付完成后的返回URL
    notifyUrl: 'https://yourapp.com/notify', // 支付通知URL
  );

  try {
    var response = await MyFatoorahPay.startPayment(paymentDetails: paymentDetails);
    print('Payment response: $response');
  } catch (e) {
    print('Payment error: $e');
  }
}

4. 处理支付结果

根据你的业务逻辑，处理支付结果。通常，这包括处理成功支付和失败支付的情况。你可以根据MyFatoorahPay.startPayment的返回结果或通知URL中的回调来处理这些情况。

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中集成并使用myfatoorah_pay插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyFatoorah Pay Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    initializeMyFatoorahPay();
  }

  void initializeMyFatoorahPay() async {
    String apiKey = 'your_api_key_here';
    String publicKey = 'your_public_key_here';
    String privateKey = 'your_private_key_here';
    String merchantId = 'your_merchant_id_here';

    await MyFatoorahPay.initialize(
      apiKey: apiKey,
      publicKey: publicKey,
      privateKey: privateKey,
      merchantId: merchantId,
    );
  }

  void startPayment() async {
    var paymentDetails = MyFatoorahPayDetails(
      amount: 100.0,
      currency: 'SAR',
      description: 'Test Payment',
      orderId: 'order_123456',
      returnUrl: 'https://yourapp.com/return',
      notifyUrl: 'https://yourapp.com/notify',
    );

    try {
      var response = await MyFatoorahPay.startPayment(paymentDetails: paymentDetails);
      print('Payment response: $response');
    } catch (e) {
      print('Payment error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyFatoorah Pay Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: startPayment,
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}

确保你已经替换了示例代码中的API Key、Public Key、Private Key和Merchant ID为你的实际值。

这样，你就完成了在Flutter应用中集成并使用myfatoorah_pay插件的基本流程。

回到顶部