#furkanayilmaz-checkout

1 messages · Page 1 of 1 (latest)

mortal oxide
#

hello @fervent bloom! can you share your account id?

fervent bloom
#

Sure! Where do I find that

mortal oxide
#

if you login, it should be on the upper right hand side

fervent bloom
#

Just found it

#

acct_1Iye0pK00zIsEYti

#

Would you like me to send you the whole code

mortal oxide
#

do you see the response log?

fervent bloom
#

Nope, I do not see anything.

#

It doesn't print out anything

mortal oxide
#

i think sharing your full code would be helpful, remember to remove any sensitive info such as your API keys

fervent bloom
#

Here you go

#

I have been trying to solve this the past hours.

mortal oxide
#

you should create the Checkout Session in your server-side code, not in the React code

#

creating the Checkout Session requires a secret key, and you want to keep your secret key private and secure. You would usually make a call to your own server, where you store the secret key and your server would make the subsequent call to Stripe to create the Checkout Session

fervent bloom
mortal oxide
#

can you elaborate a bit more on what issues you were having when you did it server-side?

fervent bloom
#

Did that make sense

#

The only problem is the right time to fetch the payment url

#

End of the const session i put a .then() and inside of the promise I create a new point called axios.post('/payment') and I just send the request.

#

But in react I do not know the right time to catch it

#

Because if I use useEffect it gives me a 404 error because useEffect runs when the component or the page loads and in that case since I haven't choose an option which makes the '/payment' point invalid because in the server it didn't make it to the .then()

#

Sorry if it was too long

mortal oxide
#

lets take this one step at a time

#

in your server-side code, did you return the session url?

fervent bloom
#

This is what I did in the .then() block app.post("/pay", (req, res) => {
res.send("HELLO WORLD")
console.log(response.url);
})

#

So res.send("HELLO WORLD") it is just an example

#

I put it that for testing purposes

mortal oxide
#

and were you able to receive that in your react app?

fervent bloom
#

No, because I am not sure when to get that /payment. Because this code runs inside of the .then() in the server in the frontend I do not know when to get this data.

#

So in the frontend if I put just /payment then it will give me an error with 404 that is because the code didn't made it to .then() block and therefore /payment point doesn't exist. So I do not know when I receive the url back from the server. Did that make sense

mortal oxide
#

i'll use fetch to explain, cause i don't usually use axios

fervent bloom
mortal oxide
#

what you would do in your React code is to make a request to your server :
e.g. fetch('..../create-checkout-session',{method:'POST'}).then(....)

#

your server would then make the request to create the Checkout Session and return the session.url

#

any trouble with these two steps so far?

fervent bloom
#

okay but when would that fetch run. It should run when the backend returns the session.url

mortal oxide
#

no, the fetch runs to tell your server that it wants a checkout session

#

it's kinda like you making a call to order pizza

#

then the pizza place will prep the pizza

#

and when the pizza is done, the pizza place will call you back and say, hey the pizza is done

fervent bloom
#

so you won't do method: 'GET'

mortal oxide
#

yep, it's a POST

fervent bloom
#

and in the server it would be a post or a get

#

so in react side it is a POST and what about in the server. I think it is a POST right

mortal oxide
#

it must both match

#

so if your server side define it as a POST, your react side must make the request as a POST too

fervent bloom
#

I see! Thank you. I'll get back to work. hoping it works

#

oh and 1 last question.

#

Where would I put that fetch

mortal oxide
#

probably on button click

#

our examples actually do have react samples - it's just that we use a form action, not a fetch

fervent bloom
fervent bloom
#

@mortal oxide Hey alex,
Thank you so much. You saved my life. I am able to get the response back.

#

I can't thank you enough

mortal oxide
#

yay! glad to know that you were able to get it to work!

fervent bloom
#

Hey @mortal oxide ,
quick question, it is not about the checkout. Do you know a way to re-execute a line of code in react when something chances. So if I had a useState and that had the value of "10" and it chanced to "11" I want to re-execute a specific line of code.

#

How can I do that

mortal oxide
#

example from React docs :

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes
fervent bloom
#

👍