Question

我想使用Stripe 作为付款提供商创建付款表单。

在Stripe.js Reference中，使用jQuery（包括页面中的外部脚本）描述了创建表单组件的过程。如何将它包含在我的React组件中？什么是最好的方法？到目前为止，我有以下内容：

LocalDateTime time = LocalDateTime.now();
LocalDateTime lastQuarter = time.truncatedTo(ChronoUnit.HOURS)
                                .plusMinutes(15 * (time.getMinute() / 15));

注1：我不想使用ReactScriptLoader，因为它没有主动更新。

注2：还看到了dangerouslySetInnerHTML解决方案，我认为这不是一个好习惯。

Answer 1

Stripe已正式发布react-stripe-elements模块，其中包含可帮助您将Stripe Elements添加到React应用程序的React组件。

Answer 2

虽然Stripe有NPM module，但它们不支持将其用于客户端应用程序。您必须通过脚本标记将stripe.js库添加到index.html页面（或者，无论您生成React将安装到哪个HTML元素并导入React脚本）：

<script src="https://js.stripe.com/v3/"></script>

这是Stripe documentation推荐的方法。它将在全局范围内创建Stripe对象，您的React代码可以访问该对象。

我会非常谨慎地使用图书馆进行支付，而不是以其开发人员支持的方式进行付款 - 认为为此目的，您应该避免使用ReactScriptLoader和dangerouslySetInnerHtml。

如果您使用ESLint，您可以在JSX文件的顶部指定一个全局来停止警告：

/* global Stripe */

如何在React组件中添加Stripe.js脚本

2 个答案: