#talmax-loop
woven aurora
ReactJS
upper socket
map() is already trying to iterate through the elements in item, so I'm not sure I understand your question.
What is item? What is cartItems?
woven aurora
So, basically, to get the products to display in the stripe, in LineItems, it needs to get that data in the CART. I am wanting to know how to get the data that it is mapping and append it to the lineItems so that I can get specific values to display the products in the CART
upper socket
Sure, but there are no item or cartItems on Stripe, so I have no idea what those are or how to work with them. Are they arrays? Are they objects?
woven aurora
Objects
upper socket
Are you using a 3rd party plugin that has prototypes for those objects? Or are you creating them custom on your end?
woven aurora
These are things created on my end.
upper socket
And all the fields on the object are items you want to add as Line Items?
upper socket
Alright, and you're trying to add those as line items to an Invoice?
woven aurora
to the checkout
to the lineItems
to this. I basically hardcoded a product from stripe. But I need to add the products in my cart
which uses const cart = useSelector((state) => state.cart);
I know its confusing. Sorry
upper socket
Ah, so you would want to create a Price before you do that then. You'd just use this: https://stripe.com/docs/api/prices/create and make sure each of the fields in item are applied to the correct field on the new Price. Then you'd pass the Price ID to Checkout
woven aurora
I'm confused
upper socket
About which part specifically?
woven aurora
On how to do it. Like specifically, on how to go about it. That doc, doesn't really specify on how to get existing cart and create that priceID
upper socket
We don't have copy/paste code for that. You'd have to code it yourself.
What docs are you following right now?
woven aurora
The link you sent
upper socket
That tells you exactly how to create a Price and all the fields on the object are fairly straight-forward to set. You just have to use the data you get from item. What have you tried so far?
woven aurora
Ok, so I have looked up somehow how to do it. I get this:
but in the console it says
Unhandled Promise Rejection: IntegrationError: Invalid stripe.redirectToCheckout parameter: line_items is not an accepted parameter.
keen thunder
Hello 👋 Taking over as @upper socket needs to step away
where exactly are you passing checkoutOptions?
woven aurora
const checkoutOptions = { line_items, mode: "payment", successUrl:${window.location.origin}/success, cancelUrl: ${window.location.origin}/placeorder, customerEmail: userInfo.email, };
keen thunder
so the name of the field is lineItems and not line_items
https://stripe.com/docs/js/checkout/redirect_to_checkout#stripe_checkout_redirect_to_checkout-options-lineItems
So you'd likely want to change it to
Now, I get this: Unhandled Promise Rejection: IntegrationError: Invalid stripe.redirectToCheckout parameter: lineItems.0.price_data is not an accepted parameter.
keen thunder
Ah hold on, seems like you're mixing a few things here.
Give me a moment to summarize
keen thunder
As far as my understanding goes, Passing price information in lineItems will not create a new price object at the same time as redirecting to checkout.
You'll need to create the price objects first before redirecting to checkout.
1/ Create a price by passing in the information that you're currenly returning from line_items
https://stripe.com/docs/api/prices/create
2/ Then you can create an array of lineItems which should look something like
[
{ price: priceID, quantity: quantiyOfProduct},
{ price: priceID, quantity: quantiyOfProduct},
]
3/ Pass that in to redirectToCheckout
woven aurora
I don't know how to do that
keen thunder
how to do what step specifically?
woven aurora
I get confused when doing that, gettings what I'm returning and creating the line_items
because if not, it will be creating new priceID's every single time, someone adds something to the cart
keen thunder
are you using client-only checkout? or do you have a server?
woven aurora
I have a backend yes
If I'm being honest, this project was from a course, I'm not that great with react. So, I try to learn and understand how to do most things, like doing implementing stripe
keen thunder
Gotcha, all good. an alternative here would be to send the line_items array to server side once the customer is ready to checkout, create checkout session server-side and then navigate the client to the checkout page
We have an example here (its not in react though 😦 )
https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout
woven aurora
Gotcha, all good. an alternative here would be to send the `line_items` array to...
Ok, let me see
Ok, how would I get the lineItems:
found in the docs
line_items: [
{
price_data: {
currency: 'usd',
product_data: {
name: 'T-shirt',
},
unit_amount: 2000,
},
quantity: 1,
},
],
here for cart. My backend doesn't get the cart information.
keen thunder
You can send it to your backend and then create a checkout session using the server-side library
from the example I linked above
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: line_items,
mode: 'payment',
success_url: 'http://localhost:4242/success.html',
cancel_url: 'http://localhost:4242/cancel.html',
});
res.redirect(303, session.url);
});
I'll check it out
woven aurora
or how about, is there a way that it just displays the amount and not the product
Because, really, all that is what's making all this difficult
is getting the products
because I can access the total price via cart.totalprice
keen thunder
Are you getting a different error with the server-side approach?
woven aurora
it's not working because it's not fetching the items
Because the problem here is that it needs to create the price_id. But I can't create that. So, really there is no efficient way of handling it
keen thunder
You don't need to fetch the items though
Can you share the exact code you're running when your user clicks on checkout?
woven aurora
But does it accept just payment details?
keen thunder
With the server-side solution, you'd not need to create the price_id
the server-side code will create it for you
woven aurora
Oh, I'm just confusing it then.
keen thunder
yup
woven aurora
Yeah, like I've been telling you, I don't know how to do most stuff. LOL. Let me try once more
& I've tried contacting other react devs, but they are busy.
So, this is sort of like my last hope
woven aurora
You can send it to your backend and then create a checkout session using the ser...
So, you want me to paste this in my server.js?
keen thunder
all good. To be clear, now all you to do is
1/ send line_items array to your backend (POST request)
2/ create a checkout session server-side
3/ handle the redirect
yes
woven aurora
Sort of like this?
keen thunder
yup
woven aurora
Do I need the webhook? no, i don't. Just looked at it. Its just to create an order I think
keen thunder
In order for above to work? No.
Nice.
were you able to complete the checkout session?
woven aurora
Well, no. Because I am adding it to my serverjs
and now I'm getting a
[1] SyntaxError: The requested module './routes/stripe.js' does not provide an export named 'default'
keen thunder
not sure what that is about, sorry.
doesn't look like its coming from the code you've added though
woven aurora
No, I've looked up google, it says it needs an export default
keen thunder
👍
keen thunder
Is that error coming from your front-end or backend?
keen thunder
seems like your code somewhere is importing stripe from ./routes/stripe.js
I don't know if that's a valid path
keen thunder
nope, you already have const Stripe = require("stripe");
and const stripe = Stripe(process.env.STRIPE_KEY);
woven aurora
Oh ok. then, all I need to do is ... something like this:
const handleCheckout = () => { axios .post(${url}/stripe/create-checkout-session, { cartItems, userId: user._id, }) .then((response) => { if (response.data.url) { window.location.href = response.data.url; } }) .catch((err) => console.log(err.message)); };
keen thunder
yes
keen thunder
what code do you have on those lines?
woven aurora
keen thunder
how exactly are you calling handleCheckout ? What are you passing in as a parameter?
woven aurora
Ok, so I just created a button passing cart.cartItems, with the code as a component. Now, I get a 404
Could you join my VSCODE Live Server so that you can see the code better?
keen thunder
you have undefined in the URL, you'll need to figure out where that's coming from
woven aurora
I guess ENV URL are not my friends. Where it says process.env.CLIENT_URL.
anyways, I fixed the env, and I get
that was not working
keen thunder
you do have http in-front of the URL right?
keen thunder
Yes, it should be http://localhost:3000/......
woven aurora
In the network tab, it displays:
{
"message": "Not Found - /create-checkout-session",
"stack": "Error: Not Found - /create-checkout-session\n at notFound (file:///Users/carlitos/creativeduoshop/creativeduoshop/backend/middleware/errorMiddleware.js:2:17)\n at Layer.handle [as handle_request] (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/express/lib/router/layer.js:95:5)\n at trim_prefix (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/express/lib/router/index.js:323:13)\n at /Users/carlitos/creativeduoshop/creativeduoshop/node_modules/express/lib/router/index.js:284:7\n at Function.process_params (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/express/lib/router/index.js:341:12)\n at next (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/express/lib/router/index.js:275:10)\n at /Users/carlitos/creativeduoshop/creativeduoshop/node_modules/body-parser/lib/read.js:130:5\n at invokeCallback (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/raw-body/index.js:224:16)\n at done (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/raw-body/index.js:213:7)\n at IncomingMessage.onEnd (/Users/carlitos/creativeduoshop/creativeduoshop/node_modules/raw-body/index.js:273:7)\n at IncomingMessage.emit (node:events:538:35)\n at endReadableNT (node:internal/streams/readable:1345:12)\n at processTicksAndRejections (node:internal/process/task_queues:83:21)"
}
upper socket
What does your directory tree look like?
woven aurora
upper socket
So it's looking for the /create-checkout-session endpoint at the top-level of the directory tree. Where are you located in the file directory when your bash session runs the server?
woven aurora
The endpoint is at the backend/routes
should I move that file to the src folder?
upper socket
That depends on how you want your integration to be set up.
Are you the only dev on the project? Is there someone you work with that can help you understand how your current web architecture is set up?
woven aurora
That depends on how you want your integration to be set up.
Yes, I am the only dev
And for the second one, no, it was a course I took. Everything I learned and any issues I had to mostly figure out
If you see the chat, me and hanzo were trying to make the backend get the products, and add it to the lineItems
My repo, is based of the course which is based on this repo: https://github.com/bradtraversy/proshop_mern
upper socket
Right. For the most recent error though, the problem is that the endpoint is not where the server is looking for it when it receives the request, so you either need to (a) figure out where your server is running from and where the file containing /create-checkout-session is in relation to that so that you can call <some other directory>/create-checkout-session, or (b) put the file that contains the route for /create-checkout-session in the same directory that the server is running from.
woven aurora
Well, let me try it in the src directory then to see if that fixes it
Tried it, still a 404
If you are not busy, could you look into the live share to see if you might know an easy fix?
upper socket
I cannot help to that degree unfortunately.
woven aurora
I cannot help to that degree unfortunately.
Why?
upper socket
Because we don't have enough bandwidth to traverse through a directory tree to untangle all the code Looking at all the relevant lines of code, plus just guessing at some of the other specifics that we cannot see would make it impossible to do in real-time.
Are you running your server from a bash session? If so, what is the absolute path of the file that contains the endpoint /create-checkout-session and where is the server being run from?
woven aurora
Are you running your server from a bash session? If so, what is the absolute pat...
Bash Session? I think I might need to use my server.js file insted of creating a new routes folder
upper socket
How is your server being run right now?
upper socket
Okay, so it sounds like webpack is handling the serving of your application then. I'm not really familiar with it or how it's configured, so unfortunately there isn't a lot I can offer in the way of finding a resolution.
woven aurora
I have it pointed in my server
app.use("/api/stripe", stripe);
Most of the example for this stripe, I've been using it from here: https://github.com/chaoocharles/complete-ecommerce-react-node
but I was asking you colleague, is there a possibility that we can just use the total of the whole order without the product thing?
upper socket
is there a possibility that we can just use the total of the whole order without the product thing?
No. You have to have a Product and a Price in order for this to work.
woven aurora
Ok, hopefully stripe in the future makes it easy for new developers to pass values. I have someone who hopefully will be able to help.
I'll be back if anything
woven aurora
The person was able to do it.
paper terrace
🎉
woven aurora
Got a quick question, how does one retrieve the values from the fields such as shipping
woven aurora
For example, it has Shipping information that it gets from the checkout. So, is there an API to retrieve it?
zinc flicker
Hello! I'm taking over and catching up, one moment...
We do indeed have a Shipping Rates API: https://stripe.com/docs/api/shipping_rates
zinc flicker
Ah, the shipping information providing during Checkout. That's inside the shipping property on the Checkout Session: https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-shipping
woven aurora
Ok, and I see that there is automatic_tax object
In florida it's 7.5 so how would I go about that
zinc flicker
You can either set explicit Tax Rates yourself: https://stripe.com/docs/api/tax_rates
Or you can use Stripe Tax: https://stripe.com/docs/tax
woven aurora
what if I already have a set tax amount?
zinc flicker
You would use a Tax Rate (first link in my last message) to specify it.
woven aurora
cart.taxPrice = addDecimals(Number((0.075 * cart.itemsPrice).toFixed(2)));
zinc flicker
You would create the Tax Rate object and then specify it on the line items it applies to when creating the Checkout Session: https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items-tax_rates
woven aurora
message: "Automatic tax calculation uses fields saved on the Customer. To collect a shipping address with automatic_tax enabled, set customer_update[shipping] to 'auto' to save the shipping address back to the Customer.",
I'm following this. https://www.youtube.com/watch?v=3psLlebNl5w
I did the automatic_tax: {
enabled: true,
},
woven aurora
message: "Automatic tax calculation uses fields saved on the Customer. To collec...
and returned this
minor raft
👋 I'm taking over this thread and catching up
woven aurora
ok
minor raft
Could you share the request ID (req_xxx) that you created for a Checkout Session? Here’s how you can find it: https://support.stripe.com/questions/finding-the-id-for-an-api-request
woven aurora
minor raft
Where did you see the error? This Checkout Session was created successfully with 200
minor raft
From the sample request, you passed in shipping_address_collection in the request which will save customer's shipping address. It requires you to explicitly set customer_update.shipping parameter to auto for saving shipping information: https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-customer_update-shipping