#amusedgrap-paymentintent-clientsecret
frosty hull
@languid dragon why do you need the client secret after confirmation? It's confirmed at that point (and you had the secret before since it's required for confirmation)
languid dragon
Well, I'm following the guide here (https://stripe.com/docs/payments/quickstart) and it seems to need the payment intent after confirmPayment is executed, to get the status.
frosty hull
the PaymentIntent is returned as part of confirmPayment you don't need to do anything else
What is blocking you exactly?
languid dragon
i think confirmPayment only returns an error if there is one, the code on the example shows that there’s a url search param for the client secret, which is gets, then finds the intent by that secret.
urban heath
I'm not sure I understand, can you clarify the question?
languid dragon
I'm not sure I understand, can you clarify the question?
Yeah let me try again here-
After the await stripe.confirmPayment() function is ran, it reloads the page, and adds an empty URL search query to the url (just adds ? to http://localhost:3000/cart/checkout)
In that search query, there should be payment_intent_client_secret, according to the quickstart docs that I sent above. It should then proceed to retrieve the payment intent from that secret, then check the status, and continue from there. (i.e. display a message based on the status of the intent)
However my issue is that I don't get that search query, so I'm never able to see if the payment was completed or not.
urban heath
can you paste your confirmPayment() function here? are you passing return_url ?
languid dragon
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "http://localhost:3000",
},
});
If you need any more code let me know.
tribal matrix
Hello! Can you share the code you're using to create the Payment Element and your stripe.confirmPayment code?
Oh, my bad, I was scrolled up!
So with that code you're redirected to http://localhost:3000?
Correct?
languid dragon
im not redirected at all, the page just reloads (or form submits, not sure), and the ? is appended after the url (http://localhost:3000/cart/checkout?)
tribal matrix
Are there any warnings or errors in the web dev console in the browser?
languid dragon
I can't see any, as the page reloads. I can try to see if I can disable the form submission
tribal matrix
What browser are you using?
languid dragon
Firefox; I enabled Persist Logs but still no errors or anything
tribal matrix
Can you share more of your code? I'm particularly interested in the code used to create the Payment Element and the code used to handle the error from stripe.confirmPayment.
tribal matrix
Looking...
Hm, let's try this:
- Go to your payment page
- Open the dev tools in Firefox
- Go to the Network tab
- Click on the gear and make sure Persist Logs is enabled
- Go through the payment process
- After payment is complete look at the network logs and see what URL you're redirected to by the Payment Element (and share a screenshot if possible)
languid dragon
I seem to be navigated to /cart/checkout?
languid dragon
i moved the submit handler to the button since it wasn't working with the form, but i'll move it back in the case that it will work now lol
hm yeah if i capture the form submission it doesn't work at all, handleSubmit never fires
wait i might know, gimme a second here
tribal matrix
Can you move the Payment Element outside the form entirely?
languid dragon
it might be that its a form inside a form, so i'll attempt to fix that
tribal matrix
Oh, wait.
Try adding type="button" to your <button>
<button> elements by default submit the form they're contained within, but we don't want to do that.
Their default type is submit, so changing the type to button makes them act differently and not submit the form.
languid dragon
now nothing happens
tribal matrix
Can you share the updated code?
languid dragon
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState<string | null | undefined>(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (!stripe) {
return;
}
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
if (!clientSecret) {
return;
}
stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
switch (paymentIntent?.status) {
case "succeeded":
setMessage("Payment succeeded!");
break;
case "processing":
setMessage("Your payment is processing.");
break;
case "requires_payment_method":
setMessage("Your payment was not successful, please try again.");
break;
default:
setMessage("Something went wrong.");
break;
}
});
}, [stripe]);
const handleSubmit = async (e: any) => {
e.preventDefault();
console.log('dshhjklfds')
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
console.log('hhdsjkfhjkdss')
setIsLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "http://localhost:3000/cart/checkout",
},
});
console.log(error)
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
setMessage(error.message);
} else {
setMessage("An unexpected error occured.");
}
setIsLoading(false);
};
return (
<form id="payment-form" className="p-5" onSubmit={handleSubmit}>
<PaymentElement id="payment-element" />
<button type="button" disabled={isLoading || !stripe || !elements} className="w-full px-3 py-2 my-3 font-semibold text-white bg-blue-500 rounded-md">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>
);
}
So you click on the button and nothing happens at all? Does console.log('dshhjklfds') log out?