Flutter快速结账插件juno_direct_checkout的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter快速结账插件juno_direct_checkout的使用

DirectCheckout juno_direct_checkout

这个插件是Flutter版本的实现,基于以下原生项目:

该SDK用于加密和验证信用卡数据,以便与Juno/BoletoBancário支付API进行集成。

为了确保我们平台上的交易安全,Juno API采用端到端的信用卡数据加密政策。

更多详细信息,请访问集成页面:

如何在项目中添加库

您可以在pub.dev上找到如何将库添加到您的项目的说明。

使用示例

您可以在pub.dev上找到使用示例。

环境配置

由于依赖于供应商的加密库,Android的最低SDK版本为21,iOS的最低版本为11。

Android 需要额外配置

AndroidManifest.xml文件中配置您由Juno提供的公共令牌:

<manifest>
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
           ...
           android:name=".MyApplication"
           ...>
        <meta-data
                android:name="br.com.juno.directcheckout.public_token"
                android:value="YOUR_PUBLIC_TOKEN"/>
        <meta-data
                android:name="br.com.juno.directcheckout.public_token_sandbox"
                android:value="YOUR_PUBLIC_TOKEN_SANDBOX"/>

            ...

    </application>
</manifest>

注意事项

此插件已在Android上使用Java和iOS上使用Swift进行了测试。如果您有兴趣贡献测试或兼容性以支持Objective-C或Kotlin(如果该插件无法正常工作),我们欢迎您提供反馈和建议。

完整示例代码

以下是完整的示例代码,展示了如何使用juno_direct_checkout插件。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

import 'package:juno_direct_checkout/juno_direct_checkout.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 异步初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      // 初始化插件,传入配置信息
      var map = <String, dynamic>{
        "prod": false,
        "public_token": "YOUR_PUBLIC_TOKEN_SANDBOX"
      };
      print(await JunoDirectCheckout.init(map));

      // 准备卡片信息
      var card = <String, dynamic>{
        "prod": false,
        "public_token": "YOUR_PUBLIC_TOKEN_SANDBOX",
        "cardNumber": "5362 6820 0316 4890",
        "holderName": "Teste",
        "securityCode": "111",
        "expirationMonth": "6",
        "expirationYear": "2022"
      };

      // 获取卡片哈希值
      platformVersion = await JunoDirectCheckout.getCardHash(card);
      print(platformVersion);
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件在异步平台消息发送时被从树中移除,则丢弃回复而不是调用setState来更新我们的非存在的外观。
    if (!mounted) return;

    // 更新UI状态
    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Text('卡片哈希值: $_platformVersion\n'),
        ),
      ),
    );
  }
}

更多关于Flutter快速结账插件juno_direct_checkout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter快速结账插件juno_direct_checkout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成并使用juno_direct_checkout插件进行快速结账的一个基本示例。这个插件允许你通过Juno支付平台直接在应用中处理支付。

首先,确保你已经在pubspec.yaml文件中添加了juno_direct_checkout依赖:

dependencies:
  flutter:
    sdk: flutter
  juno_direct_checkout: ^最新版本号  # 请替换为实际发布的最新版本号

然后运行flutter pub get来获取依赖。

接下来,你需要在你的Flutter应用中配置Juno的相关设置。这通常涉及到获取Juno API密钥和设置支付参数。

以下是一个基本的代码示例,展示如何在Flutter中使用juno_direct_checkout插件:

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _amount = '';
  String _description = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Juno Direct Checkout Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Amount'),
                keyboardType: TextInputType.number,
                validator: (value) {
                  if (value.isEmpty || double.tryParse(value) == null) {
                    return 'Please enter a valid amount.';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _amount = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Description'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter a description.';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _description = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    try {
                      // Replace with your actual Juno public key
                      final publicKey = 'your_juno_public_key_here';
                      final checkoutResponse = await JunoDirectCheckout.startCheckout(
                        publicKey: publicKey,
                        amount: double.parse(_amount),
                        description: _description,
                        // Optional parameters
                        // returnUrl: 'https://yourapp.com/return',
                        // notificationUrl: 'https://yourapp.com/notification',
                      );

                      // Handle the checkout response
                      print('Checkout Response: $checkoutResponse');
                    } catch (e) {
                      print('Error: $e');
                    }
                  }
                },
                child: Text('Start Checkout'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明:

  1. 依赖项:确保在pubspec.yaml中添加了juno_direct_checkout
  2. 表单:创建一个简单的表单来收集支付金额和描述。
  3. 启动结账:使用JunoDirectCheckout.startCheckout方法启动结账流程。你需要提供Juno公钥、金额和描述。其他参数如returnUrlnotificationUrl是可选的。
  4. 错误处理:添加基本的错误处理来捕获和处理结账流程中可能出现的异常。

注意事项:

  • 请确保替换示例代码中的your_juno_public_key_here为你的实际Juno公钥。
  • 根据你的应用需求,你可能需要添加更多的错误处理和用户反馈。
  • 详细的使用文档和API参考可以查阅juno_direct_checkout插件的官方文档或GitHub仓库。

这样,你就可以在Flutter应用中集成并使用Juno的快速结账功能了。

回到顶部