Flutter电商集成插件cielo_ecommerce的使用

Flutter电商集成插件cielo_ecommerce的使用

简介

cielo_ecommerce 是一个用于在Flutter应用中集成Cielo e-Commerce API的插件。通过这个插件，开发者可以轻松实现多种支付方式，包括信用卡、boleto（巴西银行票据）、Google Pay等。本文将详细介绍如何使用该插件，并提供一个完整的示例代码。

插件功能

cielo_ecommerce 插件支持以下功能：

• 简单交易：直接进行信用卡支付。
• 完整交易：包含更多支付选项和配置。
• 令牌化卡片：将信用卡信息转换为安全的令牌，以便后续使用。
• 欺诈分析：在支付过程中进行欺诈检测。
• boleto支付：生成并处理boleto支付。
• Google Pay：集成Google Pay进行支付。

使用步骤

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 cielo_ecommerce 依赖：

dependencies:
  cielo_ecommerce: ^2.2.0

2. 导入包

在需要使用的Dart文件中导入 cielo_ecommerce 包：

import 'package:cielo_ecommerce/cielo_ecommerce.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 cielo_ecommerce 插件进行简单的信用卡支付，并提供了查询、批准和取消交易的功能。

import 'package:cielo_ecommerce/cielo_ecommerce.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Cielo Ecommerce'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

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

var paymentId;
int? status = 0;
var enableAction;
var returnMessage;

class _MyHomePageState extends State<MyHomePage> {
  final CieloEcommerce cielo = CieloEcommerce(
    environment: Environment.sandbox, // 使用沙箱环境进行测试
    merchant: Merchant(
      merchantId: "SEU_MERCHANT_ID", // 替换为你的商户ID
      merchantKey: "SEU_MERCHANT_KEY", // 替换为你的商户密钥
    ),
  );

  /// 执行支付操作
  _makePayment() async {
    print("Transação Simples");
    print("Iniciando pagamento....");

    // 创建销售对象
    Sale sale = Sale(
      merchantOrderId: "2020032601", // 订单编号
      customer: Customer(
        name: "Comprador crédito simples", // 客户姓名
      ),
      payment: Payment(
        type: TypePayment.creditCard, // 支付类型：信用卡
        amount: 9, // 金额（以分为单位）
        installments: 1, // 分期数
        softDescriptor: "Mensagem", // 将显示在客户账单上的描述（最多15个字符）
        creditCard: CreditCard(
          cardNumber: "4024007153763191", // 信用卡号
          holder: 'Teste accept', // 卡片持有人姓名
          expirationDate: '08/2030', // 有效期
          securityCode: '123', // 安全码
          brand: 'Visa', // 卡片品牌
        ),
      ),
    );

    try {
      var response = await cielo.createSale(sale);

      print('paymentId ${response!.payment!.paymentId}');
      paymentId = response.payment!.paymentId;
      status = response.payment!.status;

      setState(() {});
    } on CieloException catch (e) {
      print(e);
      print(e.message);
      print(e.errors[0].message);
      print(e.errors[0].code);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (status == 0) {
      returnMessage = 'Aguardando atualização de status'; // 等待状态更新
    } else if (status == 1) {
      returnMessage = 'Pagamento apto a ser capturado ou definido como pago'; // 可以捕获或确认支付
    } else if (status == 2) {
      returnMessage = 'Pagamento confirmado e finalizado'; // 支付已确认并完成
    } else if (status == 10) {
      returnMessage = 'Pagamento cancelado'; // 支付已取消
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Text(
                'Status: $status - $returnMessage',
                textAlign: TextAlign.center,
              ),
            ),
            ElevatedButton(
                child: Text('Consultar', style: TextStyle(color: Colors.white)),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                ),
                onPressed: () async {
                  print('Consultar');
                  try {
                    // 查询支付状态
                    enableAction = await cielo.getReturn(paymentId);

                    // 打印查询结果
                    print(enableAction.toJson());

                    // 更新支付状态
                    status = enableAction.toJson()['Payment'].toJson()['Status'];

                    setState(() {});
                  } on CieloException catch (e) {
                    print(e);
                    print(e.message);
                    print(e.errors[0].message);
                    print(e.errors[0].code);
                  }
                }),
            ElevatedButton(
                child: Text('Aprovar', style: TextStyle(color: Colors.white)),
                style: ElevatedButton.styleFrom(
                  primary: Colors.green,
                ),
                onPressed: () async {
                  print('Aprovar');
                  try {
                    // 批准支付
                    enableAction = await cielo.enableCapture(paymentId);
                    status = enableAction.status;

                    setState(() {});
                  } on CieloException catch (e) {
                    print(e);
                    print(e.message);
                    print(e.errors[0].message);
                    print(e.errors[0].code);
                  }
                }),
            ElevatedButton(
                child: Text('Cancelar', style: TextStyle(color: Colors.white)),
                style: ElevatedButton.styleFrom(
                  primary: Colors.red,
                ),
                onPressed: () async {
                  print('Cancelar');
                  try {
                    // 取消支付
                    enableAction = await cielo.enableVoid(paymentId);
                    status = enableAction.status;
                    setState(() {});
                  } on CieloException catch (e) {
                    print(e);
                    print(e.message);
                    print(e.errors[0].message);
                    print(e.errors[0].code);
                  }
                }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _makePayment,
        tooltip: 'Increment',
        child: Icon(Icons.payment),
      ),
    );
  }
}