Flutter支付插件pay_with_paymob的使用

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

Flutter支付插件pay_with_paymob的使用

pay_with_paymob

pay_with_paymob 是一个简化Paymob支付网关集成的Flutter包,支持Visa和移动钱包支付。

特性

  • 无缝集成Paymob支付网关。
  • 支持多种支付方式:Visa和移动钱包。
  • 可定制化的支付视图,具有灵活的样式选项。
  • 收集用户数据以提供个性化的支付体验。
  • 提供回调函数处理支付成功和错误。

开始使用

先决条件
  1. 确保已安装Flutter SDK。
  2. 创建Paymob账户以获取API密钥和其他所需凭据。
安装

pubspec.yaml文件中添加以下内容:

dependencies:  
  pay_with_paymob: ^1.4.0

运行以下命令安装该包:

flutter pub get
使用

初始化支付数据

main函数或initState中初始化支付数据:

PaymentData.initialize(
  apiKey: "Your API Key", // 必需:在Dashboard -> Settings -> Account Info -> API Key下找到
  iframeId: "Your Iframe ID", // 必需:在Developers -> iframes下找到
  integrationCardId: "Your Card Integration ID", // 必需:在Developers -> Payment Integrations -> Online Card ID下找到
  integrationMobileWalletId: "Your Wallet Integration ID", // 必需:在Developers -> Payment Integrations -> Mobile Wallet ID下找到

  // 可选用户数据
  userData: UserData(
    email: "User Email", // 可选:默认为'NA'
    phone: "User Phone", // 可选:默认为'NA'
    name: "User First Name", // 可选:默认为'NA'
    lastName: "User Last Name", // 可选:默认为'NA'
  ),
  
  // 可选样式自定义
  style: Style(
    primaryColor: Colors.blue, // 默认:Colors.blue
    scaffoldColor: Colors.white, // 默认:Colors.white
    appBarBackgroundColor: Colors.blue, // 默认:Colors.blue
    appBarForegroundColor: Colors.white, // 默认:Colors.white
    textStyle: TextStyle(), // 默认:TextStyle()
    buttonStyle: ElevatedButton.styleFrom(), // 默认:ElevatedButton.styleFrom()
    circleProgressColor: Colors.blue, // 默认:Colors.blue
    unselectedColor: Colors.grey, // 默认:Colors.grey
  ),
);

导航到支付视图

初始化支付数据后,导航到支付视图:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PaymentView(
      onPaymentSuccess: () {
        // 处理支付成功
      },
      onPaymentError: () {
        // 处理支付失败
      },
      price: 100, // 必需:总价格(例如,100埃及镑)
    ),
  ),
);

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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用pay_with_paymob插件的一个代码示例。pay_with_paymob是一个用于集成Paymob支付网关的Flutter插件。

第一步:添加依赖

首先,在你的pubspec.yaml文件中添加pay_with_paymob依赖:

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

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

第二步:配置Paymob参数

在Flutter项目的lib目录下创建一个新的Dart文件,比如paymob_config.dart,用于存储Paymob的配置信息:

// paymob_config.dart
class PaymobConfig {
  static const String publicKey = '你的Paymob公钥';
  static const String secretKey = '你的Paymob私钥';  // 注意:私钥通常不在客户端代码中直接存储,这里仅为示例
  static const String apiUrl = 'https://api.paymob.com/v3';
  static const String merchantId = '你的商户ID';
}

第三步:初始化Paymob客户端

在你的主应用文件(例如main.dart)中,初始化Paymob客户端:

import 'package:flutter/material.dart';
import 'package:pay_with_paymob/pay_with_paymob.dart';
import 'paymob_config.dart';

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Paymob paymob;

  @override
  void initState() {
    super.initState();
    paymob = Paymob(
      publicKey: PaymobConfig.publicKey,
      secretKey: PaymobConfig.secretKey,  // 注意:实际使用中,私钥应保存在后端服务器
      apiUrl: PaymobConfig.apiUrl,
      merchantId: PaymobConfig.merchantId,
    );
  }

  void _startPayment() async {
    try {
      var paymentRequest = PaymentRequest(
        amount: 100,  // 支付金额,单位为最小货币单位(例如,对于美元,1美元 = 100美分)
        currency: 'USD',
        description: '商品描述',
        returnUrl: 'https://your-return-url.com',  // 支付完成后的回调URL
        customer: Customer(
          email: 'customer@example.com',
          phone: '1234567890',
        ),
      );

      var response = await paymob.startPayment(paymentRequest);
      print('Payment response: $response');
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Paymob Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}

class PaymentRequest {
  final int amount;
  final String currency;
  final String description;
  final String returnUrl;
  final Customer customer;

  PaymentRequest({
    required this.amount,
    required this.currency,
    required this.description,
    required this.returnUrl,
    required this.customer,
  });
}

class Customer {
  final String email;
  final String phone;

  Customer({
    required this.email,
    required this.phone,
  });
}

注意事项

  1. 私钥安全性:在实际应用中,不要将私钥存储在客户端代码中。私钥应该由后端服务器安全地存储和处理。
  2. 支付回调returnUrl用于支付完成后的回调,确保你有一个后端服务器来处理这些回调,以验证支付状态。
  3. 错误处理:在实际应用中,你应该更全面地处理错误情况,例如网络错误、支付失败等。

这个示例展示了如何在Flutter应用中集成Paymob支付插件并进行支付请求。根据你的具体需求,你可能需要调整这个示例。

回到顶部