Reactjs 将react stripe js与样式化组件一起使用

我在尝试使用Stripe

CardNumberRelation

和尝试使用

样式化组件对其进行样式化时遇到问题

当我试图提交使用自定义重新设计样式的CardNumberRelation组件的表单时，出现以下错误：

IntegrationError:必须提供有效的元素名称。有效元素包括：卡、卡号、卡到期日、卡CVC、邮政编码、付款请求按钮、iban、idealBank、p24Bank、auBankAccount、fpxBank；您传递了：对象。

我在这里创建了一个我试图实现的示例：

要复制输入卡号：4242到期日期：12/33 CVC:233，请按pay并在Chrome中打开开发者工具

---

我知道我可以通过传递

options

prop来实现相同的效果，但是我正在使用一些使用

样式化组件编写的旧的遗留组件，我希望保持它的一致性。
您的代码的主要问题是，您正在向Stripe的
getElement
方法提供包装的/styled
样式化的
。
getElement
方法仅接受库提供的元素组件，或此处记录的字符串元素类型：


修复方法是将SplitForm组件中的
StyledCardNumberRelation
替换为
CardNumberRelation
，如下所示：

const payload = await stripe.handleCardSetup(
  "seti_xyz",
  elements.getElement(CardNumberElement)
);

通过上述更改，在提供了真实的安装意图ID和可发布密钥之后，我能够在示例应用程序中创建一个安装意图，没有任何问题。
代码的主要问题是，您正在向Stripe的
getElement
方法提供包装的/样式化的
StyledCardNumberRelation
。
getElement
方法仅接受库提供的元素组件，或此处记录的字符串元素类型：


修复方法是将SplitForm组件中的
StyledCardNumberRelation
替换为
CardNumberRelation
，如下所示：

const payload = await stripe.handleCardSetup(
  "seti_xyz",
  elements.getElement(CardNumberElement)
);

通过上述更改，在提供真实的安装意图ID和可发布密钥后，我能够在示例应用程序中创建一个安装意图，而没有任何问题