Flutter页面滚动效果插件pagaleve_flutter的使用

概述

Pagaleve Flutter 提供了一种简单的方法来集成 Flutter 应用程序中的 Pagaleve 支付流程。此插件允许用户通过简单的配置实现支付页面的嵌入。

安装

您可以使用以下两种方法之一安装 Pagaleve Flutter 插件：

方法 1：添加到 pubspec.yaml

在您的 pubspec.yaml 文件中直接添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  pagaleve_flutter: ^1.0

然后运行以下命令以获取依赖项：

flutter pub get

方法 2：使用 flutter pub add

您也可以在终端中使用以下命令来添加插件：

flutter pub add pagaleve_flutter

这将自动更新您的 pubspec.yaml 文件并执行 flutter pub get。

初始化 Checkout

调用 checkout 方法以启动支付流程，并返回一个 OTP 页面。

传递给 checkout 的参数与文档中的说明相同：创建 Checkout

方法 checkout

参数

• context: 表示 Flutter 中某个小部件在小部件树中的位置的对象。它用于获取有关小部件树的信息并操作导航和渲染。
  更多信息请参见：BuildContext。
• data: 包含必要支付数据的 CheckoutData 实例，包括订单信息、购买者信息、配送详情等。这些数据将被传递给 Pagaleve 的 Checkout API 以完成交易。例如：

final CheckoutData checkoutData = CheckoutData(
  metadata: {},
  order: Order(
    amount: 20000,
    description: "description",
    items: [
      Item(
        image: "http://pagaleve.com.br",
        name: "Blusa Verde Lily",
        price: 12000,
        quantity: 1,
        reference: "reference",
        sku: "sku",
        url: "http://pagaleve.com.br",
      ),
      Item(
        image: "http://pagaleve.com.br",
        name: "Sapato Feminino Couro Preto",
        price: 6000,
        quantity: 1,
        reference: "reference",
        sku: "sku",
        url: "http://pagaleve.com.br",
      ),
      Item(
        image: "http://pagaleve.com.br",
        name: "Cinto Faixa Fivela Plástico Gloss Promoção Inverno",
        price: 2000,
        quantity: 1,
        reference: "reference",
        sku: "sku",
        url: "http://pagaleve.com.br",
      ),
    ],
    metadata: {},
    reference: "PL20240625021025",
    shipping: Shipping(
      address: Address(
        city: "São Paulo",
        complement: "",
        name: "Office",
        neighborhood: "Vila Madalena",
        number: "590",
        phoneNumber: "11987654387",
        state: "SP",
        street: "Rua Harmonia",
        zipCode: "05435001",
      ),
      amount: 1000,
      pickup: false,
      tracking: Tracking(carrier: "carrier", code: "code", url: "url"),
    ),
    tax: 20,
  ),
  shopper: Shopper(
    billingAddress: Address(
      city: "City",
      complement: "",
      name: "Jane Doe",
      neighborhood: "Neighborhood",
      number: "123",
      phoneNumber: "11987654321",
      state: "XX",
      street: "Street",
      zipCode: "12345678",
    ),
    birthDate: "2000-01-01T00:00:00.000Z",
    cpf: "12345678901",
    email: "email@email.com",
    firstName: "John",
    lastName: "Doe",
    phone: "99123456789",
  )
);

• onSuccess: 当 Checkout 成功时调用的函数。返回一个 CheckoutValues 实例。示例返回值如下：

{
  'checkoutId': 'a1b9f49b-b3ee-48c1-b30d-14f64b80b5ce',
}

• onError: 当 Checkout 过程中发生错误时调用的函数，返回以下异常之一：

示例代码

以下是一个完整的示例，展示如何使用 Pagaleve Flutter 插件：

import 'package:pagaleve_flutter/pagaleve_flutter.dart';

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

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

  [@override](/user/override)
  State<SdkExample> createState() => _SdkExampleState();
}

class _SdkExampleState extends State<SdkExample> {
  Pagaleve pagaleve = Pagaleve(
    apiKey: '<API-KEY>', // 登录密钥
    apiSecret: '<API-SECRET>', // 密码
    environment: 'Stage', // 可选参数，默认为 'Production'
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义一个方法用于提交 Checkout 数据
    onSubmit(CheckoutData data) async {
      await pagaleve.checkout(
        context,
        data: data,
        onSuccess: (CheckoutValues values) {
          // 在这里处理成功的情况
          print("Checkout 成功: ${values.checkoutId}");
        },
        onError: (Object error) {
          // 在这里处理错误情况
          if (error is CheckoutCancelledException) {
            print("Checkout 被取消");
          } else if (error is InvalidCustomerFieldsException) {
            print("客户信息不完整或有误");
          } else {
            print("未知错误");
          }
        },
      );
    }

    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: TextButton(
            onPressed: () {
              // 调用 onSubmit 方法
              onSubmit(checkoutData);
            },
            child: const Text('创建 Checkout'),
          ),
        ),
      ),
    );
  }
}