Flutter支付集成插件stripe_checkout的使用

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

Flutter支付集成插件stripe_checkout的使用

⚠️ 重要！

此插件正在被弃用，因为现在的支付检查仅依赖后端代码来运行。 https://stripe.com/docs/checkout/quickstart

我们用来重定向到支付检查的方法在官方SDK中已被弃用，并将在未来版本中移除。 https://stripe.com/docs/js/deprecated/redirect_to_checkout

替代方法在这里有描述： https://stripe.com/docs/payments/online-payments#compare-features-and-availability

  • 支付链接：无需任何代码集成。
  • 支付检查：需要在服务器上设置支付会话并处理Flutter的路由重定向。
  • 元素：Flutter Stripe SDK提供了PaymentSheet（适用于iOS和Android）和PaymentElement（适用于Web），通过少量编码，您可以轻松地将预构建的UI集成到您的应用中，以支持多种支付方式，并允许自定义UI。
Screenshot 2021-04-27 at 15 29 27

快速构建托管在Stripe上的优化转换支付表单。

final sessionId = await getSessionIdFromMyServer();
final response = await redirectToCheckout(context: context, sessionId: sessionId, publishableKey: publishableKey);

了解更多关于支付检查的信息，请访问Stripe文档

Web

在Web端，网站会自动重定向到Stripe支付检查URL。当创建支付会话时，它将返回到您在服务器上定义的成功Url或取消Url。 https://stripe.com/docs/checkout/integration-builder

<html>
<head>
    ...
</head>
<body>
    ...
  <script src="https://js.stripe.com/v3/"></script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Android 和 iOS

Stripe支付检查使用webview实现。为了保持与您的应用程序导航同步，您必须在后端和您的应用中定义相同的成功Url和取消Url。

示例视频1

示例视频2

其他平台

目前，webview尚未在其他平台上实现。当该插件在新平台上实现时，此插件也将扩展其支持。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用stripe_checkout插件进行支付集成：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stripe Checkout Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final sessionId = await getSessionIdFromMyServer(); // 获取sessionId
              final response = await redirectToCheckout(
                context: context,
                sessionId: sessionId,
                publishableKey: 'YOUR_PUBLISHABLE_KEY',
              );
              if (response.success) {
                print('Payment successful!');
              } else {
                print('Payment failed.');
              }
            },
            child: Text('Make Payment'),
          ),
        ),
      ),
    );
  }

  Future<String> getSessionIdFromMyServer() async {
    // 这里应该调用你的服务器API来获取sessionId
    // 示例：返回一个模拟的sessionId
    return 'your-session-id';
  }
}

确保在index.html文件中添加Stripe的JavaScript库：

<html>
<head>
    ...
</head>
<body>
    ...
  <script src="https://js.stripe.com/v3/"></script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中集成并使用stripe_checkout插件进行支付的示例代码。这个插件允许你使用Stripe的Checkout功能来处理支付。

首先，确保你已经在pubspec.yaml文件中添加了stripe_checkout依赖：

dependencies:
  flutter:
    sdk: flutter
  stripe_checkout: ^2.0.0  # 请注意版本号，使用最新版本

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

接下来，你需要配置Stripe的公钥。你可以在Stripe的仪表盘中获取这个公钥。

配置Stripe公钥

在你的Flutter项目的main.dart或任何适当的地方，配置Stripe的公钥：

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

void main() {
  StripeCheckout.configure(
    key: 'pk_test_your_stripe_publishable_key', // 替换为你的Stripe公钥
  );
  runApp(MyApp());
}

创建支付按钮

接下来，创建一个按钮来触发支付流程：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stripe Checkout Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _launchStripeCheckout();
            },
            child: Text('Pay with Stripe'),
          ),
        ),
      ),
    );
  }

  Future<void> _launchStripeCheckout() async {
    try {
      var result = await StripeCheckout.open({
        amount: 1000, // 金额，单位是分（例如1000表示10美元）
        currency: 'usd',
        description: 'Example charge',
      });

      if (result['success']) {
        // 支付成功处理
        print('Payment successful: ${result['paymentIntent']}');
      } else if (result['error']) {
        // 支付错误处理
        print('Payment error: ${result['error']['message']}');
      } else {
        // 用户取消支付
        print('Payment cancelled');
      }
    } catch (e) {
      print('Error opening Stripe Checkout: $e');
    }
  }
}

运行应用

现在，你可以运行你的Flutter应用，点击“Pay with Stripe”按钮应该会打开Stripe的Checkout界面，允许用户进行支付。

注意事项

  1. 测试环境：上面的代码使用的是Stripe的测试公钥和测试金额。在实际部署之前，请确保切换到生产环境的公钥和金额。
  2. 安全性：不要在客户端代码中硬编码敏感信息，如私钥。所有的敏感操作应该在服务器端完成。
  3. 处理回调：在实际应用中，你可能需要处理更多的支付回调和状态更新，确保支付流程的正确性和安全性。

这个示例展示了如何在Flutter应用中使用stripe_checkout插件进行基本的支付集成。根据你的具体需求，你可能需要进一步的自定义和扩展。

回到顶部