使用带有样式组件的 react-stripe-js答案

【问题标题】：Using react-stripe-js with styled-components使用带有样式组件的 react-stripe-js
【发布时间】：2021-03-21 05:47:15
【问题描述】：

我在尝试使用 Stripe CardNumberElement 并尝试使用 styled-components 设置样式时遇到问题

当我尝试提交使用自定义重新设置样式的 CardNumberElement 组件的表单时，我收到此错误：

IntegrationError: A valid Element name must be provided. Valid Elements are: card, cardNumber, cardExpiry, cardCvc, postalCode, paymentRequestButton, iban, idealBank, p24Bank, auBankAccount, fpxBank; you passed: object.

我在这里创建了一个我想要实现的示例：https://codesandbox.io/s/react-stripe-js-forked-6b7lq

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

我知道我可以通过传递 options 属性来达到相同的效果，但我正在使用一些用 styled-components 编写的旧组件，我希望保持一致。

【问题讨论】：

标签： reactjs stripe-payments styled-components

【解决方案1】：

您的代码的主要问题是您将包装/样式化的 StyledCardNumberElement 提供给 Stripe 的 getElement 方法。 getElement 方法仅接受库提供的元素组件，或此处记录的字符串元素类型：

https://stripe.com/docs/js/elements_object/get_element

解决方法是在您的 SplitForm 组件中将 StyledCardNumberElement 替换为 CardNumberElement，如下所示：

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

通过上述更改，并在提供真实的设置意图 ID 和可发布密钥后，我能够在您的示例应用中创建设置意图而没有任何问题。

【讨论】：