使用Flutter Web实现支付元素Stripe

问题描述 投票：0回答：1

有人设法将gpay和apple pay等stripe支付按钮集成到flutter web中，我知道flutter web仍然支持，但如果有其他方法来实现它，那会有很大帮助

谢谢

https://stripe.com/docs/stripe-js/elements/ payment-request-button

我为您提供了条纹链接，您可以在其中查看我引用的文档和按钮

https://stripe.com/docs/stripe-js/elements/ payment-request-button

新闻：查看我的github存储库的示例，我解决了它https://github.com/TKevinTL/stripe_monei_ payment_flutter.git

flutter stripe-payments payment applepay google-pay
1个回答
0
投票

理论上可以使用 flutter_stripe_web 包中的 PaymentElement 对象来使用 Apple Pay 或 Google Pay。然而，在撰写本文时，flutter_stripe_web 文档尚不清楚，我无法在自己的测试中成功使用它。

对于我的 Flutter Web 项目，我使用 Stripe.js 将 Apple Pay 按钮添加到 HTML 页面，然后使用 HtmlElementView 小部件将 HTML 页面嵌入到我的 Flutter 屏幕中。以下是有关如何执行此操作的说明。

开始使用

在开始编写代码之前，您首先需要：

  1. 拥有活跃的 Stripe 帐户
  2. 将您的 Web 域添加到 Stripe 仪表板中的付款方式域
  3. 按照说明验证您的域，这意味着将域关联文件（由 Stripe 提供）添加到您的项目中，并使其在 https://yourdomain/.well-known/apple-developer-merchantid-domain-association 中可用

HTML 文件和 Stripe.js 元素选项

然后您应该在 Flutter 项目的 web 目录中创建一个 HTML 文件，并将 Stripe 支付元素放入其中。 Stripe.js 有两个主要选项可以获取 Apple Pay 或 Google Pay 按钮：

付款请求按钮已弃用，Stripe 建议使用快速结帐元素。主要区别在于，快速结账元素一次在屏幕上显示多个平台支付选项/按钮，而支付请求按钮仅显示一个按钮（Apple Pay、Google Pay 或链接，具体取决于用户的浏览器和设备支持） .

对于我的项目，我正在寻找一个非常简单的解决方案来仅支持 Apple Pay，因此我选择使用付款请求按钮。但无论哪种方式，方法都是相同的。

这是我的 HTML 文件的简化版本：

<!DOCTYPE html>
<html>

<body>

<form id="stripeForm">
    <div id="payment-request-button"></div>
</form>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>

<script>
var stripe = Stripe('your stripe publishable key');

const appearance = {
    theme: 'stripe',
};
var elements = stripe.elements({ appearance });

const paymentRequest = stripe.paymentRequest({
    country: 'US',
    currency: 'usd',
    total: {
        label: 'Your Payment Description',
        amount: 100,
    },
});

paymentRequest.on('token', function(event) {
    event.complete('success'); // this tells the device to close the payment sheet
    parent.stripe_result(event.token.id); // send the token back to Flutter
});

const paymentButton = elements.create('paymentRequestButton', {
    paymentRequest,
});

(async () => {
    // canMakePayment determines if the user has a wallet available (Apple Pay, Google Pay, or Link)
    // We use this to only display the payment button if the user has Apple Pay
    const result = await paymentRequest.canMakePayment();
    if ((result != null) && (result.applePay == true)) {
        paymentButton.mount('#payment-request-button');
    } else {
        console.log('Apple Pay not available');
    }
})();

</script>
</body>
</html>

这将创建一个付款请求并将按钮添加到屏幕上。 Stripe.js 中的 canMakePayment() 实际上与 flutter_stripe 包中的 isPlatformPaySupported() 相同。它验证用户的浏览器和设备是否支持平台支付。然后，代码仅在支持时显示按钮（在我的例子中，仅在支持 Apple Pay 时才显示按钮，因为我现在的用例仅适用于 Apple Pay）。

处理付款

您将需要根据您的付款用例自定义代码。在我的项目中，我只需要从 Stripe 取回一个代币，然后用于未来的定期、可变支付。如果您尝试让用户支付特定费用，那么您可能会：

  1. 让您的 Flutter 代码传入付款金额和详细信息，然后在 JS paymentRequest 中使用
  2. 使用从 Dart 代码或 HTML 文件中的附加 JavaScript 调用的服务器端函数创建 Stripe 支付意图，然后从支付意图中获取 Stripe 客户端密钥并在初始化 Stripe 元素时使用它
  3. 添加更多 JavaScript 代码来完成支付，或将数据传回您的 Dart 代码并让它完成支付

我的示例省略了这些步骤，因为我的项目不需要它们。

带有 HtmlElementView 的 Dart 文件

最后，您应该在 Flutter 项目中创建一个 Dart 文件，其中包含一个 HtmlElementView 来嵌入 HTML 文件并查看按钮。这是一个简化的示例：

class WebApplePay extends StatefulWidget {
  const WebApplePay({
    Key? key,
  }) : super(key: key);

  @override
  _WebApplePayState createState() => _WebApplePayState();
}

class _WebApplePayState extends State<WebApplePay> {
  html.IFrameElement? _element;

  @override
  void initState() {

    // This creates the iframe element
    _element = html.IFrameElement()
      ..width = '200px'
      ..height = '50px'
      ..style.border = 'none'
      ..allow = 'payment'
      ..src =
          'apple_pay.html';

    // This registers the HTML element (the iframe) to allow us to embed it in the Flutter UI below
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'StripeApplePay',
          (int viewId) => _element!,
    );

    // This listens to the result from the HTML/JS; when the HTML/JS page sends a result to parent.stripe_result in the JS code, the same data then is received here in our Flutter code
    js.context["stripe_result"] = (result) {
      print('Flutter received Stripe result');
      print(result);
      // ADD YOUR CODE TO DO SOMETHING WITH THE RESULT HERE
    };

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          width: 250,
          height: 100,
          child: HtmlElementView(
            viewType: 'StripeApplePay',
          ),
        ));
  }
}

我的项目发布在 Web、iOS 和 Android 上，因此仅在检测到 Web 时才使用此屏幕。

我希望这对其他人有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.