Checkout overlay throws a 404 in safari

[iampava]

In safari, when clicking the button to complete the Checkout Overlay flow (embed url) I get a 404 message.

Also, in the console I get a lot of errors regarding cross-origin requests, like this:

Blocked a frame with origin "ORIGIN_1" from accessing a frame with origin "https://js.stripe.com". Protocols, domains, and ports must match.

However, if I go in Chrome or Firefox, the problem doesn't happen. Nor do I see the error messages mentioned above.

If I understand correctly this happens because of some restrictions in Safari, and how it handles cross-site cookies. Then maybe we should document this in the developer docs.

To fix it I am using the Checkout URL without embed, and opening it in the same tab.

PS: I know this technically is not a problem with this SDK, since the URL is generated correctly. But I'm not sure where to raise the bug, so I'm doing it here.

[brankoconjic]

Thank you for bringing this to our attention. We're working on a fix.

[phomnack]

Is there any update on this? Seems like it's still throwing a 404. Chrome, Firefox, and Safari.

[brankoconjic]

@phomnack, can you share the code you used to create a checkout?

[orhan]

@brankoconjic, dev at the project with @phomnack here. 👋🏼

Here's how we're creating the checkout using the @lemonsqueezy/lemonsqueezy.js library:

const variantId = LEMON_SQUEEZY_B2C_GOLD_VARIANTS[interval]
const checkoutOptions: NewCheckout = {
  productOptions: {
    enabledVariants: [parseInt(variantId)],
    redirectUrl: `${process.env.NEXT_PUBLIC_BASE_URL}/?paid=[order_id]`,
    confirmationButtonText: 'Continue',
  },
  checkoutOptions: {
    embed: true,
  },
  checkoutData: {
    email: user.email,
    name: user.name,
    custom: {
      user_id: user.id,
      is_business: 'false',
      interval,
      plan,
    },
  },
}

createCheckoutRequest(
  process.env.LEMON_SQUEEZY_STORE_ID as string,
  variantId as string,
  checkoutOptions,
).then(checkout => {
  const url = checkout.data?.data?.attributes?.url
  res.status(200).send({status: 'success', url})
})
} catch (error) {
console.log('General error: ', error)

res.status(500).send({
  status: 'failed',
  error: error,
})
}

The return url gets then opened on an iFrame overlay, which errors out with a 404 on some devices (not on all though, it works fine on my macOS and Android devices for example)!

[phomnack]

Hi @brankoconjic does what @orhan wrote help? Please let me know if there's anything else we can do.

[brankoconjic]

We're trying to recreate this on our end. I will keep you updated.

[brankoconjic]

@orhan, do you still have this issue? This seems it is cache related and I'm unable to replicate it on my end.

[phomnack]

@brankoconjic yes the issue is still there so we changed our entire sign-up flow structure

[brankoconjic]

Can you give me more information on which devices exactly does this happen? Does it works without the embed option?

[orhan]

@brankoconjic It primarily happened on iOS/iPhones, changing the embed option had no effect. We showed the checkout in an iFrame on top of the site's content, so there might have been some security issues with that?

It mostly worked fine on any other platform though!