<Button> onPress component open new tab or style a <Link> as a button

Retired Boards Appdev Extensions

Topic summary

Goal: Provide a primary CTA in a Checkout Extension that opens an external experience in a new tab, then returns users to checkout, without losing prominent button styling.

Key constraints:

  • window is not accessible in the Checkout UI worker, so programmatic window.open/onPress isn’t possible.
  • with only a to prop renders as an inline , reducing CTA prominence.

Use cases impacted:

  • Upsells linking to product details without leaving checkout entirely (new tab preferred).
  • Manual payment methods requiring navigation to an external approval portal.

Shopify response:

  • Acknowledged limitation and shared the use case with the product team. No resolution or timeline provided.

Latest workaround/update:

  • supports the same to attribute (e.g., ), allowing link behavior with styling better suited to a CTA than . Documentation link included. This addresses styling, but it’s not confirmed to force a new tab.

Status:

  • Opening a new tab via onPress remains unsupported. Thread remains open; workaround improves CTA styling and linking, but the new-tab requirement is unresolved.
Summarized with AI on December 19. AI used: gpt-5.
1

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 onPress to open a new tab?

The window object isn’t accessible within the Checkout UI worker thread.

CleanShot 2024-02-04 at 07.25.34@2x.png
CleanShot 2024-02-04 at 07.25.34@2x.png902×162 33.5 KB

So you’re limited to using a to parameter, which isn’t a good experience because ’s that only have a to field are rendered as inline ’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.
3 Likes
2

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.

3 Likes
3

Hello, Liam :waving_hand: Do you know if there was any traction on this?

I’m stumbling into this issue with Upsells on the checkout, the use case is that one of the merchants wants the upsells to be clickable to go to the product page to get more info but they also do not want them to navigate away from the checkout entirely to potentially lose a sale, so a new tab would be ideal.

Thank you!

4

Also interested in this. One of the manual payment options needs to access their own portal to approve a customer.

What do we do? A button with a “to” doesn’t really stand out

1 Like
5

Also interested in this. Pressable says it’s good for replacing a Link when Link styling isn’t desirable, but then how do we actually link somewhere?

EDIT: lol it’s the exact same attribute, “to”. It can do exactly this and it works, e.g.

<Pressable to={ url }>

Documentation