#smc

1 messages · Page 1 of 1 (latest)

worn ermine
#

Hello! Just starting a thread for you -- I'll review and respond as soon as I can 🙂

#

smc

#

You can't force that, it is responsive based on the width to make it render nicely.

Instead, if you prefer, you can split up the individual elements and do a custom layout that suits your needs. Similar to the 2nd and 3rd examples here:
https://stripe.dev/elements-examples/

#

(the examples have links to source to see how they are done)

valid prism
#

ohh I see

#

so this will have to be done without the CardElement react component altogether?

worn ermine
#

You'd use three elements in concert, if going that route

valid prism
#

ah right - but those aren't react components, correct?

#

OH

#

ha! they are react components! didn't realize CardCvcElement was exported from react-stripe-js

#

only thought it was CardElement. nice! thank you for your help!

worn ermine
#

They are indeed

valid prism
#

so- just one more question: how does one use elements.getElement with these three in concert?

worn ermine
#

See the SplitForm example

#

good question 🙂

#

You just use cardNumberElement and provide that where you currently provide cardElement eg during confirmation, Stripe.js knows how to get the expiry and cvc elements automatically based on that

valid prism
#

lovely!

#

okay, then I think I'm all set. thank you so much for your help!!

worn ermine
# 
const payload = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(CardNumberElement)
    });
#

line 53 in that same example i linked

#

You're welcome!