我正在尝试在我的应用程序中实现 Stripe,但确实收到此错误。
网络不支持 initPaymentSheet 我不知道如何使其在网络上工作。
WidgetsFlutterBinding.ensureInitialized();
Get.put(MenuController());
Get.put(NavigationController());
await initialization;
Stripe.publishableKey =
'pk_test_5555851KuZKPKYrgcm5L1......';
Stripe.merchantIdentifier = 'merchant.flutter.stripe.test';
Stripe.urlScheme = 'flutterstripe';
await Stripe.instance.applySettings();
runApp((MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => ApplicationState(),
builder: (context, _) => MyApp(),
)
],
// child: MyApp(),
)));
}
Future<void> makePayment(String amount, String currency) async {
try {
paymentIntentData = await createPaymentIntent(amount, currency);
await Stripe.instance.initPaymentSheet(
paymentSheetParameters: SetupPaymentSheetParameters(
paymentIntentClientSecret: paymentIntentData!['client_secret'],
applePay: true,
googlePay: true,
merchantCountryCode: 'US',
merchantDisplayName: 'KasaiMart'));
displayPaymentSheet();
} on StripeException catch (e) {
print('Exeption ${e.toString()}');
}
}
displayPaymentSheet() async {
try {
await Stripe.instance.presentPaymentSheet();
paymentIntentData = null;
Get.defaultDialog(
title: 'Select project to contribute to',
middleText: 'Paid Sucessfully');
} catch (e) {
print('Exeption ${e.toString()}');
}
}
createPaymentIntent(String amount, String currency) async {
try {
Map<String, dynamic> body = {
'amount': calculateAmount(amount),
'currency': currency,
'payment_method_types[]': 'card'
};
var response = await http.post(
Uri.parse('https://api.stripe.com/v1/payment_intents'),
body: body,
headers: {
'Authorization':
'pk_test_51K......',
'Content-Type': 'application/x-www-form-urlencoded'
});
return jsonDecode(response.body.toString());
} catch (e) {
print('Exeption ${e.toString()}');
}
}
我在哪种方法中做错了什么?是否可以解决此问题,或者是否来自软件包本身?
Stripe for Web 仍处于高度实验阶段。 来自 Github 上的自述文件:注意,现在它处于高度实验阶段,仅实现了一部分功能。
您还可以在 stripe_web 插件存储库中检查
initPaymentSheet
尚未实现。它立即抛出一个WebUnsupportedError
。另外,请检查同一位置的其他不支持的方法。
使用 stripe 中的信用卡字段
Stripe.buildWebCard(
controller: controller,
onCardChanged: (details) {
card = details;
setState(() {
allowPayment = details?.complete == true;
});
},
),
这是一个完整的示例:
import 'package:easy_localization/easy_localization.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:openfair/app/of_location.dart';
import 'package:openfair/ui/widgets/buttons.dart';
Future<bool?> showPaymentSheet({
required BuildContext context,
required Map<String, dynamic> paymentSheetData,
}) async {
if (OFLocation.isWebMobile) {
return showModalBottomSheet<bool?>(
context: context,
builder: (context) {
return PaymentSheetWidget(paymentSheetData: paymentSheetData);
});
}
return showDialog<bool?>(
context: context,
builder: (context) {
final size = MediaQuery.of(context).size;
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
insetPadding: EdgeInsets.symmetric(
horizontal: size.width * 0.1, vertical: size.height * 0.1),
child: PaymentSheetWidget(paymentSheetData: paymentSheetData));
});
}
class PaymentSheetWidget extends StatefulWidget {
final Map<String, dynamic> paymentSheetData;
const PaymentSheetWidget({super.key, required this.paymentSheetData});
@override
State<PaymentSheetWidget> createState() => _PaymentSheetWidgetState();
}
class _PaymentSheetWidgetState extends State<PaymentSheetWidget> {
CardFieldInputDetails? card;
bool loading = false;
bool allowPayment = false;
final CardEditController controller = CardEditController();
@override
Widget build(BuildContext context) {
final keyboardPadding = MediaQuery.of(context).viewInsets.bottom;
return Padding(
padding: const EdgeInsets.all(16)
.add(EdgeInsets.only(bottom: keyboardPadding)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stripe.buildWebCard(
controller: controller,
onCardChanged: (details) {
card = details;
setState(() {
allowPayment = details?.complete == true;
});
},
),
Padding(
padding: const EdgeInsets.only(top: 15),
child: AnimatedOpacity(
duration: Duration(milliseconds: 300),
opacity: allowPayment ? 1 : 0.7,
child: PrimaryButton(
"pay".tr(),
onPressed: () async {
if (!allowPayment) {
return;
}
setState(() {
loading = true;
});
await Stripe.instance
.confirmPayment(
options: PaymentMethodOptions(
setupFutureUsage:
PaymentIntentsFutureUsage.OffSession,
),
paymentIntentClientSecret:
widget.paymentSheetData['client_secret'],
data: PaymentMethodParams.card(
paymentMethodData: PaymentMethodData(
billingDetails: BillingDetails(
email: FirebaseAuth.instance.currentUser!.email,
))))
.onError((error, stackTrace) {
print(error);
print(stackTrace);
throw Exception("Failed to confirm payment");
});
Navigator.of(context).pop(true);
},
isLoading: loading,
),
),
)
],
),
);
}
}
stripe 会自行从卡输入中获取信用卡信息
initPaymentSheet
无法在网络上使用。 Stripe 的 React Native SDK 是 iOS/Android 独有的。
如果您想通过网络呈现类似于付款表的内容,您可以考虑使用付款元素:https://stripe.com/docs/ payments/ payment-element