Use with Shopify App Bridge

Apps that use Hydrogen, Remix, or Shopify App Bridge will likely need to perform external redirects. When building with Mantle, some actions such as subscribing to a plan, require redirecting the user’s browser to a different URL. This external redirect is needed because embedded Shopify apps are securely iframe’d and can’t change the parent page’s url. The standard method that Shopify App Bridge provides is to use the Redirect action.

import { Redirect } from "@shopify/app-bridge/actions";
import { useContext } from "react";
import { Context as ShopifyContext } from "@shopify/app-bridge-react";

// in your component
const app = useContext(ShopifyContext);

const confirmationUrl = // url to redirect to from Mantle

// when you're ready to redirect to confirmationUrl
const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.REMOTE, confirmationUrl);

Our example app has a more complete example showing how this is done.