Shopify Embedded App Redirection Issue: Seeking Help with Remix and Billing Flow

Shopify Discussion
,
1

I’m implementing a subscription billing feature. When a user clicks on the pricing option, the following code is executed:

const billingCheck = await billing.require({
  plans: [selectedPlan],
  isTest: true,
  onFailure: async () => billing.request({
    plan: selectedPlan,
    returnUrl: `${process.env.SHOPIFY_APP_URL}/auth/sales?plan=${btoa(selectedPlan)}&shop=${btoa(shop)}&success=True`,
  }),
});

Upon successful billing confirmation by the user, they are redirected to the sales page.

After redirection, the loader function is triggered:

export async function loader({ request }) {
  const { admin, billing } = await authenticate.admin(request);
}

If I exclude the await authenticate.admin(request); line, the redirect occurs outside of Shopify. However, when I include this line in the loader function after the redirect, I receive a 302 status and the user is prompted for the shop URL, rather than displaying the sales page within the embedded app.

I developed the app using Remix and this is the last unresolved issue. What could be the underlying problem?

1 Like
2

Did you get solution to this?

3

Did anyone found the solution

4

I am not sure if this is the solution but it works for me

const billingCheck = await billing.require({
          plans: [selectedPlan],
          isTest: true,
          onFailure: async () => billing.request({
            plan: selectedPlan,
            returnUrl: `https://admin.shopify.com/store/${myShop}/apps/${process.env.APP_NAME}/success?embedded=1&shop=${shop}&plan=${selectedPlan}&success=True`,
            isTest: true
          }),
        });