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

Question

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

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

这可能吗？提前谢谢。

Answer 1

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

从条纹文档：

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

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

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

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