Doing a client-side redirect from a Checkout UI extension

Retired Boards Appdev Extensions
,

Topic summary

A developer needs to implement client-side redirection from a button within a Checkout UI extension built with Remix.

Proposed Solution:

  • Use the Button component from Shopify’s ui-extensions-react library
  • Include a redirection URL directly in the Button component’s props
  • The solution involves importing ReactExtension and Button from @shopify/ui-extensions-react/checkout
  • Export a default ReactExtension targeting 'purchase.checkout.block.render'

Status: One response provided with code snippet guidance, but the discussion appears to be awaiting confirmation or further clarification on implementation details.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

I have a Checkout UI extension that is a button. I would like to redirect the user to a specific URL after the user press this button.

Is there a way to do it inside the Checkout UI extension + Remix? Any example?

3 Likes
2

Hello @Noghartt , you can achieve this by utilizing the Button component provided by Shopify’s ui-extensions-react library. Simply include a redirection URL in the Button component’s props.

import { reactExtension, Button } from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
  'purchase.checkout.block.render',
  () =>