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

Laitkor
Shopify Partner
3 0 1

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)

image.png

 

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.

image.jpg

 

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;
  }
}

 

Replies 2 (2)

ulas1
Shopify Partner
1 0 0

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
Shopify Partner
3 0 1

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

Attached are the screenshots on desktop and mobile.

9106ec80-9727-40a3-9bfd-d9096981c4c1.jpg

image (1).png