Adding Cart Products to Paypal Checkout API
Answered
Masai Lion posted this in #help-forum
Masai LionOP
Im in the process of incorporating my cart products into Paypal Checkout API. Unfortunately, I`ve hit a roadblock with errors such as 505 and issues related to missing order IDs. despite my efforts to use the same code for displaying the added products into the cart, adapting it to the Paypal route handler seems to be causing this problems. Any assistance or guidance in resolving these integration issues would be greatly appreciated. I will send the codes in codeblocks after this message.
Answered by Ray
<PayPalButtons
forceReRender={products}
style={{
color: "blue",
}}
createOrder={createOrder}
/>490 Replies
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "USD",
value: getTotal.toString(),
},
items: products.map((item: any) => ({
name: item.name,
category: "PHYSICAL_GOODS",
description: item.description,
quantity: item.quantity.toString(),
unit_amount: {
currency_code: "USD",
value: item.price.toString(),
},
})),
},
]
});the requestBody should look like this
Masai LionOP
you helped me yesterday and the repo is likely similar to the one you gave me
const { products } = req.bodyto
const { products } = await req.json()Masai LionOP
alr
createOrder={async () => {
const res = await fetch('/api/checkout', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ products })
})
const order = await res.json()
console.log("ORDER:", order)
return order.id
}}then add the body in Cart.tsx
Masai LionOP
i am getting many syntax errors inside route.tsx
let me just see whats going on inside route.tsx
done
it was the items
@Masai Lion it was the items
yeah you need to type the products
Masai LionOP
it was wrongly placed
oh ok
@Ray yeah you need to type the products
Masai LionOP
request.requestBody({
"intent": "CAPTURE",
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": "100.00"
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "USD",
value: product.price.toString(),
},
})),
},
]
});let try it
Masai LionOP
this is my .requestBody
alr
i am refreshing the localhost rq
Masai LionOP
@Ray I got some many errors
@Ray what error
Masai LionOP
Cart.tsx:57
POST http://localhost:3000/api/checkout 500 (Internal Server Error)
createOrder @ Cart.tsx:57
(...@Masai Lion Click to see attachment
do you see
console.log(products) this line logged in the terminalserver terminal not browser
Masai LionOP
yes
it logs the prducts
could you show the log so I can see the project object?
Masai LionOP
it logs the id, name, price, quantity and img src
sure but it is in spanish
also below the log it appears a big error
HttpError: {"name":"UNPROCESSABLE_ENTITY","details":[{"field":"/purchase_units/@reference_id=='default'/amount/breakdown/item_total","location":"body","issue":"ITEM_TOTAL_REQUIRED","description":"If item details are specified (items.unit_amount and items.quantity) corresponding amount.breakdown.item_total is required."}],"message":"The requested action could not be performed, semantically incorrect, or failed business validation.","debug_id":"4ad75124808b2","links":[{"href":"https://developer.paypal.com/docs/api/orders/v2/#error-ITEM_TOTAL_REQUIRED","rel":"information_link","method":"GET"}]}ok item_total_required
items.unit_amount and items.quantity and amount.breakdown.item_total are required.
Masai LionOP
so what should I add?
@Masai Lion so what should I add?
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "USD",
value: "100.00",
breakdown: {
item_total: getTotalPrice(products),
}
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "USD",
value: product.price.toString(),
},
})),
},
],
});Masai LionOP
alr let me
change requestBody
ready
test?
yea
@Masai Lion ready
oh wait
@Masai Lion ready
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "USD",
value: "100.00",
breakdown: {
item_total: {
currency_code: "USD",
value: String(getTotalPrice(products))
},
}
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "USD",
value: product.price.toString(),
},
})),
},
],
});the item_total look like this
Masai LionOP
?
oop
alr yeah the console still gave me errors
let me just copy that
Type '{ item_total: { currency_code: string; value: string; }; }' is missing the following properties from type 'AmountBreakdown': discount, handling, insurance, shipping_discount, and 2 more.
i remember I made all that
its just to copy item total like
many times
imma put value 0 on em
@Masai Lion Type '{ item_total: { currency_code: string; value: string; }; }' is missing the following properties from type 'AmountBreakdown': discount, handling, insurance, shipping_discount, and 2 more.
try again with this
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "USD",
value: "100.00",
breakdown: {
item_total: {
currency_code: "USD",
value: String(getTotalPrice(products)),
},
shipping_discount: {
currency_code: "USD",
value: "0.00",
},
discount: {
currency_code: "USD",
value: "0.00",
},
tax_total: {
currency_code: "USD",
value: "0.00",
},
shipping: {
currency_code: "USD",
value: "0.00",
},
handling: {
currency_code: "USD",
value: "0.00",
},
insurance: {
currency_code: "USD",
value: "0.00",
},
},
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "USD",
value: product.price.toString(),
},
})),
},
],
});Masai LionOP
i did that already
C:
@Masai Lion i did that already
does it work
Masai LionOP
i am testing that
done
i got
error
that inside web
this is console
HttpError: {"name":"UNPROCESSABLE_ENTITY","details":[{"field":"/purchase_units/@reference_id=='default'/amount/value","value":"100.00","issue":"AMOUNT_MISMATCH","description":"Should equal item_total + tax_total + shipping + handling + insurance - shipping_discount - discount."}],"message":"The requested action could not be performed, semantically incorrect, or failed business validation.","debug_id":"02d9b246a42a8","links":[{"href":"https://developer.paypal.com/docs/api/orders/v2/#error-AMOUNT_MISMATCH","rel":"information_link","method":"GET"}]}this is web
@Masai Lion
HttpError: {"name":"UNPROCESSABLE_ENTITY","details":[{"field":"/purchase_units/@reference_id=='default'/amount/value","value":"100.00","issue":"AMOUNT_MISMATCH","description":"Should equal item_total + tax_total + shipping + handling + insurance - shipping_discount - discount."}],"message":"The requested action could not be performed, semantically incorrect, or failed business validation.","debug_id":"02d9b246a42a8","links":[{"href":"https://developer.paypal.com/docs/api/orders/v2/#error-AMOUNT_MISMATCH","rel":"information_link","method":"GET"}]}
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "USD",
value: String(getTotalPrice(products)),
breakdown: {
item_total: {
currency_code: "USD",
value: String(getTotalPrice(products)),
},
shipping_discount: {
currency_code: "USD",
value: "0.00",
},
discount: {
currency_code: "USD",
value: "0.00",
},
tax_total: {
currency_code: "USD",
value: "0.00",
},
shipping: {
currency_code: "USD",
value: "0.00",
},
handling: {
currency_code: "USD",
value: "0.00",
},
insurance: {
currency_code: "USD",
value: "0.00",
},
},
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "USD",
value: product.price.toString(),
},
})),
},
],
});yeah need to change amount.total too
Masai LionOP
lol
alr
done
let me
test again
ayo
it lets me log in
let me log in rq and see what it shows
dayum
alr yeah
its working
but there is a small prpblem
it is charging me on USD
let me change that
because you set the currency to USD
Masai LionOP
cuz its almost 10k on my currency
@Ray because you set the currency to USD
Masai LionOP
i need to do something to change it ?
like not just change it on the code
Masai LionOP
from USD >> my currency
@Ray just change it here
Masai LionOP
alr
check the code for your currency
@Ray https://developer.paypal.com/api/rest/reference/currency-codes/
Masai LionOP
i did so and now it throws an error
Masai LionOP
Give me a second to send the error
Masai LionOP
yes
@Masai Lion yes
ok go to cart.tsx
Masai LionOP
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "MXN",
value: String(getTotalPrice(products)),
breakdown: {
item_total: {
currency_code: "MXN",
value: String(getTotalPrice(products)),
},
shipping_discount: {
currency_code: "MXN",
value: "0.00",
},
discount: {
currency_code: "MXN",
value: "0.00",
},
tax_total: {
currency_code: "MXN",
value: "0.00",
},
shipping: {
currency_code: "MXN",
value: "0.00",
},
handling: {
currency_code: "MXN",
value: "0.00",
},
insurance: {
currency_code: "MXN",
value: "0.00",
},
},
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "MXN",
value: product.price.toString(),
},
})),
},
],
});@Ray ok go to cart.tsx
Masai LionOP
alr
<PayPalScriptProvider options={{clientId: "clientID", currency: "MXD"}}>Masai LionOP
alr so
i did that
let me
test it
so uhm
it works
but
just one detail
on the shipping price, the price should be for example 100 when the total is below a certain price otherwise it must be 0
@Masai Lion on the shipping price, the price should be for example 100 when the total is below a certain price otherwise it must be 0
you can calculate that in
route.ts@Masai Lion on the shipping price, the price should be for example 100 when the total is below a certain price otherwise it must be 0
something like this
const itemTotal = getTotalPrice(products)
const shippingFree = itemTotal > 799 ? 0 : 199
const grandTotal = itemTotal + shippingFree
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "MXD",
value: String(grandTotal),
breakdown: {
item_total: {
currency_code: "MXD",
value: String(itemTotal),
},
shipping_discount: {
currency_code: "MXD",
value: "0.00",
},
discount: {
currency_code: "MXD",
value: "0.00",
},
tax_total: {
currency_code: "MXD",
value: "0.00",
},
shipping: {
currency_code: "MXD",
value: String(shippingFree),
},
handling: {
currency_code: "MXD",
value: "0.00",
},
insurance: {
currency_code: "MXD",
value: "0.00",
},
},
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "MXD",
value: product.price.toString(),
},
})),
},
],
});Masai LionOP
Also
Thanks
When a “client†makes an order
Will the products they ordered will be sent to me?
not sure, I have never used paypal before. but I think they should have that
check the setting on dashboard
@Ray something like this
ts
const itemTotal = getTotalPrice(products)
const shippingFree = itemTotal > 799 ? 0 : 199
const grandTotal = itemTotal + shippingFree
request.requestBody({
intent: "CAPTURE",
purchase_units: [
{
amount: {
currency_code: "MXD",
value: String(grandTotal),
breakdown: {
item_total: {
currency_code: "MXD",
value: String(itemTotal),
},
shipping_discount: {
currency_code: "MXD",
value: "0.00",
},
discount: {
currency_code: "MXD",
value: "0.00",
},
tax_total: {
currency_code: "MXD",
value: "0.00",
},
shipping: {
currency_code: "MXD",
value: String(shippingFree),
},
handling: {
currency_code: "MXD",
value: "0.00",
},
insurance: {
currency_code: "MXD",
value: "0.00",
},
},
},
items: products.map((product: any) => ({
name: product.name,
category: "PHYSICAL_GOODS",
description: product.description,
quantity: product.quantity,
unit_amount: {
currency_code: "MXD",
value: product.price.toString(),
},
})),
},
],
});
Masai LionOP
But inside that code you are just adding the price of the shipping by default but like, how do I make it to be self mated depending on the price?
Let’s say that I will give free shipping after 799
But shipping below 799 will cost 199
const itemTotal = getTotalPrice(products)
const shippingFree = itemTotal > 799 ? 0 : 199
const grandTotal = itemTotal + shippingFreeMasai LionOP
Ohhhh
That makes sense yeah
@Ray not sure, I have never used paypal before. but I think they should have that
Masai LionOP
Oh alr. Anyways thanks for your help. I really appreciate it
I think I should only check that thingy but otherwise this part of the website is done
Thank you very much C:
May I leave this open for a couple minutes?
no prob
yeah
Masai LionOP
Thanks!
@Ray ts
const itemTotal = getTotalPrice(products)
const shippingFree = itemTotal > 799 ? 0 : 199
const grandTotal = itemTotal + shippingFree
Masai LionOP
And then grandTotal should replace getTotalPrice inside the requestBody?
Masai LionOP
Wait no
So I only added
const shippingFee = getTotalPrice(products) > 799 ? 0 : 199And on the shipping the value is String(shippingFee)
@Ray check the code here
Masai LionOP
Alr so I checked and I do get the products to my email when the client pays. But there is a problem
I added the code for the shipping
But it doesn’t apply to the final price
The invoice just charges the price of the items
@Masai Lion I added the code for the shipping
could you show the code again?
@Ray could you show the code again?
Masai LionOP
It’s the same u sent earlier
Everything works except the charge for the shipping
Wait
Hold a second
I changed the shipping fee to itemTotal > 399 ? 0 : 150
And I just simulated a purchase of 650
Let me do something below 399
well then its not the same
Masai LionOP
E
Yeah
lol
Imma simulate a 350 purchase and see if the shipping is getting included
Also, sorry if I am getting kinda annoying
its fine but I can't help if you are not providing the information I need
Masai LionOP
In the PayPal buttons it should appear a button that allows users to pay with credit or debit card. But in this case it only appears the PayPal button. As far as I remeber this second button should appear.
@Ray its fine but I can't help if you are not providing the information I need
Masai LionOP
Shipping is included in carts below 399
Im so sorry
:C
@Ray do you mean this?
Masai LionOP
Yes !!!
Should I update my repo with my actual code ?
@Ray no need
Masai LionOP
Alr!
@Masai Lion In the PayPal buttons it should appear a button that allows users to pay with credit or debit card. But in this case it only appears the PayPal button. As far as I remeber this second button should appear.
<PayPalScriptProvider options={{clientId: "clientID", currency: "MXD", enableFunding: "card"}}>try this
if this doesn't work, then try this and see if the button appear
<PayPalScriptProvider options={{clientId: "clientID"}}>Masai LionOP
Alrrr
I added it and imma check on the website when it reloads
Masai LionOP
Yeah it doesn’t show with the enableFundinh
@Ray if this doesn't work, then try this and see if the button appear
ts
<PayPalScriptProvider options={{clientId: "clientID"}}>
try remove the currency and see if it show
@Ray https://www.paypal-community.com/t5/PayPal-Payments-Standard/Debit-or-Credit-Card-button-is-not-showing/m-p/3072928/highlight/true#M18701
if it still doesn't show, check here
@Ray try remove the currency and see if it show
Masai LionOP
But then it will start failing because of my currency
@Masai Lion But then it will start failing because of my currency
just to see if the button show
if it does, then it might be the currency doesn't allow it
Masai LionOP
So should I change all the MXN to USD inside my route.tsx?
I deleted currency and it doesn’t show
@Masai Lion I deleted currency and it doesn’t show
then change it back
check the link i sent
Masai LionOP
I think
It is something on my account settings
Let me move some things and
See what it does
@Ray https://www.paypal-community.com/t5/PayPal-Payments-Standard/Debit-or-Credit-Card-button-is-not-showing/m-p/3072928/highlight/true#M18701
this link have the information how to enable that
Masai LionOP
Wait but I am in sandbox
Idk if it would work
It should
<PayPalScriptProvider options={{clientId: "clientID", currency: "MXD", enableFunding: ["card", "credit", "paylater", "venmo"]}}>try this again
and try open the page in incognito mode
Masai LionOP
Mmm alr
Masai LionOP
I did all
And I even opened it on incognito
Nothing
:C
Let me see if there is something wrong on the inspector
Console shows nothing
have you checked the link?
and enable it on your account?
Masai LionOP
Yeah
Wait give me a sec
Let me see if the PayPal button works
I also have a button above the PayPal button
Maybe that’s doing something?
what button
Masai LionOP
A button that says in Spanish “Ver Másâ€
Like just a View More
But
It doesn’t work
It doesn’t do something important
PayPal link works
Let me see if removing the button that doesn’t work does something
Idk maybe it is covering the card button or sum
Masai LionOP
Maybe cuz where I live nobody uses Venmo
I think it doesn’t even exist
(Where I live)
Masai LionOP
I did
Let me
Refresh
I removed the button that doesn’t work and the PayPal button disappeared as well
Lol
you gotta ask paypal for this, I have no idea how to make it appear
Masai LionOP
Uhh
So
It is giving me
An internal server error
Hehe
@Ray you gotta ask paypal for this, I have no idea how to make it appear
Masai LionOP
Yeah… I think I will just keep it like that
<PayPalScriptProvider options={{clientId: "clientID", currency: "MXD"}}>change it back
Masai LionOP
I deleted the funding options
And even the rest changed colors
Nvm
It shows internal server error
I will run npm run build
Masai LionOP
I will look forward tommorow to make handlers for errors like the card doesn’t work or stuff like that, and to dissapear the PayPal when there is no products on the cart (it does this in the beginning but then when I delete the products from the cart it stays there)
Anyways thanks @Ray !
I will see tommorow how to add the card button, if I can’t then I will leave it like that
Masai LionOP
@Ray I think I discovered what’s wrong in the buttons. On the style section of PayPalButtons there is one element that changes everything. It might be “layout†because I am watching a video (the video I used as reference in the beginning) before adding that part the card button appears but then when they add it, the button suddenly disappears
And yeah, the guy inside the video mentions that layout:“horizontal†makes it so that only one button appears
That’s why it doesn’t appear
Masai LionOP
@Ray sorry, when I delete the items from the cart and clicking the PayPal button again when there is nothing it shows me I can pay the products I had on my cart. Is there any way I can stop this from happening?
I will share code if it’s needed
@Masai Lion I will share code if it’s needed
could you show the code on how you delete the item
and the code for cartReducer
@Ray could you show the code on how you delete the item
Masai LionOP
Sure. I will share it on the same repo I sent in this forum
Is that okay?
Or want me to just share the piece of code in here
Masai LionOP
Also
I added the button for credit cards and debit
Masai LionOP
But when I run the simulation
It does nothing
Not even a email
Idk if there is something I need to do on my route file
Masai LionOP
@Ray
Sorry for late response
Would you mind if I send a photo of the code?
code better
Masai LionOP
Alr
Give me a sec cuz I am working on the item page
Rq
I’m almost done
Masai LionOP
Done
Let me send
@Ray can u repeat what scripts you need?
It is the delete products form the cart which is a redux method or instruction whatever you want to call it
And that’s all?
@Ray and the code for cartReducer
and this
Masai LionOP
Alr
@Masai Lion http://github.com/yoboywhat/Paypal-Issue-02-02-2024-/tree/main/04-02-2024
I don't see issue here
@Ray I don't see issue here
Masai LionOP
Oh really?
@Masai Lion <@743561772069421169> sorry, when I delete the items from the cart and clicking the PayPal button again when there is nothing it shows me I can pay the products I had on my cart. Is there any way I can stop this from happening?
did you mean you add some product to card then clear it and you press the pay button still see product in the bill?
Sorry if I didn’t explain myself correctly
it shouldn't happen, you are sending the cart state to
/api/checkoutunless you changed the code in
Card.tsxMasai LionOP
I haven’t touched Cart.tsx in a long time
Wait I did
I only added to the total of a text to the itemTotal + shippingFee
can you record a video
@Ray can you record a video
Masai LionOP
My laptop ain’t capable of recording 
@Masai Lion My laptop ain’t capable of recording <:lolsob:753870958489632819>
add
console.log(products) on Cart.tsx and route.tsxMasai LionOP
I never removed those
check the log when you press pay button with empty cart
Masai LionOP
Both print
I mean
Both log the products
@Masai Lion Both log the products
what do you see when you press pay button with empty cart?
Masai LionOP
It leads me to the PayPal login page
i mean the log
Masai LionOP
Uhhh idk let me check
Masai LionOP
Please hold on one more second
It is taking long to load
When I click on the Pay button when there is products it allows me to log in to PayPal, it prints the order id after the products log
Let me close the PayPal window and delete the items
@Ray it logs one product
I added two of the same product first and now it only shows one
Still lets me log in
so you remove the item from cart and the cart is empty
Masai LionOP
Waits
Something funny going on
then you press the pay button again and the log show one product?
Masai LionOP
Nvm
Wait so it prints two times when there is products because I have two logs
But then
When I delete the products only one log goes through
@Ray then you press the pay button again and the log show one product?
Masai LionOP
No it shows it’s 2 of the product
1. when you delete the product, check the product log on browser console
2. press the pay button and check the product log on server
2. press the pay button and check the product log on server
Masai LionOP
Let me explain with details.
When I click the first time I get two copies of the log saying the image src, the name, the price and the quantity. When I delete the products only one of both logs prints out the product and the quantity and the price that well isn’t anymore inside the cart
When I click the first time I get two copies of the log saying the image src, the name, the price and the quantity. When I delete the products only one of both logs prints out the product and the quantity and the price that well isn’t anymore inside the cart
And when I click the pay button after deleting the products
It prints it
Only when I press the PayPal Button
That means that PayPal stays with the idea that the cart products still exists while in theory they don’t
Then the problem is directly inside the route ?
well I don't get it
Masai LionOP
Oh I’m sorry
you are sending the product in the redux store to the route
Masai LionOP
Okay so I have two console.log, one in route.tsx and another inside Cart.tsx
When I load the page and add products I get a first print
When I click the PayPal button
I get a second print
When I delete the products I get no prints
But when I press the PayPal button I get a print
Only 1 print saying exactly the same as the first one
@Masai Lion When I delete the products I get no prints
it should still print but empty array
@Masai Lion But when I press the PayPal button I get a print
get print from where
@Ray it should still print but empty array
Masai LionOP
It doesn’t
@Ray get print from where
Masai LionOP
I’m not sure
@Masai Lion I’m not sure
I mean on browser or server?
Masai LionOP
Directly to my terminal
Masai LionOP
I am not on the browser inspector
@Ray server?
Masai LionOP
Yeah
@Masai Lion Yeah
could you show the code on
useAppSelectorMasai LionOP
Uh
Sure
import {TypedUseSelectorHook, useDispatch, useSelector > from
"react-redux";
import type
{ RootState, AppDispatch } from "-/tienda";
export const useAppDispatch = ()
=> useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;And I think you would like to see .Tienda
import
{configureStore} from "@reduxjs/toolkit"
import cartReducer from
"./features/cartSlice"
export const tienda = configureStore({
reducer: {
cartReducer,
}
devTools: process. env. NODE_ENV != "production",
});
export type RootState = ReturnType<typeof tienda-getState>;
export type AppDispatch = typeof tienda-dispatch;could you try this
1. open the browser console
2. add a item to cart
3. remove the item
4. screencap the browser console log
1. open the browser console
2. add a item to cart
3. remove the item
4. screencap the browser console log
Masai LionOP
Sure
On the browser console I get no logs
Wait
Wait I do
When I delete it
Nvm
It was just an error because I closed the PayPal window
Otherwise there’s no logs
no logs?
Masai LionOP
Nope
Only when I close the PayPal window
Detected popup close
But I don’t think that has something to do
so you don't have
console.log(products) in cart.tsxMasai LionOP
I do
Well
I have it but not on the return
where is it?
Masai LionOP
I added it to the PayPalButtons
well it is so hard to debug with this
Masai LionOP
Sorry it was indeed inside the return
But it was inside the PayPalButtons
add a
console.log(products) on cart.tsxMasai LionOP
No matter where?
before the return
below getTotal
Masai LionOP
Alr
Okay
It prints when I add the item and open the cart
Now let me delete the products
It printed
Two funny similar logs
Not worth it opening both because they are the same
it shouldn't be empty
Masai LionOP
It has many things inside the Prototype log
that doesn't matter
it should contain a product when you add one
Masai LionOP
No but
Those logs are when I deleted the products
where is the log when you add?
@Masai Lion Click to see attachment
Masai LionOP
This is after deleting the products
@Ray where is the log when you add?
Masai LionOP
I will send it rn
Masai LionOP
I did
Sorry my phone died
first one is when you add the product?
the last one is when you delete?
@Masai Lion Click to see attachment
Masai LionOP
Add Product
@Masai Lion Click to see attachment
Masai LionOP
Delete Product
Let me send it correctly
—————————————-
ADD PRODUCT TO CART
DELETE PRODUCT FROM CART
—————————————-
ok press the pay button now
and get ready to see the server log
Masai LionOP
Not web log right?
Alr
With or without a product?
Without
press now
Masai LionOP
Done
screencap the server log
Masai LionOP
I got the print of the product and then the order id
ok could you show the code on
cart.tsx@Ray ok could you show the code on `cart.tsx`
Masai LionOP
It’s inside the repo I think
only the code yesterday
for
cart.tsxMasai LionOP
Ohh
I added CartProduct
Not Cary
Let me add it rq
@Ray it’s on the repo now
@Masai Lion <@743561772069421169> it’s on the repo now
const createOrder = async () => {
const res = await fetch("/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ products }),
});
const order = await res.json();
console.log(order.id);
return order.id;
}
......
return (
.....
<PayPalButtons
style={{
color: "blue",
}}
createOrder={createOrder}
/>
)try change to this
Masai LionOP
Sure
@Ray just checking, this is another unusually long post so just wondering if the original question has been answered?
please tell the OP to make new posts for new questions if the original question(s) have been answered
Masai LionOP
Actually not, we are still dealing with PayPal
Well from my perspective the main question isn’t answered yet
I’m encountering errors with the integration of PayPal and the products on my Cart
Which yeah it’s still the main
@Ray ts
const createOrder = async () => {
const res = await fetch("/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ products }),
});
const order = await res.json();
console.log(order.id);
return order.id;
}
......
return (
.....
<PayPalButtons
style={{
color: "blue",
}}
createOrder={createOrder}
/>
)
try change to this
Masai LionOP
I did so. And then I repeated the exercise of adding and removing products to then press the PayPal button and still shows the product
@Masai Lion I did so. And then I repeated the exercise of adding and removing products to then press the PayPal button and still shows the product
<PayPalButtons
id={String(products.length)}
style={{
color: "blue",
}}
createOrder={createOrder}
/>then try again
Masai LionOP
Sure
Masai LionOP
It shows a syntax error @Ray
@Masai Lion Click to see attachment
create a new component and render the
PaypalButtonspass the products as props
@Ray create a new component and render the `PaypalButtons`
Masai LionOP
Like a new IProduct?
what do you mean IProduct?
Masai LionOP
Nothing sorry
So basically you want me to create a new file like to make Cart.tsx and the button separate files
Export the button and then add it back to Cart?
Will be something funny to do
Imma add the file “PaypalButton.tsx†into my components
you could create it in the same file
doesn't need to be a new file
Masai LionOP
What
Never done that in my life, I’ve always created separate files, I never knew I could do that
omg
Masai LionOP
?
this is react not svelte
Masai LionOP
alr lol
@Ray this is react not svelte
Masai LionOP
Well after this I made that and id is still giving the same error
I created a new component inside Cart.tsx and rendering it and passing the products as props
Masai LionOP
But I’m not sure if id has to go obligatory inside the PayPalButtons, otherwise it should be okay?
@Ray don't need id
Masai LionOP
Nice.
@Ray forget the id and try again
Masai LionOP
Still nothing
what do you mean nothing?
Masai LionOP
Prolly the best thing to do will be to make the server to detect when there isn’t any products on the cart and if the answer = there isn’t any products left then I will simply ask the server to hide the button manually
@Ray what do you mean nothing?
Masai LionOP
1 - Add product
2 - Remove Product
3 - PayPal stays with the added product but never removes
2 - Remove Product
3 - PayPal stays with the added product but never removes
the server won't be able to know if the cart is empty or not
or you put the cart to database
Masai LionOP
For now I am not willing on investing on a database
const createOrder = async () => {
console.log("product in createOrder", products)
const res = await fetch("/api/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ products }),
});
const order = await res.json();
console.log(order.id);
return order.id;
}try adding this console.log
then try again and check the log on browser
Masai LionOP
it shows the products
The ones that are supposedly already “deletedâ€
Mate, it’s 3 am, imma go sleep
@Masai Lion it shows the products
pass
id={String(products.length)} to new component@Ray pass `id={String(products.length)}` to new component
Masai LionOP
I did so and it still showed this
@Masai Lion Click to see attachment
Masai LionOP
…
Even in the new component and where you can imagine
@Masai Lion Even in the new component and where you can imagine
what browser are you using
Masai LionOP
If you don’t mind we can continue tommorow?
@Ray what browser are you using
Masai LionOP
Chrome
@Masai Lion Chrome
<PayPalButtons
forceReRender={products}
style={{
color: "blue",
}}
createOrder={createOrder}
/>Answer
shit, they have
forceReRender props for this@Ray ts
<PayPalButtons
forceReRender={products}
style={{
color: "blue",
}}
createOrder={createOrder}
/>
Masai LionOP
Imma try it tomorrow