#JTrain
echo pagoda
wheat drift
Hi there 👋 happy to help. Can you elaborate a bit? Where are you getting the 401 error? Do you have a screenshot?
coarse lava
Hi thanks for your help!! Screenshots coming soon.
woops sorry forgot to blur out my keys!!
wheat drift
Please don't post API keys in this channel, even if they're just test-keys
coarse lava
one sec!
wheat drift
Sorry, just noticed you called that out
coarse lava
wheat drift
Okay, awesome! And where is the error coming through?
coarse lava
Here is my payload and the preview.
Is that sufficient or would you like to see something else?
wheat drift
Do we know which line is surfacing the error? Is it handler or getStripe or const stripe = new Stripe('$(process.env...?
coarse lava
I am not sure, any idea how I can find that for you?
I think it might be getStripe. If I remove template strings from API calls, I get this error.
examples of removed template strings
wheat drift
Weird recommendation: if you put the whole loadStripe method parameter for stripePromise on 1 line (instead of 2) does anything change?
coarse lava
It actually is on one line, my window was smaller so text was wrapping - just double checked though and no change.
wheat drift
Ahhh, okay. Hmmm
Why are you calling getStripe when you are already instantiating the stripe object?
coarse lava
I am following this tutorial - 2nd project(https://www.youtube.com/watch?v=XxXyfkrP298&t=17211s) and that is how the instructor did it. Worked perfectly fine for him so I am confused. I'm a new developer, any suggestions?
Here is a link to the instructor's github repo(https://github.com/adrianhajdin/ecommerce_sanity_stripe) not sure if that helps.
wheat drift
Unfortunately I don't have the bandwidth to watch the tutorial. Do you have a link to your own Github repo?
wheat drift
I'm still not sure what the purpose of getStripe is if you already instantiate the stripe object
Can you do a console.log(); in all the places that need access to the API key from the environment variable and see what each variable is composed of? I'm also curious to see what stripePromise is getting in getStripe
coarse lava
Do you mean like this?
The instructor claims "It is the same as the prebuilt checkout code given to us but that there wasn't enough explanation given" so he wanted to create a separate function.
rain glen
Hi, taking a look here - stepping in for two-shoes
coarse lava
Hello! Thanks for the help!
Here are consoles two-shoes requested. All I'm seeing in console is undefined or not defined.
Typo in getStripe console.log - string should read "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY"
sullen sapphire
Hello! I'm taking over but that's a lot of text and many pictures of many code which is a pain to help with
First off, can you give me some background on why you are integrating Stripe? You mention an "instructor". Is this a coding class or similar?
Then, can you avoid environment variables to start and just hardcode your API keys? This is not viable long term but it helps narrow down the exact problem upfront: is this the code, or is it the env variables
Let me know what you find and I'll do my best to guide you through this
I'm reading the whole backlog in the meantime to see if there's anything obvious
coarse lava
Hi, sure no problem. I am attempting a test implementation of Stripe on nextJS. I am using Sanity IO for my backend. Yes, I'm following a youtube tutorial from a coding class as a reference but will be implementing a live Stripe checkout if I can figure this out. Please allow me a minute to clear this stuff up and hard code the keys - I do believe it has something to do with my environment variables. I have read the nextJS docs related to env variables as well as the stripe docs and it seems I'm doing everything correctly. Will get right back to you.
sullen sapphire
All good. If it works fine with hardcoded keys, it's a lot simpler. They we can check which one fails. My assumption is that it's the publishable key which his normal as client-side code in the browser never have access to environment variables
coarse lava
Ok, I think have good news because it works if I hardcode the keys.
sullen sapphire
okay phew
so next: which environment variable is "empty". Was it both, the secret key or the publishable key?
coarse lava
Lol phew is right - been working on this for days. Right now, both keys are hardcoded. Which should I remove?
sullen sapphire
both, just go back to what you have but tell me which ones are not set. Like when you log the value, which one is correct if any?
coarse lava
Ok, so if I use my STRIPE_SECRET_KEY env variable, I get stuck in a "redirecting" loop - will not redirect. Will try the opposite next.
sullen sapphire
I mean the first step here is to clearly add a log before that logs the value
that's what is most important here
coarse lava
Ok, so I am newer to this and not fully following - am I logging both env's in one file?
I can't get a log on my secret key but my publishable key log returns "not defined"
For example, like this for publishable key correct? This logs not defined. What about secret key - it's in a different file.
sullen sapphire
yeahhhhh okay
that picture/code makes no sense
you are logging a Constant that does not exist in that file at all
like where is that constant/key supposed to come from?
coarse lava
So, where should I console log my env variable for publishable key? What line in that file? When I hard code my publishable key on line 8 - it works.
sullen sapphire
I mean that's the point I'm trying to make
you're the developer here, you should know waht you want with your code
this code runs in your browser and will never get access to server-side JS code or your environment variables
usually you either hardcode the key right there, or you have an endpoint on your server-side code that you can hit to get the key
coarse lava
Yeah, like I said, I'm new to this. Sorry for asking - didn't know this channel was for experienced developers only. I'll try and figure it out.
Thanks for the help though.
sullen sapphire
@coarse lava you can totally ask, we're happy to help
I'm trying to nudge you to figure it out/think about this but I also gave you the answer above
client-side code can't read your constants server-side, those are completely different environments. If you want to dynamically access the Publishable key, you have to build a route/endpoint on your server that will return that value
If you're not familiar with this, it's totally fine, you have to learn/start somewhere. But this isn't Stripe specific. You could start by writing basic code client-side that try to show on your page a variable from your server, not even environment variable related, and then work on making this work