Flutter PayPal支付插件paypal_mobile_web的使用

本文档介绍了如何在Flutter应用中使用paypal_mobile_web插件进行支付。该插件允许通过PayPal的API接收支付请求，并在Web端展示支付页面。

简介

paypal_mobile_web 是一个用于在Flutter Web应用程序中集成PayPal支付功能的插件。它允许开发者通过简单的配置实现PayPal支付流程，支持沙盒模式测试和实际支付环境。

插件功能概述

1. 获取PayPal支付URL
   使用插件可以生成支付所需的URL。

2. 跳转到PayPal支付页面
   用户可以通过生成的URL跳转到PayPal的支付页面完成支付。

3. 处理支付结果
   在用户完成支付后，可以处理返回的支付结果并执行后续逻辑。

使用步骤

以下是一个完整的示例，展示如何在Flutter Web应用中使用 paypal_mobile_web 插件。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 paypal_mobile_web 依赖：

dependencies:
  paypal_mobile_web: ^0.0.1

然后运行以下命令安装依赖：

flutter pub get

2. 配置PayPal账户

在开始开发之前，确保你已经在PayPal开发者门户网站上创建了一个账户，并获取了以下信息：

• Client ID: 应用程序的客户端ID。
• Secret Key: 应用程序的密钥。

这些信息将在支付过程中用于生成支付URL。

3. 编写代码

以下是一个完整的示例代码，展示了如何使用 paypal_mobile_web 插件进行支付。

示例代码

import 'dart:developer';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:paypal_mobile_web/paypal_mobile_web.dart';
import 'package:flutter_custom_tabs/flutter_custom_tabs.dart';
import 'package:url_launcher/url_launcher_string.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 启动PayPal支付流程
  _launchURL() async {
    // 调用插件方法获取支付URL
    Map resultPaypal = await PaypalCheckout().getMapCheckout(
        clientId: "AXs_4ClaWWjkdXbcD7mzGwvcs7Z8sXRuPL_OnQvE8p-3EI4F-uq5iSupvSYAafEXXGLjv9GCv2pK1Oqn", // 替换为你的Client ID
        secretKey: "EGRlbRFxz8dXke-wrRxN0RMITZZtSb6R9l_SBp-G7xl_guT1jZTYl5wXUsJkhiApYAO986bhaFGG7_3L", // 替换为你的Secret Key
        note: "Contact us for any questions on your order",
        transactions: [
          {
            "amount": {
              "total": '100', // 支付金额
              "currency": "BRL", // 币种
              "details": {
                "subtotal": '100',
                "shipping": '0',
                "shipping_discount": 0
              }
            },
            "description": "The payment transaction description.",
            "item_list": {
              "items": [
                {
                  "name": "Apple",
                  "quantity": 4,
                  "price": '10',
                  "currency": "BRL"
                },
                {
                  "name": "Pineapple",
                  "quantity": 5,
                  "price": '12',
                  "currency": "BRL"
                }
              ]
            }
          }
        ],
        sandboxMode: true, // 是否启用沙盒模式
        returnURL: "http://localhost:60560/aprov?id=605656", // 支付成功后的回调地址
        cancelURL: "http://localhost:60560/cancelpag?id=05404"); // 支付取消后的回调地址

    // 打印生成的支付URL
    print("url Aproval: ${resultPaypal['approvalUrl']}");
    print("url execute: ${resultPaypal['executeUrl']}");
    print("MMap: ${resultPaypal}");

    // 检查是否可以打开URL
    if (await canLaunchUrlString(resultPaypal['approvalUrl'])) {
      await launchUrlString(resultPaypal['approvalUrl'], mode: LaunchMode.inAppBrowserView);
    } else {
      throw 'Could not launch ${resultPaypal['approvalUrl']}';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            ElevatedButton(
                onPressed: _launchURL, child: const Text("发起支付")),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

将上述代码保存到 lib/main.dart 文件中，然后运行以下命令启动应用：

flutter run -d chrome