jonathanhayuniverse_react-json-error | Stripe Developers | Page 1

gentle voidBOT May 10, 2024, 3:02 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/1238506462423023716

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

fresh cape May 10, 2024, 3:07 PM

#

This is a React application, these are the stripe libraries being used:

import { Elements } from '@stripe/react-stripe-js'; import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js';

#

loadStripe is used to instantiate the two promises in the above code, simply being passed a publishable key in each instance.

earnest fable May 10, 2024, 3:10 PM

#

Hi 👋 hm, I'm not sure offhand. Is there a specific line associated with that error?

#

oh, maybe it's a variable naming concern

#

(sorry, I'm not the most familiar with React, so I may be offbase here)

fresh cape May 10, 2024, 3:17 PM

#

Not in my app code, but in stripe-js it's v3:1:108684. I doubt that's super helpful though. I think tracing up it has to do with the call to loadStripe when creating stripe promises. There is a condition where the pk being used could be equivalent. Could that cause this to occur? I had also received a warning that loadStripe should not be called with the same key multiple times, but thought it was unrelated.

earnest fable May 10, 2024, 3:17 PM

#

If you adjust this:
<Elements stripe={stripePromiseA} options={options}>
to
<Elements stripe={stripePromise:stripePromiseA} options={options}>
along with the other line, does that resolve it?

fresh cape May 10, 2024, 3:19 PM

#

Something also to note is that this does not actually affect functionality. The stripe elements component performs as expected and there are no issues with the page render. This unfortunately does not resolve the issue. I'm going to try to only load one stripe promise, and see if multiple could be causing the issue.

#

I also receive this warning, Unsupported prop change on Elements: You cannot change the stripe prop after setting it.

earnest fable May 10, 2024, 3:24 PM

#

That is an expected restriction.
https://docs.stripe.com/stripe-js/react#elements-provider:~:text=After this prop has been set%2C it can not be changed

gentle voidBOT May 10, 2024, 3:46 PM

#

fresh cape May 10, 2024, 3:50 PM

#

It's being reassigned because the component is rerendering for other reasons, I'm just trying to sort that out and I'll let you know if the error persists once I deal with that warning, thanks for all of your help so far

fresh cape May 10, 2024, 4:16 PM

#

I sorted this out by memoizing the stripe promises, I could not load it outside of the component render per the example in your docs because it is dependent on asynchronous data to select the pks which is loaded after page load but before the component mounts. This resolved the related warning, however the original error I raised persists. The two don't seem to be related.

magic spade May 10, 2024, 4:17 PM

#

👋 Hello! Just hopping in here since toby had to head out - you're saying you still see the original Uncaught SyntaxError: "[object Object]" is not valid JSON error?

fresh cape May 10, 2024, 4:20 PM

#

Yeah

magic spade May 10, 2024, 4:21 PM

#

What do you get when you log options ?

fresh cape May 10, 2024, 4:24 PM

#

This is the logged json at runtime:
{ "mode": "payment", "amount": 500, "currency": "usd", "appearance": { "theme": "stripe", "variables": { "colorPrimary": "#3a66e5", "colorDanger": "#b2443e" }, "rules": { ".Error": { "fontSize": "0.75rem" } } }, "paymentMethodCreation": "manual", "payment_method_types": [ "card" ] }

magic spade May 10, 2024, 4:35 PM

#

Hmmm... that seems correct to me - but just to be sure can you temporarily simplify what you're passing in for options and just pass through mode, amount, currency, and paymentMethodCreation (just want to be sure the appearance stuff isn't casuing issues)

fresh cape May 10, 2024, 4:42 PM

#

That didn't seem to do it

{
"mode": "payment",
"amount": 500,
"currency": "usd",
"paymentMethodCreation": "manual"
}
Still getting the error. Although I'm not being warned about it, is it problematic if the options prop changes?

#

It is being computed on component render

magic spade May 10, 2024, 5:01 PM

#

As far as I know it shouldn't be problematic if the options prop changes - but maybe try temporarily hard coding that value so that it's ready earlier to see what happens

fresh cape May 10, 2024, 5:02 PM

#

I tried memozing it as well and it didn't make a difference

#

same deal if I hard code the pk and loadStripe and set options outside of the component's render

magic spade May 10, 2024, 5:08 PM

#

Can I see a bit more of your code to see what's going on?

fresh cape May 10, 2024, 5:23 PM

#

In relation to stripe I've provided all of the related code really. The rest is just to determine the amount, currency, and the condition to show one checkout form or the other. It's just a react component wrapped with a mobx observer in a nextjs project being rendered client side.

#

const stripePromise = useMemo(() => { return loadStripe(stripePublishableKey); }, []);

This would be the only other relevant piece where I load the promise

magic spade May 10, 2024, 5:29 PM

#

Have you also checked that the publishable key is right? That's the only other thing I can think

fresh cape May 10, 2024, 5:29 PM

#

Taking out the fluff and obfuscating with some literals/naming changes the component is

`const PaymentComponent = observer(() => {
const stripePromise = useMemo(() => {
return loadStripe(stripePublishableKey);
}, []);

const stripePromise2 = useMemo(() => {
return loadStripe(stripePublishableKey2);
}, []);

const options: StripeElementsOptions = useMemo(() => {
const opts = {
mode: 'payment' as const,
amount: 1000,
currency: 'USD',
appearance: {
theme: 'stripe' as const,
variables: {
colorPrimary: '#3a66e5',
colorDanger: '#b2443e',
},
rules: {
'.Error': {
fontSize: '0.75rem',
},
},
},
paymentMethodCreation: 'manual' as const,
payment_method_types: ['card'],
};
console.log(opts);
return opts;
}, []);

return
condition ?
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
:
<Elements stripe={stripePromise2} options={options}>
<CheckoutForm />
</Elements>
});`

magic spade May 10, 2024, 5:29 PM

#

Tagging in @ornate flax to also start taking a look to see if I've missed anything

ornate flax May 10, 2024, 5:30 PM

#

👋

I'm starting at the top so give me a minute

fresh cape May 10, 2024, 5:30 PM

#

The pk is correct and it also works. I'm able to create payment methods with it. It just spams the error in console regardless. It doesn't seem to have a real effect.

#

Taking mobx out of the picture also makes no difference

ornate flax May 10, 2024, 5:33 PM

#

Yeah, I'm also having a tough time seeing what specifically would be throwing this error

#

QQ: What happens if you take out the condition ? and just return a single Checkout Form? Does this occur regardless of which <Elements> you render?

fresh cape May 10, 2024, 5:34 PM

#

Yeah, a single checkout form still ends up doing the same thing

#

Even if I replace the checkoutforms with empty divs it still occurs, so it's not related to the sub-component

ornate flax May 10, 2024, 5:44 PM

#

Okay so this seams to be specific to the {options} parameter. Would you agree?

fresh cape May 10, 2024, 5:49 PM

#

It could be, however we've already tried simplifying it to the bare minimum and achieved the same result. Do you have any suggestions? The example uses a client secret, however I'm not starting with an existing payment intent, I'm just looking to create payment methods.

#

I realize this is extremely obscure and difficult to debug. If there are no obvious suggestions, I can attempt to replicate a more simplified and isolated version of this in a new project with the same stripe versions and see if this still happens. I don't want to waste too much of your time if I don't have a clear driver of the issue.

ornate flax May 10, 2024, 5:57 PM

#

I appreciate the concern. As a simplified approach, you could go through our integration guide for deferred intents: https://docs.stripe.com/payments/accept-a-payment-deferred

#

But I think that is what you are using

fresh cape May 10, 2024, 5:59 PM

#

Yeah this is virtually the exact integration we're using

ornate flax May 10, 2024, 6:02 PM

#

Unfortunately my approach would be similar to yours. I would strip my app down to basically what we have in our quickstart: https://docs.stripe.com/payments/quickstart and then slowly add in components to see where it breaks

fresh cape May 10, 2024, 6:04 PM

#

Sounds good, thanks for all of your help today, I really appreciate it!

ornate flax May 10, 2024, 6:04 PM

#

It's why we're here 🙂

gentle voidBOT May 10, 2024, 6:46 PM

#

#jonathanhayuniverse_react-json-error