Stripe checkout - 嵌入到 flutter 移动 webview 中

Question

是否可以在移动设备（而非网络应用程序）的 Flutter 上使用 Stripe checkout？

我使用 https://pub.dev/packages/flutter_stripe 来使移动工作表变体正常工作，但它对于我的需求来说太有限了（我需要 MobilePay 付款方式支持，该支持仅在网络/结账上提供那一刻）。

我还没有找到任何关于使用 Stripe 和 Flutter 的 WebView 的好的文档。据我所知，Stripe 在带有结帐功能的 WebView 上并不大，但由于这种付款方式要求，我的手有点被束缚了......

我尝试使用网络视图嵌入结帐会话（在网站上按预期工作），但我认为我可能做得不正确。

服务器端

服务器端条带部分的片段

const session = await stripe.checkout.sessions.create({
  ui_mode: config.checkout.embedded ? 'embedded' : 'hosted',
  expires_at: Math.floor(DateTime.now().plus({ minutes: 30 }).toSeconds()), // expire this session after 30 minutes
  locale: preferredLocale,
  line_items: [
    {
      price_data: {
        currency: quotation.currency,
        unit_amount: Math.round(quotation.amount * 100),  // amount in cents
        product_data: {
          name: config.checkout.productName,
          description: config.checkout.productDescription,
        }
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  payment_intent_data: {
    metadata,
  },
  redirect_on_completion: config.checkout.embedded ? 'never' : undefined,
  success_url: config.checkout.embedded ? undefined
    : `${config.checkout.successUrl}?session_id={CHECKOUT_SESSION_ID}`,
});

退货

  sessionId: session.id,
  clientSecret: session.client_secret ?? undefined,

Flutter 前端

从服务器和 WebView 控制器分配返回条带结账会话初始数据的端点

  Future<bool> beginStripePayment() async {
    Apis apis = Apis();
    try {
      Map<String, dynamic> response = json.decode(
          await apis.createStripePaymentSession(
              widget.quoteId));
      clientSecret = response["clientSecret"];
      checkoutUrl = 'https://checkout.stripe.com/pay/$clientSecret';
      debugPrint(checkoutUrl);
      controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(Uri.parse(checkoutUrl));
      return Future.value(true);
    } catch (e) {
      debugPrint(e.toString());
    }
    return Future.value(false);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: pageInitialization,
      builder: (context, snapshot) {
        if (snapshot.data == true) {
          return SizedBox(
              height: commonFunctions.getTotalHeightDividedByPassedValue(
                  context, 2),
              width:
                  commonFunctions.getTotalWidthDividedByPassedValue(context, 2),
              child: WebViewWidget(
                controller: controller,
                gestureRecognizers: Set()
                  ..add(Factory(() => VerticalDragGestureRecognizer())),
              ));
        } else {
          return Container(
            color: Colors.white,
            child: centeredLoadingIndicator(context,
            ),
          );
        }
      },
    );
  }

我收到一条“出现问题 - 找不到您要查找的页面。请检查 URL 或联系商家。”

问题 URL 或密钥/可发布密钥是否相关？或者是否需要其他步骤才能通过 Webview 实现结账会话功能？ Web 变体使用自定义 Stripe UI 元素来生成 url，我希望我们不需要类似的东西。

Answer 1

我认为您没有使用正确的 URL 在应用程序中呈现 Stripe 结账页面。您应该使用 Checkout Session 对象中的 url 来呈现页面。