Shopify Question posted in
The Shopify help center can be found here.

How to redirect users to Shopify plan page in a Shopify App using Remix?

I’m developing a Shopify app using Remix, and I want to redirect users to the pricing plan page I’ve set up for my app in the Shopify admin.

Here’s the plan page link: https://admin.shopify.com/store/{store_handle}/charges/{app_handle}/pricing_plans

I’m using App Bridge for managing Shopify functionalities. Below is a simplified version of my App.jsx file:

  <ui-nav-menu>
    <Link to="/app/sections">Sections</Link>
    <Link to="/app/bundles">Bundles</Link>
    <Link to="/app/emails">Email templates</Link>
    <Link to="/app/my-library">My Library</Link>
    <Link to="/app/helpcenter">Help Center</Link>
    <Link to="/app/request-section">Request Section</Link>
    <Link to={`shopify://admin/charges/${appHandle}/pricing_plans`} rel="list">Plans</Link>
  </ui-nav-menu>

However, the above code doesn’t seem to work as expected. I’m not sure if I am implementing the redirect correctly using App Bridge. My goal is to redirect the user to the Shopify admin plan page whenever they access the app.

Is there a better approach to handle this, or am I missing something with App Bridge?

Any help or guidance would be greatly appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I am unable to redirect to the Shopify payment page from the app.jsx file. I have created a new app.pricing.jsx page and added it to the app.jsx file. Now redirect the user to the Shopify payment page from the pricing page. Below is the code for my app.pricing.jsx page code.

    import { authenticate } from "~/shopify.server";
import { useLoaderData } from "@remix-run/react";
import {get_shop} from "../model/API";

export async function loader({ request }) {
  try {
    const { session, admin } = await authenticate.admin(request);
    const shop = session?.shop;

    if (!shop) {
      throw new Error("Shop information not found in session");
    }

    const shop_name = shop.split(".")[0];
    const app_name = process.env.APP_NAME;

    let shop_data = await get_shop(admin.rest, session);
    shop_data = await shop_data?.data[0];

    const data = {};
    data['shop_name'] = shop_name;
    data['app_name']  = app_name;
    return { data }

  } catch (error) {
    console.error("Error in loader:", error);
    return { data: { shop_name: null, app_name: null, error: error.message } };
  }
}

const Plan = () => {
  const { data } = useLoaderData();

  const shop_name = data?.shop_name;
  const app_name  = data?.app_name;

  console.log('allow_subscription====>', allow_subscription);

  if (shop_name && app_name) {
    try {
      open(`https://admin.shopify.com/store/${shop_name}/charges/${app_name}/pricing_plans`, "_top");
    } catch (redirectError) {
      console.error("Error during redirection:", redirectError);
      return <div>Failed to redirect. Please try again later.</div>;
    }
  } else {
    return <div>Shop or app information is missing. Please check your configuration.</div>;
  }

  return null;
};

export default Plan;
    <ui-nav-menu>
  <Link to="/app/pricing">Pricing</Link>
</ui-nav-menu>


  2. 0

    If you are using the Remix template, you can do this by implementing the Pricing Plans page in the app.index.jsx file located at /app/routes. Your user will land on the pricing page whenever they open the app.

    Moreover, you can give it’s link in the Navbar too in the App.jsx file, if you don’t want to implement it in the index page. You would do something like:

          <NavMenu>
        <Link to="/app" rel="home">
          Selection Menu
        </Link>
        <Link to="/app/pricing_plans">Pricing Plans</Link>
      </NavMenu>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search