ryan-react-element | Stripe Developers | Page 1

south elmBOT Jun 28, 2023, 8:37 PM

#

sullen stone Jun 28, 2023, 8:38 PM

#

Hey there

#

The style object is indeed the way to go. But yeah I'm not positive about borders

#

Give me a min to check

south elmBOT Jun 28, 2023, 8:44 PM

#

analog wave Jun 28, 2023, 8:49 PM

#

Ok, thanks.

sullen stone Jun 28, 2023, 8:50 PM

#

Yeah I don't believe you can set a border inside of Card Element itself. If you want this you would want to use the split Elements and then you can style each separate div itself.

analog wave Jun 28, 2023, 8:52 PM

#

Oh, I'm using the CardElement React component and didn't know that there were more granular ones. Great. I'll check those out. Thanks!

sullen stone Jun 28, 2023, 8:53 PM

#

Yep! Take a peek at https://stripe.com/docs/stripe-js/react#available-element-components which has the ones you want to split this up

analog wave Jun 28, 2023, 8:57 PM

#

That's great. But I suspect that this part will no longer work?

 // https://stripe.com/docs/payments/save-card-without-authentication?platform=web#add-elements-to-your-page
    const { paymentMethod, error } = await stripe.createPaymentMethod({
      type: "card",
      card: elements.getElement(
        CardNumberElement
      ) as stripeJs.StripeCardNumberElement,
      // billing_details: {
      //   name: cardholderName.value,
      // },
    });

#

I used to have it as

card: elements.getElement(
        CardElement
      ) as stripeJs.StripeCardElement

sullen stone Jun 28, 2023, 8:59 PM

#

Still works just fine

#

You just pass one of the split up Elements into createPaymentMethod

#

And it will grab all the data

analog wave Jun 28, 2023, 9:00 PM

#

Nice. And it looks like there is no PostalCode element? So I need to make one?

sullen stone Jun 28, 2023, 9:05 PM

#

That's correct

#

You would collect that in your own form

glacial crescent Jun 28, 2023, 9:06 PM

#

correct

#

ryan-react-element

#

analog wave Jun 28, 2023, 9:09 PM

#

ok, thanks for your help!

#ryan-react-element