Flutter支付插件flutter_paymob_egypt的使用

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

Flutter Paymob Egypt

Easily accept payments Cards through Paymob in your Flutter app.

Flutter Paymob Egypt Demo

🚀 Installation

To install the Flutter Payment Egypt Package, follow these steps:

  1. Add the package to your project’s dependencies in the pubspec.yaml file:

    dependencies:
  flutter_paymob_egypt: ^0.0.6

  2. Run the following command to fetch the package:

    flutter pub get

Usage

  1. Import the package into your Dart file:

    import 'package:flutter_paymob_egypt/flutter_paymob_egypt.dart';

  2. Navigate to the Paymob Egypt View with the desired configuration:

    FlutterPaymobPayment(
  cardInfo: CardInfo(
    apiKey: "YOUR_API_KEY", // from dashboard Select Settings -> Account Info -> API Key
    iframesID: '123456', // from paymob Select Developers -> iframes
    integrationID: '123456', // from dashboard Select Developers -> Payment Integrations -> Online Card ID 
  ),
  totalPrice: 100, // 100 EGP --required pay with Egypt currency
  successResult: (data) {
      // Handle successful payment
  },
  errorResult: (error) {
      // Handle payment error
  }
);

Complete Example Demo

Here is a complete example of how to integrate the flutter_paymob_egypt plugin into your Flutter application:

import 'dart:developer';

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

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

class FlutterPaymobDemo extends StatelessWidget {
  const FlutterPaymobDemo({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Paymob Demo',
      debugShowCheckedModeBanner: false,
      home: FluterPaymobEgypt(),
    );
  }
}

class FluterPaymobEgypt extends StatelessWidget {
  const FluterPaymobEgypt({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.blue),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => FlutterPaymobPayment(
                cardInfo: CardInfo(
                  apiKey: "YOUR_API_KEY", // from dashboard Select Settings -> Account Info -> API Key
                  iframesID: '123456', // from paymob Select Developers -> iframes
                  integrationID: '123456', // from dashboard Select Developers -> Payment Integrations -> Online Card ID
                ),
                totalPrice: 100, // required pay with Egypt currency
                appBar: null, // optional
                loadingIndicator: null, // optional
                billingData: null, // optional => your data
                items: const [], // optional
                successResult: (data) {
                  log('successResult: $data');
                },
                errorResult: (error) {
                  log('errorResult: $error');
                },
              ),
            ));
          },
          child: const Text('Pay with paymob'),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用flutter_paymob_egypt插件的示例代码。该插件用于在埃及进行支付集成。请确保你已经有一个Flutter项目，并且已经添加了flutter_paymob_egypt依赖。

第一步：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_paymob_egypt: ^最新版本号  # 请替换为实际最新版本号

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

第二步：配置Android和iOS

Android配置

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

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

iOS配置

在ios/Runner/Info.plist中添加必要的权限（如果需要）。通常，对于支付插件，网络权限是必需的：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

第三步：初始化和使用插件

在你的Flutter代码中，导入flutter_paymob_egypt包，并进行初始化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Paymob Example'),
        ),
        body: Center(
          child: PaymobButton(),
        ),
      ),
    );
  }
}

class PaymobButton extends StatefulWidget {
  @override
  _PaymobButtonState createState() => _PaymobButtonState();
}

class _PaymobButtonState extends State<PaymobButton> {
  final FlutterPaymobEgypt _paymob = FlutterPaymobEgypt();

  void _startPayment() async {
    try {
      // 替换为实际的支付参数
      var paymentResponse = await _paymob.startPayment(
        merchantId: "your_merchant_id", // 商户ID
        secretKey: "your_secret_key",   // 密钥
        amount: 100,                    // 金额（埃及镑）
        currency: "EGP",                // 货币代码
        orderId: "unique_order_id",     // 订单ID
        returnUrl: "https://yourwebsite.com/return", // 返回URL
        notifyUrl: "https://yourwebsite.com/notify", // 通知URL
        language: "ar",                 // 语言（可选）
        description: "Payment description", // 描述（可选）
      );

      // 处理支付响应
      print("Payment response: ${paymentResponse.toMap()}");
    } catch (e) {
      // 处理错误
      print("Payment error: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _startPayment,
      child: Text('Start Payment'),
    );
  }
}

注意事项

  1. 替换实际参数：在_startPayment方法中，确保你替换了merchantId、secretKey、orderId、returnUrl和notifyUrl等参数为实际值。

  2. 错误处理：在实际应用中，你应该有更完善的错误处理机制，例如显示错误消息给用户。

  3. 支付回调：通常支付网关会回调你的服务器（notifyUrl），你需要在服务器端处理这些回调以更新订单状态。

  4. 安全性：不要在客户端代码中硬编码敏感信息，如secretKey。考虑使用环境变量或安全存储方式。

这样，你就完成了在Flutter项目中集成和使用flutter_paymob_egypt插件的基本步骤。

回到顶部