Flutter支付插件yjy_stripe_checkout的使用
Flutter支付插件yjy_stripe_checkout的使用
⚠️ 重要！
此插件正在被弃用，因为现在支付功能仅依赖后端代码即可实现。 官方文档参考：Stripe Checkout 快速入门
我们之前使用的重定向到支付页面的方法在官方SDK中已被弃用，并将在未来版本中移除。 以下是替代方案的描述： 在线支付功能对比
- 支付链接：无需任何代码集成。
- Checkout：需要在服务器端设置支付会话，并处理Flutter应用中的路由重定向。
- Elements：Flutter Stripe SDK 提供了
PaymentSheet（适用于iOS和Android）和PaymentElement（适用于Web），通过少量代码即可轻松集成预构建的UI，支持多种支付方式并允许自定义UI。
最快速构建转化优化支付表单的方式，托管于Stripe。
final sessionId = await getSessionIdFromMyServer(); // 获取服务器生成的支付会话ID
final response = await redirectToCheckout(context: context, sessionId: sessionId, publishableKey: publishableKey);了解更多关于Checkout的信息：Stripe文档
Web
在Web平台上，网站会自动重定向到Stripe的支付页面。当创建支付会话时，会在服务器上定义的 successUrl 或 canceledUrl 上返回。
查看如何配置服务器：Stripe Checkout 配置工具
此外，在Web项目中还需要将JS库添加到 index.html 文件中：
<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
在Android和iOS平台上，Stripe Checkout 是通过WebView实现的。为了与应用程序导航保持同步，您需要在后端和应用程序中定义相同的 successUrl 和 canceledUrl。
其他平台
遗憾的是，目前其他平台尚未实现WebView支持。当该插件在新平台上实现WebView支持时，此插件也将扩展其支持范围。
完整示例代码
以下是一个完整的Flutter示例，展示如何使用 yjy_stripe_checkout 插件进行支付：
1. 添加依赖
在 pubspec.yaml 文件中添加依赖：
dependencies:
yjy_stripe_checkout: ^版本号2. 配置 index.html
在 web/index.html 中添加Stripe的JS库：
<script src="https://js.stripe.com/v3/"></script>3. 服务器端代码
在服务器端生成支付会话ID（伪代码）：
@app.route('/create-checkout-session', methods=['POST'])
def create_checkout_session():
session = stripe.checkout.Session.create(
payment_method_types=['card'],
line_items=[
{
'price_data': {
'currency': 'usd',
'product_data': {
'name': 'T-shirt',
},
'unit_amount': 2000,
},
'quantity': 1,
},
],
mode='payment',
success_url='https://yourdomain.com/success',
cancel_url='https://yourdomain.com/cancel',
)
return jsonify({'id': session.id})4. Flutter代码
在Flutter应用中调用支付插件：
import 'package:flutter/material.dart';
import 'package:yjy_stripe_checkout/yjy_stripe_checkout.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 Checkout Example')),
body: Center(
child: ElevatedButton(
onPressed: () async {
try {
final sessionId = await getSessionIdFromServer(); // 调用服务器接口获取支付会话ID
final response = await redirectToCheckout(
context: context,
sessionId: sessionId,
publishableKey: '你的发布密钥', // 替换为你的Stripe发布密钥
);
if (response.success) {
print('支付成功');
} else {
print('支付失败');
}
} catch (e) {
print('错误: $e');
}
},
child: Text('发起支付'),
),
),
),
);
}
Future<String> getSessionIdFromServer() async {
// 模拟从服务器获取支付会话ID
return '测试会话ID';
}
}
更多关于Flutter支付插件yjy_stripe_checkout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
yjy_stripe_checkout 是一个用于 Flutter 的支付插件，它允许开发者集成 Stripe 支付功能到 Flutter 应用中。以下是如何使用 yjy_stripe_checkout 插件的基本步骤：
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 yjy_stripe_checkout 插件的依赖：
dependencies:
flutter:
sdk: flutter
yjy_stripe_checkout: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
2. 配置 Stripe
在使用 yjy_stripe_checkout 之前，你需要在 Stripe 上创建一个账户并获取你的 publishableKey 和 secretKey。
3. 初始化插件
在你的 Flutter 应用中初始化 yjy_stripe_checkout 插件。通常，你可以在 main.dart 文件中进行初始化：
import 'package:flutter/material.dart';
import 'package:yjy_stripe_checkout/yjy_stripe_checkout.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化 Stripe
await YjyStripeCheckout.init(
publishableKey: 'your_publishable_key',
merchantId: 'your_merchant_id', // 仅适用于 iOS
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stripe Checkout Demo',
home: HomeScreen(),
);
}
}4. 创建支付页面
接下来，你可以创建一个支付页面，使用 YjyStripeCheckout 来处理支付。
import 'package:flutter/material.dart';
import 'package:yjy_stripe_checkout/yjy_stripe_checkout.dart';
class HomeScreen extends StatelessWidget {
Future<void> _startPayment() async {
try {
final paymentIntent = await YjyStripeCheckout.createPaymentIntent(
amount: 1000, // 金额以最小货币单位表示，例如 1000 表示 10.00 美元
currency: 'usd',
);
final paymentResult = await YjyStripeCheckout.presentPaymentSheet(
paymentIntentClientSecret: paymentIntent['client_secret'],
);
if (paymentResult == PaymentResult.success) {
print('Payment successful!');
} else {
print('Payment failed or was canceled.');
}
} catch (e) {
print('Error: $e');
}
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stripe Checkout'),
),
body: Center(
child: ElevatedButton(
onPressed: _startPayment,
child: Text('Pay Now'),
),
),
);
}
}