estani.p - Element Destroyed | Stripe Developers | Page 1

scarlet nova Jan 10, 2022, 7:59 PM

#

Are those both from the same error?

#

Can you tell me a bit more about where you are seeing each of those errors?

lilac willow Jan 10, 2022, 8:09 PM

#

The Payment Element is not rendering and in console I get this errors

#

The code back and front it's same as you explain in Custom payment floe

#

I'm receiving from back the client secret OK

scarlet nova Jan 10, 2022, 8:13 PM

#

Interesting, my example that uses that code is currently working. Can you send me the .js file that you have for this at the moment?

lilac willow Jan 10, 2022, 8:46 PM

#

I send screenshots with the code

scarlet nova Jan 10, 2022, 9:06 PM

#

Just getting to look at this. What line of code is that error coming from?

lilac willow Jan 10, 2022, 9:21 PM

#

I dont i cant see it, this is the error in console

scarlet nova Jan 10, 2022, 9:41 PM

#

Can I see what the options object looks like when you pass it in?

#

Actually never mind. Looking to see if I can find the GET call that you originally posted

lilac willow Jan 10, 2022, 9:46 PM

#

const appearance = {
theme: 'flat'
}
const options = {
appearance,
clientSecret
}

trail sapphire Jan 10, 2022, 9:59 PM

#

Hi 👋 I'm taking over for @scarlet nova.

lilac willow Jan 10, 2022, 10:01 PM

#

HI!

trail sapphire Jan 10, 2022, 10:03 PM

#

This might be a bit of a long shot but I'm curious if the <Collapse> element you have are wrapping the <StripeCheckoutForm> in may be causing an issue. Could you try removing it and seeing if the error persists?

lilac willow Jan 10, 2022, 10:05 PM

#

Ok, i tried it

#

ok I'll try

lilac willow Jan 10, 2022, 10:21 PM

#

is not working, i just get only the button of the form, not the PaymentElement

#

trail sapphire Jan 10, 2022, 10:24 PM

#

Okay so the next thing I would focus on is this failing request you're pointing out.

#

The problem is that the publishable key doesn't match the payment intent data.

#

Are you making sure that the publishable_key on your front_end corresponds to the same account as the secret key in you server code?

lilac willow Jan 10, 2022, 10:37 PM

#

I'm going to check it out

#

FRONT
const stripePromise = loadStripe(STRIPE_SECRET_KEY)

BACK
const stripe = require('stripe')(STRIPE_SECRET_KEY)

#

i check it and it the same KEY

trail sapphire Jan 10, 2022, 10:51 PM

#

You should never expose your secret key to the front end.

#

We separate secret and publishable keys explicitly for that reason

#

However The request you shared with @scarlet nova earlier had a Publishable Key in it.

#

If that is the key you are using on the back-end, that won't work either.

#

You shared this publishable key: pk_test_vbBRAl4tFiADk0owxxpgH3xA00HbnS0luE

#

This is what is being used in your front-end that is not being matched with a corresponding SECRET KEY on your back-end

lilac willow Jan 10, 2022, 10:54 PM

#

OK, now i have the same key in back and front

trail sapphire Jan 10, 2022, 10:54 PM

#

The SECRET KEY for this account would start sk_test_XXXXX

#

Dont ever share your secret key. here

#

This is a public forum

lilac willow Jan 10, 2022, 10:56 PM

#

Ok

trail sapphire Jan 10, 2022, 10:56 PM

#

Even a test key can be used to cause havoc by malicious actors.

lilac willow Jan 10, 2022, 10:57 PM

#

trail sapphire The SECRET KEY for this account would start `sk_test_XXXXX`

Ok I understand

trail sapphire Jan 10, 2022, 10:58 PM

#

Okay so my first step, if I were you, would be to verify both Publishable and Secret keys in your dashboard. Then make sure the right one is loaded into each environment:
PUBLISHABLE_KEY (pk_test_xxxx) => Front End
SECRET_KEY(sk_test_xxxx) => Back End

lilac willow Jan 10, 2022, 10:59 PM

#

The key is the same but back start with sk, and front with pk?

#

ok

trail sapphire Jan 10, 2022, 11:00 PM

#

The entire text strings are completely different

#estani.p - Element Destroyed