ACEilla | Stripe Developers | Page 1

regal wingBOT Jun 20, 2023, 1:42 AM

#

vivid sun Jun 20, 2023, 1:43 AM

#

hello! do you have a URL which we can access to take a look at?

modern yacht Jun 20, 2023, 1:46 AM

#

Hi Alex, https://atomicpomlabs.com

Atomic Pom Labs

Web site created using create-react-app

vivid sun Jun 20, 2023, 1:49 AM

#

it's working fine for me on safari

#

#

could be something specific to your device perhaps? Have you gotten a colleague to test it on their device instead?

modern yacht Jun 20, 2023, 1:55 AM

#

I just tried it using Safari on my brothers iPhone and this is what happened.

#

#

Also, before he disabled the pop up block setting he didn’t get this dialogue box.

vivid sun Jun 20, 2023, 2:04 AM

#

can you share your code snippets for how you're implementing the Stripe Checkout?

#

it sounds like you're performing a redirect with a new tab e.g. window.open(session.url, '_blank');

It's a known behaviour : https://melvingeorge.me/blog/open-new-tab-without-getting-blocked-by-browser-javascript

modern yacht Jun 20, 2023, 2:20 AM

#

Yes, I am sending the stripe checkout session url from the back end to the front end and passing it into window.open(). Should I just do res.redirect() in the backend?

#

Or do I have to handle that res.redirect() response on my frontend somehow?

#

This is what I have in my backend currently for the response:

res.send({ url: session.url });

vivid sun Jun 20, 2023, 2:22 AM

#

you can either do a redirect in the backend, or pass the url to your frontend and do a redirect there. The frontend redirect can be done using window.location

modern yacht Jun 20, 2023, 2:23 AM

#

And in the frontend where I receive this response I have this line of code:

return window.open(data?.url);

"data" is what receives the response from the backend.

vivid sun Jun 20, 2023, 2:24 AM

#

try using window.location instead. the problem that you're facing now is because you're trying to open it in a new tab without it being explicitly triggered by a customer.

modern yacht Jun 20, 2023, 2:24 AM

#

Ok, I'll give that a try and let you know. Thank you.

#

Unfortunately window.location did not work that way I have it implemented.

vivid sun Jun 20, 2023, 2:32 AM

#

can you explain more? what specifically didn't work?

modern yacht Jun 20, 2023, 2:34 AM

#

When I clicked the "Confirm Payment" button to get redirected to the Stripe Checkout on my iPhone/Safari, nothing happened and the re-direct didn't happen.

vivid sun Jun 20, 2023, 2:35 AM

#

can you paste the code snippet where you're implementing window.location?

modern yacht Jun 20, 2023, 2:37 AM

#

//request
const { data } = await axios.post(${baseURL}/orders, {
orderItems,
shippingAddress,
totalPrice,
});
return window.location(data?.url);

#

Apologies for the poor formatting.

#

This snippet of code is within the try of a trycatch block, and the trycatch is within a redux asyncThunk.

#

Is this enough context?

vivid sun Jun 20, 2023, 2:43 AM

#

i'll get back to you in a bit

modern yacht Jun 20, 2023, 2:47 AM

#

ok

vivid sun Jun 20, 2023, 2:53 AM

#

oh oops, i think the actual function is window.location.href

modern yacht Jun 20, 2023, 2:54 AM

#

Ok, I will try that.

#

Still experiencing the same behavior as before.

vivid sun Jun 20, 2023, 3:01 AM

#

window.location.href(data?.url); this isn't how window.location.href is used. It's usually something like window.location.href = "someurl"

modern yacht Jun 20, 2023, 3:06 AM

#

I see, I will try that and a few other things and let you know. Thank you

#

I got it to work.

#

vivid sun Jun 20, 2023, 3:10 AM

#

great!

modern yacht Jun 20, 2023, 3:10 AM

#

The .then() is getting its action from this:

#

Thank you very much for the help.

#ACEilla