Flutter插件propaga的使用方法

Flutter插件propaga的使用方法

Propaga 提供了企业对企业（B2B）的先买后付（BNPL）服务，通过在分销商的结账过程中嵌入融资和灵活的支付选项。

通过连接到我们的API，您可以直接在您的 Flutter 应用程序中实现我们的 BNPL 按钮（以及流程！），并管理整个贷款服务。

Flutter插件propaga特性

• 此插件使用您的内部唯一ID来识别街角商店或用户。
• 我们使用外部验证和一次性验证码（OTP）来验证街角商店。
• 作为分销商，您可以接受街角商店的 Propaga 信用作为支付方式。

Flutter插件propaga开始使用

要使用该插件，您只需在 pubspec.yaml 文件中添加以下行：

dependencies:
  propaga: <stable-version>

使用方法

要实现按钮，您可以在以下示例中调用它：

PropagaButton(
  isActive: isActivePropagaButton,
  onSelect: () {},
  token: '<your-awesome-token>',
  cornerStoreId: '14578',
  totalAmount: 8000
);

对于上下文，

1. cornerStoreID - 指的是请求信用的用户的内部ID。
2. TotalAmount - 指的是订单的总金额或所需的信用总额（例如，$400，这包括添加到购物车的所有物品）。

该按钮将在“付款方式”部分向用户显示简单的信息。这些信息可以包括：

• 预注册状态
• 注册状态
• 等待名单状态
• 信用额度超限状态
• 最低交易额状态

如果您想调用完整的流程，可以使用 startPropaga 函数，如下所示：

startPropaga(
  context,
  PropagaPayment(
    onSuccessTransaction: (PropagaResponse response) {},
    onErrorTransaction: (PropagaError error) {},
    totalAmount: 8000,
    token: 'pr_test_MUhd1z9e0F2JFnq',
    cornerStoreId: '14578',
    wholesalerTransactionId: "wholesalerId-123",
    products: [
      Products(
        externalSKU: '12312',
        name: 'Nombre',
        quantity: 3
      ),
    ]
  )
)

在这里，onSuccessTransaction 是一个回调，您可以用它来获取交易是否成功的信息。同样地，如果交易不成功，onErrorTransaction 回调会返回一个包含状态码和错误消息的错误映射。

PropagaResponse 类遵循以下接口：

class PropagaResponse {
  PropagaResponse({
    required this.transactionId,
    required this.totalAmountWithInterest,
    required this.cornerStoreId,
    required this.paymentDate,
  });

  final String transactionId;
  final double totalAmountWithInterest;
  final String cornerStoreId;
  final String paymentDate;
}

而对于错误，PropagaError 使用以下接口：

class PropagaError {
  PropagaError({
    required this.errorCode, 
    required this.errorMessage
  });

  final String errorCode;
  final String errorMessage;
}

startPropaga 函数用于启动支付流程，包括以下步骤：

1. 用户点击 PropagaButton 来启动支付流程。
2. 调用 startPropaga 函数，传递必要的参数，包括 PropagaPayment 对象，其中包含有关交易的信息以及处理成功和错误情况的回调。
3. Propaga 验证交易信息，并根据结果返回响应或错误。
4. 如果交易成功，onSuccessTransaction 回调将被触发，并返回 PropagaResponse 对象。
5. 如果交易失败，onErrorTransaction 回调将被触发，并返回 PropagaError 对象。

总之，Propaga 提供了一种简单而强大的方式，让拉美地区的街角商店只需点击一下按钮即可获得融资，并且同样使分销商能够增加GMV，提高保留率，并数字化支付。此外，PropagaButton 和 startPropaga 函数使得开发人员可以轻松地将 Propaga 的工具集成到他们的 Flutter 应用程序中。

示例代码

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:propaga/main.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Propaga Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(title: 'Propaga demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late bool isActivePropagaButton = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: PropagaButton(
                isActive: isActivePropagaButton,
                onSelect: () => setState(() => isActivePropagaButton = !isActivePropagaButton),
                token: 'pr_test_MUhd1z9e0F2JFnq',
                cornerStoreId: '14578',
                totalAmount: 8000,
              ),
            ),
            const SizedBox(
              height: 40.0,
            ),
            SizedBox(
              width: size.width * 0.9,
              height: 40,
              child: ElevatedButton.icon(
                style: const ButtonStyle(),
                onPressed: () {
                  startPropaga(
                    context,
                    PropagaPayment(
                      onSuccessTransaction: (PropagaResponse response) {
                        print(response.transactionId);
                        print(response.paymentDate);
                        print(response.totalAmountWithInterest);
                      },
                      onErrorTransaction: (PropagaError error) {
                        print(error.errorCode);
                        print(error.errorMessage);
                      },
                      totalAmount: 8000,
                      token: 'pr_test_MUhd1z9e0F2JFnq',
                      cornerStoreId: '14578',
                      wholesalerTransactionId: "wholesalerId-123",
                      products: [
                        Products(
                          externalSKU: '12312',
                          name: 'Nombre',
                          quantity: 3
                        ),
                      ]
                    )
                  );
                },
                icon: const Icon(Icons.payment),
                label: const Text('Pagar'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}