Our goal is to create a simple button in a Checkout Extension that opens a new tab.
The Components UI doesn't support the components we need for the main value prop of the app. Therefore, we have to temporarily move the customer to a new tab to render our app for a short period of time before redirecting them back to the checkout by closing out our tab.
The problem we're facing is that `<Button>` elements can only open external links via the `to` prop. However, if a `<Button>` only has a `to` prop instead of an `onPress`, the `<Button>` will render as a `<Link>` instead.
This a big issue because it's not clear that clicking this link this is the primary CTA for the extension.
Is there any way to use a <Button> onPress to open a new tab?
The window object isn’t accessible within the Checkout UI worker thread.
So you’re limited to using a to parameter, which isn’t a good experience because <Button>’s that only have a to field are rendered as inline <a>’s without proper styling to make it the primary CTA of the checkout extension.
This may force us to wrap an `<Image>` of a button with a `<Link>` to get the behavior we need. Which is not ideal because it bypasses the branding API.
We're also experimenting with hacking the `<Pressable>` to make a pseudo button, but the styling is very limited.
Hi Dylan - as you've noted the window object isn’t accessible within checkout extensions so this will make it challenging to trigger the opening of a new tab. I've connected with the product team working on this to let them know your usecase and how our limitations are affecting the functionality of your app.