探索Stripe Flutter SDK

尼耳多
1,892 阅读7分钟

Stripe是一个流行的支付处理器，它使开发者能够很容易地将支付方式整合到移动应用程序中。Stripe非常注重用户体验和安全性，它在购物者和开发者中的受欢迎程度已经撼动了电子商务行业。

在Stripe发布针对React Native的SDK后不久，Stripe Flutter SDK也被推出，它建立在Stripe API的功能之上。在本教程中，我们将通过安装Stripe Flutter SDK并将其集成到一个示例应用程序中来探索它。

要跟上本教程，您需要。

  • 在您的机器中安装Flutter
  • 有关Flutter的基本知识
  • 熟悉Dart
  • 在您的机器上安装Xcode或Android Studio
  • 用于测试的 iOS 模拟器或 Android 仿真器
  • 一个代码编辑器，即VS Code

让我们开始吧!

Stripe Flutter SDK

让我们来看看Stripe的一些功能，我们将使用Stripe Flutter SDK将其集成到我们的Flutter应用程序中。

支付选项

Stripe首先因支持多种货币而简化了应用程序中的国际交易而声名鹊起。目前，Stripe支持许多类型的电子支付。

例如，您可以轻松地将 Apple Pay 和 Google Pay 等钱包集成到您的 Flutter 应用程序中。同样，Stripe支持大多数流行的信用卡和借记卡，以及Klarna和Afterpay等现买现付的方式。

使用重定向和凭证等方法在银行账户之间转移资金是很直接的。Stripe提供了一个支付时间表，使您可以轻松地添加自己的银行账户信息并接收通过您的移动应用程序进行的付款。

内置UI

Stripe提供了一个原生UI，用于在Android和iOS应用程序中安全地接受付款。同样，SDK也提供了一个预制的用户界面，用于接受谷歌支付和苹果支付的付款。然而，如果你愿意，你可以很容易地在Stripe中建立自己的自定义支付表单。

利用Stripe的内置支付门户，你可以设置一次性购买或固定价格的订阅。

安全性

Stripe通过将敏感的支付信息发送到自己的服务器而不是主机的后端服务器来保持对安全的关注，从而简化了数据的收集，并符合支付卡信息（PCI）安全标准。

此外，Stripe执行3D安全认证，以符合欧洲的强客户认证准则，保护您的用户的最重要信息。

开始使用Stripe

如果您没有Stripe账户，首先要创建一个新的账户。您需要从您的账户中获得您的个人访问密钥。前往 "开发人员"部分，在API密钥下查找，如下图所示。

Set Up New Stripe Application

建立一个Flutter Stripe应用程序

有了个人访问密钥，我们将建立一个新的Flutter项目并安装Stripe Flutter SDK包。

导航到您的工作目录，添加下面的代码来初始化一个新的Flutter项目。

flutter create stripe_app

一旦初始化完成，打开您的Android模拟器或iOS模拟器。导航到stripe_app 文件夹，用下面的命令运行该应用程序。

cd stripe_app && flutter run

你的应用程序看起来应该与下面的截图相似。

Flutter Demo App Homepage

接下来，让我们安装Stripe Flutter SDK并开始构建我们的项目。导航到您的目录并复制和粘贴下面的代码到您的终端。

dart pub add flutter_stripe

安装要求

为了避免兼容性问题，您应该将您的项目设置为符合以下要求的规格。

安卓系统

对于安卓操作系统，你需要以下条件。

  • Android v5.0（API级别21）或更高的版本
  • Kotlin v1.5.0或更高版本
  • 为你的活动提供一个Theme.AppCompact 的后裔
  • FlutterFragmentActivity 中的MainActivity.kt ，而不是FlutterActivity

iOS

Stripe Flutter SDK与针对iOS 11及以上系统的应用程序兼容。

为了避免构建错误，请导航到iOS设置，并找到stripePublishableKey proj 或Runner.xcworkspastripe publishable key 。将应用程序的部署目标设置为12.0 。

Stripe Flutter SDK iOS App Setup

构建支付屏幕

为了从您的Flutter应用程序与Stripe API通信，从Stripe仪表板复制stripePublishableKey ，导航到lib 文件夹，创建一个名为env. dart 的新文件，并添加以下代码。

const stripePublishableKey =  "your_publishable_key";

stripePublishableKey 常量持有你的密钥的值。接下来，让我们为我们的应用程序设置卡片支付，并为Apple Pay和Google Pay添加按钮。

添加银行卡支付

Stripe中最流行的支付选项是信用卡或借记卡。要建立一个基本的银行卡输入，请导航到lib 文件夹，用下面的代码更新main. dart 中的代码。

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:stripe_app/.env.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // set the publishable key for Stripe - this is mandatory
  Stripe.publishableKey = stripePublishableKey;
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FLutter tripe",
      theme: ThemeData(
        primaryColor: Colors.green,
      ),
        home: PaymentScreen(),
      );
  }
}
// payment_screen.dart
class PaymentScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          CardField(
            onCardChanged: (card) {
              print(card);
            },
          ),
          TextButton(
            onPressed: () async {
              // create payment method
              final paymentMethod =
                  await Stripe.instance.createPaymentMethod(PaymentMethodParams.card());
            },
            child: Text('pay'),
          )
        ],
      ),
    );
  }
}

在上面的代码块中，我们导入Flutter Stripe SDK和.env.dart 文件。然后，我们用之前创建的StripePublishableKey 来初始化Stripe。PaymentScreen 返回付款输入文件和按钮的脚手架。

在这一点上，你的应用程序看起来应该与下面的截图类似。

Card Payment Setup Stripe Flutter

苹果支付插件

SDK内置了对支付插件的支持，包括苹果支付和谷歌支付。下面的代码片断创建了一个Apple Pay 按钮。

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:stripe_app/.env.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // set the publishable key for Stripe - this is mandatory
  Stripe.publishableKey = stripePublishableKey;
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FLutter tripe",
      theme: ThemeData(
        primaryColor: Colors.green,
      ),
        home: ApplePay(),
      );
  }
}
class ApplePay extends StatefulWidget {
  @override
  _ApplePayState createState() => _ApplePayState();
}
class _ApplePayState extends State<ApplePay> {
  @override
  void initState() {
    Stripe.instance.isApplePaySupported.addListener(update);
    super.initState();
  }
  @override
  void dispose() {
    Stripe.instance.isApplePaySupported.removeListener(update);
    super.dispose();
  }
  void update() {
    setState(() {});
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          if (Stripe.instance.isApplePaySupported.value)
            Padding(
              padding: EdgeInsets.all(16),
              child: ApplePayButton(
                onPressed: _handlePayPress,
              ),
            )
          else
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text('Apple Pay is not available in this device'),
            ),
        ],
      ),
    );
  }
}

Future<void> _handlePayPress() async {
  try {

  } catch (e) {
  }
}

ApplePay 类返回一个按钮的脚手架和一个_handlePayPress 函数，该函数在每次按动按钮时被触发。回顾一下，Stripe Flutter SDK是用Dart API来处理事件和响应。然而，您可以像我们对_handlePayPress 方法那样创建自定义的事件处理程序。

现在，你的应用程序应该看起来像下面的截图。

Apple Pay Setup Stripe Flutter

谷歌支付插件

在我们创建Google Pay 按钮之前，让我们安装flutter pay 包。

flutter pub add pay

在Installation complete ，用下面的代码替换main.dart 中的代码，以创建谷歌支付按钮。

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:pay/pay.dart';
import 'package:stripe_app/.env.dart';
import 'package:pay/pay.dart' as pay;
const _paymentItems = [
  pay.PaymentItem(
    label: 'Total',
    amount: '108.99',
    status: pay.PaymentItemStatus.final_price,
  )
];
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // set the publishable key for Stripe - this is mandatory
  Stripe.publishableKey = stripePublishableKey;
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FLutter tripe",
      theme: ThemeData(
        primaryColor: Colors.green,
      ),
        home: GooglePay(),
      );
  }
}
class GooglePay extends StatefulWidget {
  @override
  _GooglePayState createState() => _GooglePayState();
}
class _GooglePayState extends State<GooglePay> {
  @override
  void initState() {
    Stripe.instance.isApplePaySupported.addListener(update);
    super.initState();
  }
  @override
  void dispose() {
    Stripe.instance.isApplePaySupported.removeListener(update);
    super.dispose();
  }
  void update() {
    setState(() {});
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          if (Stripe.instance.isApplePaySupported.value)
            Padding(
              padding: EdgeInsets.all(16),
              child: GooglePayButton(
              paymentConfigurationAsset: 'google_pay_payment_profile.json',
              paymentItems: _paymentItems,
              style: GooglePayButtonStyle.black,
              type: GooglePayButtonType.pay,
              margin: const EdgeInsets.only(top: 16),
              onPaymentResult: onGooglePayResult,
              loadingIndicator: const Center(
                child: CircularProgressIndicator(),
              ),
                onPressed: () async {
                }
              ),
            )
          else
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text('Apple Pay is not available in this device'),
            ),
        ],
      ),
    );
  }
}

Future<void> onGooglePayResult(paymentResult) async {
    try {

  } catch (e) {
  }
  }

在上面的代码中，我们导入了之前安装的pay 包，创建了一个_paymentItems 常量来保存我们的支付细节，然后将GoogleButton 中的paymentItems 的值设置为_paymentItems 。

向你的应用程序添加资产需要创建一个新的部分。在你项目的根目录下创建一个名为assets 的新文件夹，然后创建一个名为google_pay_payment_profile.json 的新文件。最后，在pubspec.yaml 中启用资产。注意，paymentConfigurationAsset 是必需的。

Google Pay Configuration Stripe Flutter

Stripe查询和响应操作

Stripe Flutter SDK有一些函数，在通过Stripe API发送和接收数据时，会调用这些函数进行特定的查询和响应操作。

  • fetchPaymentIntentClientSecret: 从后端返回客户的秘密
  • confirmApplePayPayment**:**确认苹果支付
  • confirmPaymentMethod: 通过要求clientSecret 和付款细节来确认付款方式

结论

Stripe Flutter SDK是一个简单而安全的软件包，用于在您的Flutter应用程序中集成和接受付款。在本教程中，我们探讨了Stripe的特点和功能，了解了是什么让它成为开发者的热门选择。我们涵盖了用Stripe设置Flutter应用程序的必要步骤，然后添加了借记卡支付以及Apple Pay和Google Pay的按钮。

Stripe Flutter SDK是一个很好的选择，只要您需要在移动应用程序中添加支付选项。我希望你喜欢这个教程!

探索Stripe Flutter SDK一文出现在LogRocket博客上。

avatar
文章
阅读
粉丝