CODEWITHSUNDEEP
shopify-appremix.runshopify-app-bridge
Ronak Panchal
Ronak Panchal

Reputation: 149

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!

Upvotes: 0

Views: 436

Answers (3)

tiimgreen
tiimgreen

Reputation: 11

This should give you the answers you need: https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page

Code snippet taken from that doc:

// 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 } = await authenticate.admin(request);

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

  // If there's no active subscription, redirect to the plan selection page...
  if (!hasActivePayment) {    
    return redirect(`shopify://admin/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 || "",
  };
};

Upvotes: 0

Ronak Panchal
Ronak Panchal

Reputation: 149

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>

Upvotes: 0

Abdullah Shaukat
Abdullah Shaukat

Reputation: 34

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>

Upvotes: 0

Related Questions