Flutter快速结账插件juno_direct_checkout的使用
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
更多关于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'),
),
],
),
),
),
);
}
}
说明:
- 依赖项:确保在
pubspec.yaml
中添加了juno_direct_checkout
。 - 表单:创建一个简单的表单来收集支付金额和描述。
- 启动结账:使用
JunoDirectCheckout.startCheckout
方法启动结账流程。你需要提供Juno公钥、金额和描述。其他参数如returnUrl
和notificationUrl
是可选的。 - 错误处理:添加基本的错误处理来捕获和处理结账流程中可能出现的异常。
注意事项:
- 请确保替换示例代码中的
your_juno_public_key_here
为你的实际Juno公钥。 - 根据你的应用需求,你可能需要添加更多的错误处理和用户反馈。
- 详细的使用文档和API参考可以查阅
juno_direct_checkout
插件的官方文档或GitHub仓库。
这样,你就可以在Flutter应用中集成并使用Juno的快速结账功能了。