ricky-element-react | Stripe Developers | Page 1

gloomy pewter Apr 8, 2022, 8:57 PM

#

@plain flume happy to help, what's blocking you?

plain flume Apr 8, 2022, 9:03 PM

#

const paymentElement = elements.getElement(PaymentElement);

if (paymentElement) {
  const { paymentMethod: payment, error } =
    await stripe.createPaymentMethod({
      type: 'card',
      card: PaymentElement,
    });

gloomy pewter Apr 8, 2022, 9:04 PM

#

you seem to be mixing up ~everything

#

Payment Element is a completely different product/UI

plain flume Apr 8, 2022, 9:04 PM

#

Thank you @gloomy pewter

From what I read I need to import this
PaymentElement
but its not working for me.

Am I going about this correctly or should I keep CardElement

gloomy pewter Apr 8, 2022, 9:04 PM

#

are you trying to use Elements? Do something else?

#

Step 1 is understand what the end goal is

plain flume Apr 8, 2022, 9:05 PM

#

The only goal is to separate the checkout into different fields

gloomy pewter Apr 8, 2022, 9:07 PM

#

why?

plain flume Apr 8, 2022, 9:08 PM

#

We are hitting auto complete issues having the one long input and would like to separate into different input fields

gloomy pewter Apr 8, 2022, 9:09 PM

#

I think that's a mistake honestly.

#

My advice is to purely use the PaymentElement, it does everything for you

plain flume Apr 8, 2022, 9:09 PM

#

Because the ZIP only appears once a card # is detected, auto complete won't fill in the ZIP

gloomy pewter Apr 8, 2022, 9:09 PM

#

it does split the fields already

#

So does the PaymentElement work for you?

#

this: https://stripe.com/docs/payments/payment-element

plain flume Apr 8, 2022, 9:10 PM

#

That is what I would like to use and move away from CardElement

#

Just having trouble swapping it out to start using PaymentElement

gloomy pewter Apr 8, 2022, 9:13 PM

#

I understand but you're really trying to go too fast, change one line of code, that won't work really

#

so I'm trying to understand your end goal, because if you are re-designing this, maybe you'd be better off moving to PaymentElement entirely

plain flume Apr 8, 2022, 9:15 PM

#

I'll take it slower, good note - Yes we want to ditch CardElement and go to PE

gloomy pewter Apr 8, 2022, 9:17 PM

#

okay

#

so replacing with PE will require changes to your integration since you don't "Create a PaymentMethod" anymore, you confirm a PaymentIntent or SetupIntent

#

so it won't be a one line change

#

Separately, with that out of the way: we do support "split fields" on the card element

#

you basically have to create a card number, expiry and cvc element separately

#

trying to find docs

plain flume Apr 8, 2022, 9:19 PM

#

Thank you, I can give that a go - I didn't know the CardElement supported that

gloomy pewter Apr 8, 2022, 9:22 PM

#

yes we don't document this in details but https://stripe.com/docs/stripe-js/react#available-element-components covers all the "UI elements" we support

#

still trying to find a concrete example

#

https://github.com/stripe-samples/tinydemos/blob/1dbf490d776c5064eaf70e9390dd7e09c73cadaa/separate-card-fields/src/index.hbs

#

it's not react but it should help

plain flume Apr 8, 2022, 9:24 PM

#

The github is a 404 but looking at the docs link

gloomy pewter Apr 8, 2022, 9:25 PM

#

huh soory I thought that was public 😕

#

wow we don't make it easy to find lol

#

Maybe https://github.com/stripe/react-stripe-js/blob/c2d0f2a1d6a3807d81caf66411a475e6f19670fb/examples/class-components/2-Split-Card.js is better?

plain flume Apr 8, 2022, 9:30 PM

#

thank you I'll check this out!

#ricky-element-react