#jrserqung_paymentelement-redirect
kind lakeBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1256362327079518281
📝 Have more to share? Add details, code, screenshots, videos, etc. below.
quartz windBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- jrserqung_api, 11 hours ago, 18 messages
cerulean ibex
@spring mauve Hello! I'm happy to help but I need a bit more details from you about what you are doing. You said "the web element" but we have dozens of elements. Can you explain exactly how you are integrating, what doc you are following and share the relevant bit of code that isn't working?
spring mauve
Here is a link for the docs I am using: https://docs.stripe.com/payments/quickstart
There isn't much to share at the moment, because everything works fine expect the fact that when you are using a card to complete the payment, and it is resulting successfully the handleSubmit function doesn't seem to run. Here is my code for that function:
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "{{route("order-success")}}",
},
});
console.log(error.payment_intent.id)
saveOrder(error.payment_intent.id);
// 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") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}
Sorry, the copy paste of the function looks quite bad
Note that their is a function "saveOrder" that I am trying to run regardless whether the payment is successful or not.
cerulean ibex
that function is to be called when you click on a submit button in your page. Did you set that up properly? The quickstart has ```document
.querySelector("#payment-form")
.addEventListener("submit", handleSubmit);
i did that exactly the same yeah
But in theory, that function should run anyway isn't is, not just when the payment has an error?
When i use the following card: 4000000000000002 (Decline Payment), the function does run tho, only not when the payment is successful becuase then it takes me to the confirmation page straight
cerulean ibex
Let me take a wild guess: the code works totally fine and you didn't realize that the page was reloading on success (because it redirects to your return_url)
Do this: ```async function handleSubmit(e) {
e.preventDefault();
console.log("I am in handle Submit!!!!");
setLoading(true);
return false;
try ^ that and see if the log appears
jrserqung_paymentelement-redirect
spring mauve
Okey, following the code it does work, but it appears the code after this code block does not run when the payment is successful:
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "{{route("order-success")}}",
},
});
Could it be that it only runs the code after this block if there are errors?
cerulean ibex
exactly 🙂
let me show you another trick: change return_url: "{{route("order-success")}}", to return_url: 'https://google.com',
try again and tell me what you see
spring mauve
But I do need the payment_intent_id before that block somehow, otherwise I cant instert the neccessary data to by db. how would I get that?
Many thanks for your help by the way, really hleps me out
cerulean ibex
try my trick first and then we can talk
spring mauve
okey
This trick doesn't seem to do anything for me, this "{{route("order-success")}}" is just pasting in a url at the end of the day for me
and it is what it should do so I can change the url dynamically
cerulean ibex
so you hardcoded https://google.com and nothing happened?
spring mauve
Well, took me there after the payment
cerulean ibex
well that's definitely something right? :p
That's exactly what I was trying to show you: after a successful payment we redirect you away from the page. So nothing in the code after confirmPayment() will ever run when it succeeds
spring mauve
My question is is there a way to get the payment_id inside the handleSubmit() fucntion before this code:
console.log("payment id here")
const { error } = await stripe.confirmPayment...
The reason for this is that I do need to insert the payment_id into my database before the user is redirected to the confirm page.
Regardless whether the payment succeeded or not
cerulean ibex
It doesn't really make sense as a question. What do you call a "payment id" exactly?
spring mauve
the payment intent's id like pi_123213
cerulean ibex
You know that id already, you created it.
somewhere else in your code you must have initialized PaymentElement with a client_secret for that PaymentIntent id, so you should already know the id
spring mauve
Ohh god... I am stupid 😄 Sorry... it's all fine now
Thanks for being patient with me 😄
cerulean ibex
no harm done, I can tell you we get that question a lot, it's hard to figure out the full state machine of this thing 🙂