---
title: Redirect to the plan selection page
description: >-
  Learn how to redirect merchants to your plan selection page after they install
  your React Router app.
source_url:
  html: 'https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page'
  md: 'https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md'
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#requirements)
* [Check subscription status in React Router](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#check-subscription-status-in-react-router)
* [Next Steps](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#next-steps)

# Redirect to the plan selection page

A common pattern is to redirect merchants to your [plan selection page](https://shopify.dev/docs/apps/launch/billing/managed-pricing#plan-selection-page) after they install your app. However, because [embedded apps](https://shopify.dev/docs/apps/build/admin) are rendered in the Shopify admin inside an iframe, they don’t have permission to manipulate the parent browser window, including redirects.

[Shopify's React Router package](https://shopify.dev/docs/api/shopify-app-react-router) provides utilities that allow apps to redirect elsewhere in the Shopify admin. This ensures a smoother, more seamless user experience while working within iframe constraints.

***

## Requirements

* An embedded app [scaffolded with React Router](https://shopify.dev/docs/apps/build/scaffold-app). This includes the [@shopify/shopify-app-react-router](https://shopify.dev/docs/api/shopify-app-react-router) package by default.
* Your app needs to have [Managed Pricing enabled](https://shopify.dev/docs/apps/launch/billing/managed-pricing#opt-in-to-managed-pricing), with at least one plan configured.

***

## Check subscription status in React Router

The example code in this section demonstrates the basic steps required to implement this behavior in a React Router app:

1. Check if the logged-in user has an active app subscription.
2. If not, then redirect to the plan selection page.
3. If there is an active subscription, then render your app’s content normally.

The [@shopify/shopify-app-react-router](https://shopify.dev/docs/api/shopify-app-react-router) package includes built-in utilities for handling [billing queries](https://shopify.dev/docs/api/shopify-app-react-router/apis/billing#example-check) and [redirects](https://shopify.dev/docs/api/shopify-app-react-router/authenticate/admin#example-redirect). You can use these utilities in your [React Router loaders](https://reactrouter.com/start/framework/data-loading) to check the user’s plan subscription status and redirect if needed.

In this example, the subscription plan check runs at the app's root route, so it works no matter which app route the user arrives at.

The redirect uses the web URL for the plan selection page, which requires both the store handle and your app handle. The store handle is dynamic and should be extracted from the shop domain (for example, "cool-shop" from "cool-shop.myshopify.com"). The app handle is defined in your `shopify.app.toml` file.

```js
// app/routes/app.jsx


export const loader = async ({ request }) => {
  // Replace with the "app_handle" from your shopify.app.toml file
  const appHandle = "YOUR_APP_HANDLE";


  // Authenticate with Shopify credentials to handle server-side queries
  const { authenticate } = await import("../shopify.server");


  // Initiate billing and redirect utilities
  const { billing, redirect, session } = await authenticate.admin(request);


  // Check whether the store has an active subscription
  const { hasActivePayment } = await billing.check();


  // Extract the store handle from the shop domain
  // e.g., "cool-shop" from "cool-shop.myshopify.com"
  const shop = session.shop; // e.g., "cool-shop.myshopify.com"
  const storeHandle = shop.replace('.myshopify.com', '');


  // If there's no active subscription, redirect to the plan selection page...
  if (!hasActivePayment) {
    return redirect(`https://admin.shopify.com/store/${storeHandle}/charges/${appHandle}/pricing_plans`, {
      target: "_top", // required since the URL is outside the embedded app scope
    });
  }


  // ...Otherwise, continue loading the app as normal
  return {
    apiKey: process.env.SHOPIFY_API_KEY || "",
  };
};
```

***

## Next Steps

* Learn more about [Managed Pricing](https://shopify.dev/docs/apps/launch/billing/managed-pricing)

***

* [Requirements](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#requirements)
* [Check subscription status in React Router](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#check-subscription-status-in-react-router)
* [Next Steps](https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page.md#next-steps)