#djk3600
strange badge
iron stone
👋 happy to help
steady apex
legend - will message you now
iron stone
please do message here, we don't do dms
steady apex
ooooh I see sorry lol
okay so
I am getting this error:
code: 'parameter_invalid_integer',
doc_url: 'https://stripe.com/docs/error-codes/parameter-invalid-integer',
message: 'Invalid integer: 37975.00000000001',
iron stone
would you mind sharing the request id? https://support.stripe.com/questions/finding-the-id-for-an-api-request
steady apex
intially I solved this error, by changing my javascript code from this:
const totalAmount = array.reduce((a, b) => {
return a + b;
}, 0);
return totalAmount * 100;
to this:
const totalAmount = array.reduce((a, b) => {
return a + b;
}, 0);
const roundedTotal = Math.round(totalAmount * 100);
return roundedTotal;
It solves the intenger error but now a lot of the payments come under as incomplete under my dashboard
iron stone
the incomplete payments may simply be Payment Intents that haven't been paid by your customers
steady apex
id: req_6ovB3OLgLp1MzL
okay so I am in test mode
but I am confused because sometimes it says succeeded and other times it says incomplete so I am a little scared to deploy and have payments not work if that makes sense
Look here, each payment works and then is incomplete twice after??
iron stone
maybe you're creating 3 PaymentIntents by mistake
steady apex
oh dear
I dont think I am though
heres my code
none of it is confidential by the way 🙂
// const customerEmail = useSelector(selectEmail);
const { items, shipping, description } = req.body;
// Create a PaymentIntent with the order amount and currency
const paymentIntent = await stripe.paymentIntents.create({
amount: calculateOrderAmount(items),
currency: "gbp",
automatic_payment_methods: {
enabled: true,
},
description,
shipping: {
address: {
line1: shipping.line1,
line2: shipping.line2,
country: shipping.country,
postal_code: shipping.postal_code,
},
name: shipping.name,
phone: shipping.phone,
},
// receipt_email: customerEmail,
});
I think somehow you do
maybe it's a front-end problem instead of being from the backend
maybe this function is being called multiple times from the front-end
steady apex
oh no
okay, will it be where I am calling the server.js??
this is my front end checkout as well 🙂
iron stone
maybe when you do the fetch
steady apex
useEffect(() => {
// Create PaymentIntent as soon as the page loads
fetch("http://localhost:4242/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
items: cartItems,
userEmail: customerEmail,
shipping: shippingAddress,
billing: billingAddress,
description,
}),
})
.then((res) => {
if (res.ok) {
return res.json();
}
return res.json().then((json) => Promise.reject(json));
})
.then((data) => {
setClientSecret(data.clientSecret);
})
.catch(() => {
setMessage("Failed to initialize checkout");
toast.error("Something went wrong!!!");
});
}, [billingAddress, cartItems, customerEmail, description, shippingAddress]);
const appearance = {
theme: "stripe",
};
const options = {
clientSecret,
appearance,
};
I thought so 🙂
steady apex
is it there? I cant tell
iron stone
as you can see the useEffect you're doing will be triggered any time any of these values change [billingAddress, cartItems, customerEmail, description, shippingAddress]
steady apex
mate
how did you see that?!
YOU ARE A BEAST
so do I remove all the dependencies??
iron stone
you can't really remove all of these dependencies because you're using them in
items: cartItems,
userEmail: customerEmail,
shipping: shippingAddress,
billing: billingAddress,
description,
}```okay I see, so what shall I do???
iron stone
maybe add an if condition inside the use Effect to check whether all the required data is there before doing the call to your backend
steady apex
hows this
// Create PaymentIntent as soon as the page loads
if (
billingAddress !== null &&
cartItems !== null &&
customerEmail !== null &&
description !== null &&
shippingAddress !== null
) {
fetch("http://localhost:4242/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
items: cartItems,
userEmail: customerEmail,
shipping: shippingAddress,
billing: billingAddress,
description,
}),
})
.then((res) => {
if (res.ok) {
return res.json();
}
return res.json().then((json) => Promise.reject(json));
})
.then((data) => {
setClientSecret(data.clientSecret);
})
.catch(() => {
setMessage("Failed to initialize checkout");
toast.error("Something went wrong!!!");
});
}
}, [billingAddress, cartItems, customerEmail, description, shippingAddress]);
const appearance = {
theme: "stripe",
};
const options = {
clientSecret,
appearance,
};
also massive thanks for your help mate
iron stone
no worries, I hope this would help you out
iron stone
still getting 3?
iron stone
I see what's happening, the 2 "incomplete" PI are being created after paying the 1st one
so technically speaking it might be your page/component reload/re-render or something like that
steady apex
so the useEffect is fine??
iron stone
it might be on re-render it's causing the same issue
I can't really tell because it's hard to debug a code without having a full view of all components and doing some live debugging
steady apex
you aren't able to jump on a call are you?
iron stone
what I would do in your place is add some console.logs here and there to try to see what's happening
iron stone
you aren't able to jump on a call are you?
no we don't do calls either
steady apex
ahh okay
iron stone
and at this point this is not really a Stripe Q, it's more of a react issue, that I'm happy to help with to the extent of my knowledge
steady apex
add some console.logs to the page that is shown whilst the payment is happening or the one that is shown like, 'payment success'
okay you are right
its a react issue, I solved the payment intents but have ran into a different issue
I'll debug, thanks man 🙂
iron stone
add some console.logs to the page that is shown whilst the payment is happening ...
both
iron stone
its a react issue, I solved the payment intents but have ran into a different is...
I'm not abandoning you, I'm just trying to give you pointers because at this point that's the only thing I can do
steady apex
no no! I dont think you are abandoing me at all!
you have been BRILLIANT
I understand that its my code and you are only able to help so much
honestly, thank you so much man
iron stone
no worries, I'm here if you need any more help
steady apex
hey unsure if you can help here but, I have solved the error of multiple payment intents being created
other issue is
Notably, the previous payment is being added onto the new one??
I am very sure its a javascript issue, but this is the impact of removing the numerous stuff from the dependecy array hahaha
steady apex
ahh
I think I am already doing it here?? in the checkout form, but not after the payment succeeds??
const saveOrder = () => {
const today = new Date();
const date = today.toDateString();
const time = today.toLocaleTimeString();
const orderConfig = {
userID,
userEmail,
orderDate: date,
orderTime: time,
orderAmount: cartTotalAmount,
orderStatus: "Order Placed...",
cartItems,
shippingAddress,
createdAt: Timestamp.now().toDate(),
};
try {
addDoc(collection(db, "orders"), orderConfig);
dispatch(CLEAR_CART());
navigate("/checkout-success");
} catch (error) {
toast.error(error.message);
}
};
but I need to clear it again once it succeeds!
lusty scroll
Hi there 👋 I'm jumping in as my teammate needs to step away. Please bear with me a moment while I catch up on the context here.
steady apex
no problem at all mate 🙂
lusty scroll
Sorry, I don't think I'm understanding what the current question here is. Would you mind summarizing/restating it for me?