#shaon
maiden mountain
Hello, can you send me the request ID from a time that you got this error? (req_123)
maiden mountain
So the confirm call is for actually taking payment. You need to collect payment method info to confirm that payment with. https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements#collect-payment
fervent wing
So on submit I do collect the values through this,
const response = await stripe.confirmCardPayment(
clientSecret,
{
payment_method: values["card"],
}
);
What is values in this scenario?
That looks like code to use an already saved payment method's ID
fervent wing
the card details so name, number. expiry etc
maiden mountain
In the doc that I sent, it shows how to use the payment element to collect new card info:
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});```yes, I use that so what I currently do is if a previous card value exists, I will confirmCardPayment but if it is missing I will use stripe.ConfirmPayment
maiden mountain
Yes, that makes sense
fervent wing
The payment intent from my server has payment_method null, would this potentially cause any issues with collecting card details
maiden mountain
No, that is expected behavior. The payment_method property will be automatically filled when you confirm the payment intent with a new payment method
spice nebulaBOT
fervent wing
ah ok, it seems to fail somewhere. I'll loop back when I can identify the fault here
fervent wing
So i have been able to fix the issue
I currently have another small issue. I have saved payment methods in a list and receive the following error directly on the client
Invalid value for stripe.confirmSetup(): elements should have a mounted Payment Element or Express Checkout Element.
gleaming dragon
Yeah so looks like you may be unmounting the element somewhere (or you aren't passing it correctly)
fervent wing
I may have fixed this but have encountered another issue. When someone goes to pay again for a new product, they are stopped with this error that occurs when trying to confirm payment
You cannot confirm this PaymentIntent because it has already succeeded after being previously confirmed.
How should I deal with this?
gleaming dragon
Seems like it was somehow already confirmed. Can you share the payment intent id? That way I can see why it was confirmed?
fervent wing
pi_3NEXzXH5T1rE3zQ014h2pP2M
its definitely already been confirmed
payment method is pm_1NEYvsH5T1rE3zQ0iCVXtsKQ
gleaming dragon
Yeah I don't know what's happening in your flow
But you already confirmed it here: https://dashboard.stripe.com/test/logs/req_6toB6FlqKf4THx
From the front-end
fervent wing
yes it was confirmed usign stripe.confirmCardPayment or confirmPayment
gleaming dragon
Yeah
So what's the issue?
You can only confirm a PI once
So if the payment was successful, don't allow the customer to do it again
fervent wing
is there a way to check on the client side to not check again?
gleaming dragon
Well if you pass a return url, the customer should just get redirected. What is your code doing where the customer can keep submitting info?
fervent wing
Nothing complicated. When the user submits a payment, they confirmCardPayment method there is no old card and if the old card is available use confirmPayment
gleaming dragon
What happened exactly when you were running through the test flow and tried submitting payment multiple times there?
Also can you share your code
fervent wing
if (values["card"]) {
const { error } = await stripe.confirmCardPayment(
clientSecret,
{
payment_method: values["card"],
}
);
if (error) {
console.log("[error]", error);
toast.error(error?.message || "An error occurred while processing your payment.");
if (error?.type === "card_error" || error?.type === "validation_error") {
toast.error("Stripe error: " + error?.message);
} else {
toast.error("An unexpected error occurred: " + error?.message);
}
} else {
toast.success("Payment processed successfully!");
setAddingCard(false);
return window.location.href = session?.metadata?.return_url || process.env.NEXT_STRIPE_RETURN_URL || 'http://localhost:3000/status';
}
} else {
const response = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: session?.metadata?.return_url || process.env.NEXT_STRIPE_RETURN_URL || 'http://localhost:3000/status',
},
});
const { error } = response;
console.log("error", error);
toast.error(error?.message || "An error occurred while processing your payment.");
if (error?.type === "card_error" || error?.type === "validation_error") {
toast.error("Stripe error: " + error?.message);
} else {
toast.error("An unexpected error occurred: " + error?.message);
}
}
}
})
I could add a manual check prior i.e. await stripe.retrievePaymentIntent(clientSecret);
but seems like a patch over the core issue
gleaming dragon
Yeah you're probably not redirecting properly
Like you just need to go through that flow again and improve your logging
And find out why you're able to just keep submitting payment
const { error } = await stripe.confirmCardPayment(
clientSecret,
{
payment_method: values["card"],
}
);
That above snippet doesn't pass a return url so the customer will stay on the same page. Likely an issue with the error handling after that
But you need to spend time debugging it
gleaming dragon
No problem