#Peta Stewart

1 messages · Page 1 of 1 (latest)

pastel pastureBOT
arctic bobcat
ebon obsidian
#

req_4LdeX7oJJNPodr

#

this is one. because the process works I didn't pick up the error until testing live

arctic bobcat
ebon obsidian
#

Yes, but as my code was built according to the docs... I don't see where this "double" request is happening. (The same second) Like a double hit.

#

My flow; purchase Page - get the secret (and some other stuff) checkout page - set up the stripe.elements & confirmPayment & retreive PaymentIntent

#

The error message is coming from the handleSubmit() - confirmPayment function

spare blade
#

👋 taking over for my colleague. Let me catch up.

ebon obsidian
#

OK

#

There was a check status code. I think perhaps it is unnecessary as the payment is redirected. But the error message was from the handleSubmit function.

spare blade
#

sorry for keeping you waiting

ebon obsidian
#

You must be busy : )

spare blade
ebon obsidian
#

async handleSubmit(e) {
e.preventDefault();
this.setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: App.origin + "/success",
},
});
if (error.type === "card_error" || error.type === "validation_error") {
this.showMessage(error.message);
} else {
this.showMessage("An unexpected error occurred.");
}
this.setLoading(false);
}

#

This is the code sending the error message, just before being redirected to success page

spare blade
#

could you please share the front-end code that is calling handleSubmit?

#

what framework are you using on the front-end?

ebon obsidian
#

nodejs

#

That is my frontend code

spare blade
#

nodejs is a backend programming language

#

are you using vanilla HTML/js or React or Next.js or something else

ebon obsidian
#

you must mean the html

#

I have an event listener

#

document
.querySelector("#payment-form")
.addEventListener("submit", (e) => {
CheckoutAPI.handleSubmit(e)
});

#

on the payment form

#

<form id="payment-form">

#

(FIY my frontend is a web app built with node & lit/html.js)

spare blade
#

could you add a console.log in your handleSubmit to see whether it's getting called twice?

ebon obsidian
#

ok

#

I will need to restart the backend server.... I will test a get back in bit.

spare blade
#

ok sure

ebon obsidian
#

Ok, I get the console.log and error message, but I am redirected before I can catch anything. So the console is cleared

spare blade
#

you have an option in the devtools that lets you keep the console even after a redirect

ebon obsidian
#

OK let me look...

spare blade
#

it's called preserve log

unknown.png
ebon obsidian
#

Ok, yes it is being called twice.

#

Perhaps in click function. Ok I will try and test.

#

I have one more question about the stripe domains

spare blade
#

are you add and event listener on click of the button as well?

ebon obsidian
#

I have set up my server to only accept requests from specific domains. Are there limited domains used for webhooks?

ebon obsidian
spare blade
ebon obsidian
#

Do I add them straight in like this? Or do I need to add the https...

spare blade
#

I'm not sure how you're doing your checks but this is more of an infrastructure thing rather than having to do it inside your code

ebon obsidian
#

At the bottom of here

#

It says to only trust if coming from these IPs. So I was just trying to integrate that into my CORS safe list

#

At the moment the server is blocking the webhooks ...

#

But thank you for your time. I will go and troubleshoot.

#

Take care

spare blade
#

yes but blocking IPs should be at the infrastructure level not at the code level

ebon obsidian
#

OK so you mean via domain settings like .htaccess

spare blade
#

it really depends on your infrastructure

ebon obsidian
#

I'll put that on my "To Learn" list : )

#

Thank you

spare blade
#

let me know if you need any more help

ebon obsidian
#

I disabled all the code for testing and on the eventListener I only get one console.log But when running the function, I get 2?

gritty hornet
#

Which log?

ebon obsidian
#

My code is somehow getting called twice. But I only called it once.

#

I thought to set up a global variable to prevent it from running twice.

gritty hornet
#

Can you share the exact code that is being called?

ebon obsidian
#

Ok the global variable prevent the code from being called twice....

#

Yes

#

I have an event listener

#

document
.querySelector("#payment-form")
.addEventListener("submit", (e) => {
e.preventDefault()
//console.log('call submit')
CheckoutAPI.handleSubmit()
});

#

This console log only reads once

#

But my code calls twice

#

async handleSubmit(){
console.log("Handle initiated Called")
console.log(initiated)
if(initiated == true){return}
else { initiated = true }
console.log("Handle Submit Called")
this.setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: App.origin + "/success",
},
});
if (error.type === "card_error" || error.type === "validation_error") {
this.showMessage(error.message);
} else {
this.showMessage("An unexpected error occurred.");
}
this.setLoading(false);
}

#

The code at the top, prevents the it from repeating.

gritty hornet
ebon obsidian
#

this global variable I added:

#

if(initiated == true){return}
else { initiated = true }

gritty hornet
#

What is CheckoutAPI?

gritty hornet
ebon obsidian
#

CheckoutAPI is my .js where I run the codes from (Inside my node web app)

ebon obsidian
#

Anyway, I don't understand what the problem was. Maybe just a glitch in my app. But that global variable (Band-Aid fix) stopped the errors.