Issue while redirecting to Billing approval page in remix embedded application.

[Laitkor]

Hello,

So basically I am working on an application and I have implemented the billing api successfully. It was working fine earlier but recently I started to get an issue.

As soon as the user lands on my application just after the installation, it automatically gets redirected to billing page if he has no current active subscriptions. But during that redirection, I encounter an error (please refer to image below)

But after a second or two, it gets redirected to billing page without me refreshing the page.

This would not be an issue if the user uses the application with their desktop or laptop but if he tries to access the application from the mobile app. He will encounter below error.

Any help is truly appreciated as it is stopping me to move further with my deployment process.

For the reference I have added the code below as well.

import { authenticate, MONTHLY_PLAN } from "../shopify.server";

export const loader = async ({ request }: any) => {
  const { billing, session } = await authenticate.admin(request);
  let { shop } = session;
  let myShop = shop.replace(".myshopify.com", "");

  await billing.require({
    plans: [MONTHLY_PLAN],
    onFailure: async () =>
      billing.request({
        plan: MONTHLY_PLAN,
        isTest: true,
        returnUrl: `https://admin.shopify.com/store/${myShop}/apps/${process.env.APP_NAME}/`,
      }),
  });

  return null;
};

Inside app._index.tsx

//Run the active subscription qiery to  get current status of user's subscription
export async function loader({ request }: any) {
  const { session, admin, redirect } =
    await authenticate.admin(request);
  let { shop } = session;

  try {
    const result = await admin.graphql(
      `
    #graphql
      query Shop {
        app {
          installation {
            launchUrl
            activeSubscriptions {
              id
              name
              createdAt
              returnUrl
              status
              currentPeriodEnd
              trialDays
            }
          }
        }
      }
    `,
      { variables: {} },
    );

    const resultJson = await result.json();
    const activeSubscriptions = resultJson.data.app.installation;

    //If there are no current active susbcription, the user will automatically will be redirected to billing page
    if (activeSubscriptions.activeSubscriptions.length < 1) {
      return redirect("/app/buyPro");
    }
    return { activeSubscriptions, shop };
  } catch (error: any) {
    throw error;
  }
}

[ulas1]

You can try using billing.require in app index too. onFailure can redirect. Remove graphql call in this case. Probably wouldn't help but give it a chance.

[Laitkor]

@ulas1  As expected, I am still facing the same issue.

Attached are the screenshots on desktop and mobile.

 

[Jannik-Wempe]

You can not use an arbitrary full URL as a `returnUrl`.

Instead, use the apps `launchUrl` that you can get from the `currentAppInstallation` query.

This is the gist of how I do it (note the link to the GitHub issue that helped me with the same issues):

export async function buyCredits({
	admin,
	session,
	billing,
	plan,
	returnPath = '/app/preferences',
}) {
	// using launchUrl to construct a returnUrl that is not the apps index page
	// see: https://github.com/Shopify/shopify-app-js/issues/476#issuecomment-1806671955
	const { launchUrl } = await getAppInstallation(admin);
	const returnUrl = `${launchUrl}${returnPath}?shop=${session.shop}`;

	return await billing.request({
		plan,
		returnUrl,
		isTest: TEST,
	});
}


export async function getAppInstallation(admin) {
	const response = await admin
		.graphql(/* GraphQL */ `
			query CurrentAppInstallation {
				currentAppInstallation {
					id
					launchUrl
				}
			}
		`)
		.then((response) => response.json());

	const data = response.data
	return data.currentAppInstallation;
}

[Laitkor]

Hi Jannik-Wempe,

I appreciate your suggestion earlier, but it didn't resolve my issue either. It seems the problem isn't related to the return URL as various solutions suggesting changes there haven't worked for me.

Interestingly, the app functions perfectly when I removed the billing component. The main issue lies in redirecting to the billing page. The return URL determines where the user goes after billing approval. When using the application on my PC, it mostly works, though there's a brief 500 error followed by a page refresh and redirection to the billing page. However, on the mobile app, this process breaks down.