Использование react-stripe-js со стилизованными компонентами
У меня возникла проблема при попытке использовать 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 Срок действия: 33.12 CVC: 233, нажмите оплатить и откройте инструменты разработчика в Chrome.
Я знаю, что могу добиться того же эффекта, передав options prop, но я использую некоторые старые устаревшие компоненты, написанные с помощью styled-components, и я хочу сохранить их согласованность.
Ответы 1
Основная проблема с вашим кодом заключается в том, что вы предоставляете обернутый/стилизованный StyledCardNumberElement методу getElement Stripe. Метод getElement принимает только компоненты элементов, предоставленные библиотекой, или строковый тип элемента, как описано здесь:
https://stripe.com/docs/js/elements_object/get_element
Исправление будет состоять в том, чтобы заменить StyledCardNumberElement на CardNumberElement в вашем компоненте SplitForm, как показано ниже:
const payload = await stripe.handleCardSetup(
"seti_xyz",
elements.getElement(CardNumberElement)
);
С указанным выше изменением и после предоставления реального идентификатора намерения установки и публикуемого ключа я смог создать намерение установки в вашем примере приложения без каких-либо проблем.