Doing a client-side redirect from a Checkout UI extension

[Noghartt]

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?

[Huptech-Web]

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',
  () => <Extension />,
);
function Extension() {
  return (
    <>
      <Button
        to='https://www.shopify.com/' // You can replace this URL with your redirection URL
      >
        Go to Shopify
      </Button>
    </>
  );
}