prattprattpratt_error | Stripe Developers | Page 1

tacit mapleBOT Mar 25, 2024, 9:27 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1221933601474740315

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

near tendonBOT Mar 25, 2024, 9:31 PM

#

umbral haven Mar 25, 2024, 9:36 PM

#

Maybe I should say "I assume submitting a payment via the card/address elements throws this error because express checkout is in the elements instance."

#

Although the error only occurs if I'm in a browser that doesn't have any available payment methods (e.g., Google Pay, Apple Pay), so maybe not 🤔 the express checkout element is in there either way

lime hinge Mar 25, 2024, 9:41 PM

#

Hi there, sorry for the delay!

umbral haven Mar 25, 2024, 9:41 PM

#

No stress!

lime hinge Mar 25, 2024, 9:43 PM

#

I'm pretty sure you'll need to unmount the element that's not being used in your confirm call

umbral haven Mar 25, 2024, 9:50 PM

#

How do I unmount an element that I am rendering with React Stripe.js? i.e., I don't have an instance of the element floating around that I can .unmount like I'm assuming I would have if I was just using stripe JS. I'm just rendering <ExpressCheckout />

#

I couldn't find anything in the React Stripe.js docs, just the Unmount an Element section in the normal Stripe JS docs.

lime hinge Mar 25, 2024, 10:00 PM

#

Give me a few minutes, I'll need to loop in a teammate who's more experiened with React

umbral haven Mar 25, 2024, 10:01 PM

#

Sounds good, thanks

hollow jungle Mar 25, 2024, 10:04 PM

#

Hello! Can you share the code that's throwing this error?

#

Also, can you confirm you're using the Card Element and not the Payment Element?

#

I think you mean the Payment Element, as the Card Element is legacy and won't work with stripe.confirmSetup, but want to be sure.

umbral haven Mar 25, 2024, 10:08 PM

#

I do mean the Card Element

#

It seems to be going through as long as I'm in a browser that has an available payment method in the express checkout element 🤔

hollow jungle Mar 25, 2024, 10:09 PM

#

That's very unusual. Why are you using the Card Element instead of the Payment Element?

umbral haven Mar 25, 2024, 10:11 PM

#

The Payment Element is too opinionated from a design perspective. I needed something more bare bones to match the designs I was given.

#

Is there a different element to collect card info that has less Stripe UI?

hollow jungle Mar 25, 2024, 10:12 PM

#

Using the Card Element + the Address Element isn't a supported configuration and likely won't work as expected. I stronly recommend you switch to the Payment Element if possible.

#

No.

#

The Appearance API lets you radically alter the visual appearance of the Payment Element though: https://docs.stripe.com/elements/appearance-api

umbral haven Mar 25, 2024, 10:15 PM

#

Thanks for the info!

hollow jungle Mar 25, 2024, 10:16 PM

#

It wouldn't surprise me if the unexpected behavior you're seeing is due to some unusual interaction with the Card Element. I recommend you replace it with the Payment Element and try again. Make sure you use this approach, which is the one that's compatible with the Express Checkout Element: https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=setup&client=react

tacit mapleBOT Mar 25, 2024, 10:18 PM

#

umbral haven Mar 25, 2024, 10:22 PM

#

Can I just use the Card element and not the Address element? Or is the Card element obsolete?

hollow jungle Mar 25, 2024, 10:23 PM

#

The Card Element is legacy and is not recommended. It still works standalone, but you should use the Payment Element when building a new integration.

#

If you do use the Card Element you can add your own fields for address info and pass that info in when you call the various Stripe.js APIs to confirm an Intent.

umbral haven Mar 25, 2024, 10:24 PM

#

Ok. Any thoughts on the initial question of the possibility of unmounting specific elements that aren't being used?

hollow jungle Mar 25, 2024, 10:25 PM

#

You shouldn't have to unmount them, it should just work, but I've never tried it with the Card Element in the mix like that.

#

What options are you passing to the Elements instance?

#

To answer your question directly, you should be able to call .unmount() on the Element you want to unmount: https://docs.stripe.com/js/element/other_methods/unmount

umbral haven Mar 25, 2024, 10:28 PM

#

hollow jungle To answer your question directly, you should be able to call `.unmount()` on the...

How do I access the element in React to .unmount it? I understand that it shouldn't be necessary so it doesn't sound like something I will pursue.

#

{
      mode: 'setup',
      currency: 'usd',
      paymentMethodTypes: ['card'],
      appearance: {
        theme: 'stripe',
        variables: {
          borderRadius: '8px',
          colorDanger: colors.red[70],
          colorIconCardError: colors.red[70],
          colorIconCardCvcError: colors.red[70],
          colorText: colors.gray[90],
          colorTextPlaceholder: colors.gray[60],
          fontLineHeight: '24px',
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmooth: 'always',
          fontSizeBase: isMobile ? '16px' : '18px',
        },
        rules: {
          '.Input': {
            boxShadow: 'none',
          },
        },
      },
    }
  }

hollow jungle Mar 25, 2024, 10:29 PM

#

And the error happens if you never interact with the Express Checkout Element?

#

Oh, wait.

#

I know what's happening.

umbral haven Mar 25, 2024, 10:31 PM

#

hollow jungle And the error happens if you never interact with the Express Checkout Element?

The error happens if I submit a payment using my Card + Address element setup only if I am in a browser that doesn't return any available payment methods in the express checkout onReady

hollow jungle Mar 25, 2024, 10:31 PM

#

stripe.confirmSetup() is only designed to work with newer Elements, like the Express Checkout Element and Payment Element. Normally when you have both a Payment Element and Express Checkout Element stripe.confirmSetup() will use whichever of those has payment info it in, basically. However, you're using the Card Element, which stripe.confirmSetup() is not compatible with, so it can't "see" the Card Element at all. It only sees the Express Checkout Element, thinks it's the only way to possibly pay, and thus throws an error because you're not using it correctly for Express Checkout Element.

#

You would need to use stripe.confirmCardPayment() with the Card Element, which is the legacy method that works with that legacy Element: https://docs.stripe.com/js/payment_intents/confirm_card_payment

#

You can specify the specific Card Element instance when you call that: https://docs.stripe.com/js/payment_intents/confirm_card_payment#stripe_confirm_card_payment-with_element-payment_method-card

#

If you stick with the Card Element (which, again, I do not recommend) you should still use stripe.confirmSetup for the Express Checkout Element.

umbral haven Mar 25, 2024, 10:37 PM

#

Makes sense. I just confirmed that I don't get the error when I'm in a browser with ExpressCheckout available payment methods because it's just always using ExpressCheckout 🤦‍♂️ looks like I have my smoking gun (the Card element)

hollow jungle Mar 25, 2024, 10:38 PM

#

Yep. You can make it work with the Card Element, I think, but the code will be more complex, it will be prone to unusual gotchas because it's not a recommended configuration, and will be more likely to break because you're mixing legacy and modern approaches in a single implementation.

umbral haven Mar 25, 2024, 10:40 PM

#

Last question, if I do a dual setup with Payment+Address (or just Payment) and ExpressCheckout, how do I specify which element is being used in confirmSetup? Or should it know not to use ExpressCheckout if the other has user input?

hollow jungle Mar 25, 2024, 10:43 PM

#

It should just know and work without you doing anything special.

umbral haven Mar 25, 2024, 10:44 PM

#

Great, thanks. Appreciate all the help!

#prattprattpratt_error