Flutter支付集成插件adyen_checkout的使用

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

Flutter支付集成插件adyen_checkout的使用

Adyen Flutter

Pub Package Adyen iOS Adyen Android

Adyen Flutter 插件提供了创建结账体验所需的构建块,允许购物者选择他们喜欢的支付方式付款。以下是该插件的主要功能和使用方法。

支持的支付方式

  • Drop-in:一个现成的Flutter包装器,适用于原生iOS和Android Drop-in,包括所有可用的支付方式。
  • Components:为每个支付方式提供专门的组件,如卡支付、Google Pay、Apple Pay 和即时支付(例如PayPal、Klarna等)。
  • API only:自定义UI,收集卡信息并加密后发送到服务器处理。

必备条件

在开始之前,请确保完成以下步骤:

  1. 获取Adyen测试账户
  2. 获取Client key,用于客户端与Adyen API通信。
  3. 获取API key,用于从服务器向Adyen API发起请求。
  4. 设置Webhooks以接收支付结果通知。

系统要求

Android

  • Android 5.0 (API 21) 或更高版本
  • Kotlin 1.8.22 或更高版本
  • AGP 8.1 或更高版本以及Gradle 8
  • 使用FlutterFragmentActivity而非默认的FlutterActivity

iOS

  • iOS 12 或更高版本
  • 在AppDelegate中添加返回URL处理器
  • 添加匹配returnUrl的自定义URL Scheme

集成指南

根据所选的服务端流程,请参考对应的集成文档:

自定义UI

您可以按照各平台的指南来定制用户界面样式:

示例代码

下面是一个完整的示例应用,展示了如何配置路由并展示不同的支付选项:

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

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

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

class CheckoutPage extends StatefulWidget {
  @override
  _CheckoutPageState createState() => _CheckoutPageState();
}

class _CheckoutPageState extends State<CheckoutPage> {
  final Service service = Service();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Checkout Options')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/dropInScreen");
              },
              child: Text("Use Drop-in"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, "/cardComponentScreen");
              },
              child: Text("Use Card Component"),
            ),
            if (defaultTargetPlatform == TargetPlatform.android)
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, "/googlePayNavigation");
                },
                child: Text("Use Google Pay Component"),
              ),
            if (defaultTargetPlatform == TargetPlatform.iOS)
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, "/applePayNavigation");
                },
                child: Text("Use Apple Pay Component"),
              ),
            // Add more buttons for other components as needed...
          ],
        ),
      ),
    );
  }
}

此代码片段展示了如何通过按钮触发不同类型的支付界面。实际应用中需要根据业务逻辑调整路由和页面内容。

对于更详细的实现细节,请参阅官方提供的完整示例项目example/lib/main.dart。它包含了更多关于如何配置各个组件的具体信息。

希望这些信息能帮助您成功集成Adyen支付功能!如果有任何问题或需要进一步的帮助,请随时联系我们的支持团队。


更多关于Flutter支付集成插件adyen_checkout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter支付集成插件adyen_checkout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter项目中集成Adyen Checkout插件,可以按照以下步骤进行。这些步骤包括在Flutter项目中添加依赖、配置Adyen的环境信息,以及实现支付流程的基本代码示例。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加adyen_checkout依赖:

dependencies:
  flutter:
    sdk: flutter
  adyen_checkout: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置Adyen环境信息

你需要在Adyen的后台创建一个应用程序,并获取必要的配置信息,如clientKeyenvironment(test或production)等。

3. 实现支付流程

以下是一个基本的Flutter应用示例,展示如何使用adyen_checkout插件进行支付:

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final String clientKey = "YOUR_CLIENT_KEY"; // 替换为你的clientKey
  final String environment = "test"; // 或者 "production"

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Adyen Checkout Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              // 创建一个支付配置
              final config = CheckoutConfiguration(
                clientKey: clientKey,
                environment: environment,
                paymentMethodsConfiguration: PaymentMethodsConfiguration(
                  // 配置你需要的支付方式,这里是一个简单的例子
                  card: CardConfiguration(
                    // 可以根据需要配置card相关的参数
                  ),
                ),
              );

              // 启动支付流程
              final result = await AdyenCheckout.startPayment(
                context: context,
                configuration: config,
                listener: (CheckoutListener listener) {
                  listener.onPaymentCompleted = (result) {
                    // 支付完成后的处理
                    print("Payment completed with result: $result");
                  };

                  listener.onPaymentFailed = (error) {
                    // 支付失败后的处理
                    print("Payment failed with error: $error");
                  };

                  listener.onPaymentCancelled = () {
                    // 支付取消后的处理
                    print("Payment cancelled");
                  };
                },
              );

              // 处理支付结果
              if (result != null) {
                // 你可以在这里将支付结果发送到你的服务器进行进一步处理
                print("Final payment result: $result");
              }
            } catch (e) {
              // 处理异常
              print("Error starting payment: $e");
            }
          },
          child: Text('Start Payment'),
        ),
      ),
    );
  }
}

注意事项

  1. 安全性:不要在客户端代码中硬编码敏感信息,如clientKey。在实际应用中,这些信息应该从安全的后端服务中获取。
  2. 错误处理:示例代码中简单地打印了错误信息和支付结果。在实际应用中,你应该根据需要进行更详细的错误处理和结果处理。
  3. 支付回调:支付完成后,你应该将支付结果发送到你的服务器进行验证和处理,以确保支付的安全性和准确性。

通过上述步骤,你应该能够在Flutter应用中成功集成Adyen Checkout插件并实现基本的支付功能。

回到顶部