reactjs - 是否可以从 react-stripe-elements 获取值以将其显示在 react-credit-cards 组件中

Question

我想使用react-stripe-elements提供的安全性和功能，但在将数据输入到react-credit-cards 组件时显示它。为此，我需要访问这些字段将具有的值。所以它看起来像这样：

如何访问在 CardNumberElement、CardExpiryElement、CardCVCElement 等中输入的值以在可视组件中显示它们？

这可能吗？提前谢谢。

标签： reactjsstripe-payments

Answer 1

这是不可能的。您必须向 Elements 提供 CSS 选择器，以便在您的页面上显示敏感输入（信用卡号、到期日期和 cvc），然后 Stripe 将 iframe 注入您的页面以创建每个输入。您无法从代码中访问这些 iframe 的内容。

从条纹文档：

为了安全地从您的客户那里收集卡片详细信息，Elements 为您创建了由 Stripe 托管的 UI 组件。然后将它们放入您的付款表单中，而不是您直接创建它们。

无法访问这些数据实际上是一件非常好的事情。关于直接处理信用卡数据有严格而复杂的规定，未能满足这些规定将面临巨额罚款（PCI 合规性）。

也就是说，可以使用 CSS 自定义 Stripe 注入输入的外观。有关更多详细信息，请参阅他们的自定义样式文档。我发现这可以满足我制作自定义表单的用例。您可以从您链接的 react-credit-cards 库中利用您喜欢的设计的一些 CSS。

最后，Stripe 提供了他们自己的 React 库，它可能会满足您的用例，或者至少可以作为一个很好的起点来应用您自己的自定义：react-stripe-elements。