Flutter支付集成插件stripe_js的使用

Flutter支付集成插件stripe_js的使用

本包处于非常早期的阶段，请谨慎在生产环境中使用。

贡献

该包通过查看StripeJS 文档 和 API 参考文档 手动移植而成。

它使用了js 包，该包允许从 Dart 访问 Stripe JS。虽然 API 端点使用了该包，但大多数 JS 对象都是纯 Dart 的冻结类，并利用了 [https://api.dart.dev/stable/2.18.4/dart-js_util/jsify.html] 和 [https://api.dart.dev/stable/2.18.4/dart-js_util/dartify.html]。尽管这些方法成本较高，但使用纯 Dart 允许轻松测试这些类并确保它们符合预期的架构。

示例代码

以下是一个完整的示例，展示了如何在 Flutter 应用程序中集成 Stripe 支付功能。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stripe Payment Example')),
        body: Center(
          child: PaymentButton(),
        ),
      ),
    );
  }
}

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

class _PaymentButtonState extends State<PaymentButton> {
  final String publicKey = "YOUR_STRIPE_PUBLIC_KEY"; // 替换为您的 Stripe 公钥
  final String sessionId = "YOUR_SESSION_ID"; // 替换为您创建的 Stripe 会话 ID

  void initiatePayment() async {
    try {
      // 初始化 Stripe.js
      await StripeJs.init(publicKey);

      // 创建支付元素
      var elements = await StripeJs.instance.elements();

      // 创建支付按钮
      var element = await elements.create('payment');

      // 设置支付元素的容器
      element.mount('#card-element');

      // 处理支付结果
      element.on('change', (event) {
        if (event.complete) {
          print('Payment completed');
        } else if (event.error != null) {
          print(event.error.message);
        }
      });

      // 创建支付请求
      var paymentRequest = await StripeJs.instance.paymentRequestWithSession(sessionId);

      // 添加支付请求到支付元素
      element.on('paymentrequest', (event) {
        event.respondWith(paymentRequest);
      });

    } catch (e) {
      print('Error initiating payment: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: initiatePayment,
      child: Text('Pay Now'),
    );
  }
}

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

1 回复

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


在 Flutter 应用中集成 Stripe 支付功能，可以使用 stripe_js 插件。stripe_js 是一个 JavaScript 库的 Flutter 封装，允许你在 Flutter Web 应用中使用 Stripe 的支付功能。以下是如何在 Flutter 中使用 stripe_js 的基本步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 stripe_js 依赖：

dependencies:
  flutter:
    sdk: flutter
  stripe_js: ^0.1.0

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

2. 引入 Stripe.js

在你的 Dart 文件中引入 stripe_js：

import 'package:stripe_js/stripe_js.dart';

3. 初始化 Stripe

在使用 Stripe 之前，需要初始化 Stripe 对象。你需要在 initState 或者 didChangeDependencies 中初始化 Stripe：

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

class _PaymentPageState extends State<PaymentPage> {
  Stripe? stripe;

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

  Future<void> initStripe() async {
    stripe = await Stripe.instance.loadStripe('your-publishable-key');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => handlePayment(),
          child: Text('Pay Now'),
        ),
      ),
    );
  }

  Future<void> handlePayment() async {
    if (stripe == null) {
      print('Stripe not initialized');
      return;
    }

    // 创建支付意图
    final paymentIntent = await createPaymentIntent();

    // 确认支付
    final result = await stripe!.confirmPayment(
      paymentIntent['client_secret'],
      PaymentMethodParams.card(
        paymentMethodData: PaymentMethodData(
          billingDetails: BillingDetails(
            email: 'customer@example.com',
            name: 'Customer Name',
          ),
        ),
      ),
    );

    if (result.error != null) {
      // 处理支付失败
      print('Payment failed: ${result.error!.message}');
    } else {
      // 处理支付成功
      print('Payment succeeded');
    }
  }

  Future<Map<String, dynamic>> createPaymentIntent() async {
    // 这里调用你的后端 API 来创建支付意图
    // 返回的 JSON 应该包含 `client_secret`
    // 例如：
    // return await http.post('https://your-backend.com/create-payment-intent');
    return {
      'client_secret': 'pi_123456789_secret_987654321',
    };
  }
}
回到顶部