CODEWITHSUNDEEP
reactjsstripe-paymentsstyled-components
Michał Lach
Michał Lach

Reputation: 1278

Using react-stripe-js with styled-components

I have an issue trying to use Stripe CardNumberElement and trying to style it using using styled-components

When I am trying to submit form that uses custom restyled CardNumberElement component I get this error:

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.

I have created an example of what I am trying to achive here: https://codesandbox.io/s/react-stripe-js-forked-6b7lq

To reproduce enter card number: 4242 4242 4242 4242 Expiration date: 12/33 CVC: 233, press pay and open developer tools in Chrome.

I am aware that I can achieve the same effect by passing options prop, but I am using some old legacy components written with styled-components and I want to keep it consistent.

Upvotes: 1

Views: 1227

Answers (1)

ttmarek
ttmarek

Reputation: 3250

The main issue with your code is that you're supplying the wrapped/styled StyledCardNumberElement to Stripe's getElement method. The getElement method only accepts the element components provided by the library, or a string element-type as documented here:

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

The fix would be to replace StyledCardNumberElement with CardNumberElement in your SplitForm component as shown below:

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

With the above change, and after supplying a real setup intent ID and publishable key I was able to create a setup intent in your example app without any issues.

Upvotes: 1

Related Questions