#T.C.-Checkout-React
strange slate
Hello!
scarlet bolt
Wow that's a weird error
strange slate
OK, was hoping it wasn't just me haha. I've cleared all my browsing data and such, just seems like maybe there's a small piece of info I'm glossing over (also still in the learning stages so there's that)
strange slate
node v16.16.0
scarlet bolt
Ah okay that looks fine
strange slate
package.json is same as in the example repo, i just changed proxy to localhost:3000 because I was getting a "could not proxy" error
https://github.com/stripe-samples/accept-a-payment/blob/b7b4f4f5a51f636ff8cae1cfbdfbe362582c5cf9/prebuilt-checkout-page/client/react-cra/package.json
And all I've changed in index.js is the render syntax at the bottom because Chrome said it was outdated
https://github.com/stripe-samples/accept-a-payment/blob/b7b4f4f5a51f636ff8cae1cfbdfbe362582c5cf9/prebuilt-checkout-page/client/react-cra/src/index.js
Checkout.js has
<form action="/create-checkout-session" method="POST"> <button id="submit" role="link">Buy</button>
scarlet bolt
Yeah try removing that
scarlet bolt
Yeah okay that checks out
Surprised we don't include mention of the proxy in the repo
Can you try putting the full backend URL in your fetch?
strange slate
It may be in there somewhere but I didn't find it
scarlet bolt
Doh you aren't fetching
You are form submitting
Hmm okay in index.js try setting the path though to http://localhost:4242
strange slate
Could I make the form action="http://localhost:4242/create-checkout-session"?
in index.js set 4242 to the Checkout element?
strange slate
haha, all good
scarlet bolt
Yeah set the form action as you stated.
strange slate
hm, I restarted all servers after changing that and still got
Cannot POST /create-checkout-session
scarlet bolt
That's strange
strange slate
I'll create a repo as-is and send it to you, maybe that would help
scarlet bolt
When I get a second here I'll pull the sample myself as well
strange slate
Thanks so much
scarlet bolt
Did you install manually or using the CLI?
strange slate
CLI I believe
Yeah, the prebuilt page README has:
stripe samples create accept-a-payment
scarlet bolt
lol I'm just getting a weird proxy error
Wonder if this sample is bugged for PHP + React
strange slate
Not sure. I definitely kept getting the proxy error as well
I just changed the form action and DOMAIN in the .env file to 4242 but the 404 error I got said it couldn't POST 3000/create-checkout-session, and that was without the proxy. I'm no server expert yet but I'm not sure how that could still be happening
strange slate
Nice!
scarlet bolt
Wait wait wait
The button is just redirecting me to localhost:4242/create-checkout-session, which is where it works fine from
strange slate
Is that with the proxy?
scarlet bolt
With and without. I'm confused....
strange slate
Glad it's not just me
scarlet bolt
I really think this sample must be bugged for PHP + React. Let me check with a colleague
strange slate
Sounds great, thanks so much
scarlet bolt
Okay so figured out my bug
Let's see if it is yours
In your Checkout.js what is the action currently?
Is it hitting action="http://localhost:4242/create-checkout-session.php"?
Mine was not including the .php
Which is the correct PHP server endpoint
strange slate
Nope! No .php, which had me confused before but I figured there was something I was missing. Let me try it real quick
What is your DOMAIN set to in your .env file? And do I still need the proxy? I got the 404 but it was still trying for localhost:3000/create-checkout-session. Restarting servers/deleted cookies
scarlet bolt
DOMAIN=http://localhost:4242/ in my .env
And yes on proxy: "proxy": "http://localhost:4242/",
strange slate
Still getting: "Proxy error: Could not proxy request /create-checkout-session from localhost:3000 to http://localhost:4242/ (ECONNREFUSED)."
500 error in console
scarlet bolt
Okay that is what I was hitting earlier. Hmm what did I change?
strange slate
But the 500 error is picking up the old action:
POST http://localhost:3000/create-checkout-session 500 (Internal Server Error)
scarlet bolt
Oh wait yeah that's not .php
strange slate
not the 4242/create-checkout-session.php
I've changed it in Checkout.js and restarted servers/deleted cookies/cache, it's just not updating for some reason
scarlet bolt
Did you restart your client side?
Or just your server?
My client side wasn't updating without a hard restart
strange slate
I quit php -S server-side then started it again and I did ctrl+c in client side then ran npm start. Is there a harder reset I should do? Restart VSCode maybe?
scarlet bolt
That's what I did too. But something seems to be caching for some reason? Your files are saved, correct? I have made that mistake on accident before....
strange slate
Haha, me too but they were
scarlet bolt
I'm stumped. My only recommendation at this point is to download it again and change the proxy and the endpoint in a new project
strange slate
Yeah, restarted VSCode and reran everything and still getting the same error.
Alright, I may try that. I'll try and do some more digging as to why it's not updating.
scarlet bolt
Is there a reason you want this sample so bad?
You could also write the code here locally in less time than this is taking 🙂
Don't get me wrong... this should be easier to get up and running than it is.
But you can get very close to the same thing quickly by just following our Quickstart: https://stripe.com/docs/checkout/quickstart
strange slate
Haha, I guess I'm kind of new to all this so I was using the sample as a learning opportunity. I was in Laravel but that was pretty complicated so I'm taking a step back to see how everything works. I just didn't want to build it incorrectly. I'm transitioning from Medical into tech--trying to get an e-commerce web app built as a portfolio project.
scarlet bolt
I gotcha. That all makes sense but you honestly may learn more by building this piece by piece yourself
strange slate
Makes sense! I think I'll need something more custom than checkout anyway, I was just curious how you guys would structure everything.
Any pointers for building a shopping cart with React/Stripe?
scarlet bolt
Unless you really need custom functionality I think Checkout is perfect
It will take so much of the burden off of your hands.
In terms of the Shopping Cart
strange slate
Awesome. So I can list a bunch of products, have people add a few to a cart, then checkout with Checkout?
scarlet bolt
Yep exactly
You just build the UI for customers to select a quantity or items and then you pass that to your Server and create the Checkout Session based on that
Then you redirect and let us take care of everything
And then you handle fulfillment using Webhooks
strange slate
OK, I think I get you. I have a React shopping cart app already built. The products are all Json hard-coded in a data file, is there a way to link the Price Id's to that? I saw "List All Prices" in the API docs, I'm just not even sure where I'd place that call.
scarlet bolt
Yeah you have two options here. You can either store this all in your own database (the product catalogue on your end alongside the Price/Product IDs from Stripe). Or, you can add metadata to the Price/Products within Stripe to match them to your product catalogue.
Most folks go the database route.
You would use the List Prices API if you were to store the data within Stripe using metadata. But really this will lead to a lot of API calls which is why it is better to store it in your own database and then just query that based on the Cart.
strange slate
Ah, OK. That makes good sense. So the DB would have the Price/Product ID's as a column, the client would call/render the DB items, the Cart component would add them to the cart, then Stripe Checkout would create-checkout-session at the Checkout button, which will lead to the Stripe-hosted checkout page where it's pulled in the data based on the Price/Product ID's that have been added to the Cart. Is that even close to what I'm looking to do?
scarlet bolt
- DB would have Price/Product Ids as column alongside a column with your own Product catalogue. So you know that
catgoes withprod_xyzandprice_123 - User selects items in your UI and clicks pay button. Let's say they are buying
1 cat. - You pass this data (
1 cat) from the client to your server. Your server queries your database based oncatand finds the correct Price/Product. - You create the Checkout Session on your Server using the correct Price/Product
- You redirect the customer to that Session where they complete payment.
- (We haven't discussed this part yet) Your server listens for Webhooks so you know when the payment has been completed and you should fulfill that "order".
strange slate
OK, so clicking the "Checkout" button is doing 2 things:
- Querying Price/Product IDs from DB;
- Redirecting to Checkout Session.
So DB is populating the "store items" so to speak, e.g. "cat," in the main page.
When someone clicks on "Add Cat to Cart," the "Add to Cart" button is adding the DB object "Cat" to the Cart.
Then the "Checkout" Button queries the DB for Price/Product ID's, takes that info, and redirects to a checkout session, which has been created server-side in a php file?
Also I have to go ahead and say that I can't tell you how much I appreciate your time and patience. Please let me know if this is beyond your scope.
scarlet bolt
Yep overall you got it. I'm happy to help but I do have to step away. @outer coral is taking over and can clarify anything further!