Flutter PayPal支付插件flutter_paypal_checkout的使用

Flutter PayPal支付插件flutter_paypal_checkout的使用

🚀 最佳且简单的方式在Flutter应用中集成PayPal支付 🚀

flutter_paypal_checkout 插件的主要特性：

1. 简单易用，连接Flutter与PayPal
2. 即插即用 🚀
3. 事件处理 🚀
4. 易于跟随的指南

🎖 安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_paypal_checkout: ^<latest_version>

Android

在 app/build.gradle 文件中配置：

defaultConfig {
    minSdkVersion 17
    compileSdkVersion 33    
}

iOS

无需额外设置

使用

⚡ 设置

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_paypal_checkout 插件进行PayPal支付。

import 'package:flutter/material.dart';
import 'package:flutter_paypal_checkout/flutter_paypal_checkout.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(
        primarySwatch: Colors.blue,
      ),
      home: const CheckoutPage(),
    );
  }
}

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

  @override
  State<CheckoutPage> createState() => _CheckoutPageState();
}

class _CheckoutPageState extends State<CheckoutPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "PayPal Checkout",
          style: TextStyle(fontSize: 20),
        ),
      ),
      body: Center(
        child: TextButton(
          onPressed: () async {
            // 调用PayPal支付页面
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => PaypalCheckout(
                sandboxMode: true, // 是否使用沙盒模式，默认为false
                clientId: "YOUR_CLIENT_ID", // PayPal客户端ID
                secretKey: "YOUR_SECRET_KEY", // PayPal密钥
                returnURL: "RETURN_URL", // 支付成功后的返回URL
                cancelURL: "CANCEL_URL", // 支付取消后的返回URL
                transactions: const [
                  {
                    "amount": {
                      "total": '70', // 总金额
                      "currency": "USD", // 货币类型
                      "details": {
                        "subtotal": '70', // 小计
                        "shipping": '0', // 运费
                        "shipping_discount": 0 // 运费折扣
                      }
                    },
                    "description": "The payment transaction description.", // 支付描述
                    "item_list": {
                      "items": [
                        {
                          "name": "Apple", // 商品名称
                          "quantity": 4, // 数量
                          "price": '5', // 单价
                          "currency": "USD" // 货币类型
                        },
                        {
                          "name": "Pineapple", // 商品名称
                          "quantity": 5, // 数量
                          "price": '10', // 单价
                          "currency": "USD" // 货币类型
                        }
                      ],
                      // 可选的收货地址信息
                      // "shipping_address": {
                      //   "recipient_name": "Raman Singh", // 收件人姓名
                      //   "line1": "Delhi", // 地址行1
                      //   "line2": "", // 地址行2
                      //   "city": "Delhi", // 城市
                      //   "country_code": "IN", // 国家代码
                      //   "postal_code": "11001", // 邮政编码
                      //   "phone": "+00000000", // 电话号码
                      //   "state": "Texas" // 州/省
                      // },
                    }
                  }
                ],
                note: "Contact us for any questions on your order.", // 支付备注
                onSuccess: (Map params) async {
                  // 支付成功时的回调
                  print("onSuccess: $params");
                },
                onError: (error) {
                  // 支付出错时的回调
                  print("onError: $error");
                  Navigator.pop(context);
                },
                onCancel: () {
                  // 用户取消支付时的回调
                  print('cancelled:');
                },
              ),
            ));
          },
          style: TextButton.styleFrom(
            backgroundColor: Colors.teal, // 按钮背景颜色
            foregroundColor: Colors.white, // 按钮文字颜色
            shape: const BeveledRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(1), // 按钮圆角
              ),
            ),
          ),
          child: const Text('Checkout'), // 按钮文字
        ),
      ),
    );
  }
}

⚡ 事件处理

• onSuccess: 支付成功时触发的回调函数。
• onError: 支付出错时触发的回调函数。
• onCancel: 用户取消支付时触发的回调函数。

onSuccess: (Map params) async {
  print("onSuccess: $params");
},

onError: (error) {
  print("onError: $error");
}

onCancel: () {
  print('cancelled:');
}