Implementing Managed Pricing in Shopify Apps

Shopify Discussion
1

How does the implementation of the app look like when using managed-pricing as described in the following documentation?

https://shopify.dev/docs/apps/launch/billing/managed-pricing

I want to retrieve the usage status of the recurring_application_charges and redirect to the subscription page if it’s not active, but I’m unable to retrieve the usage status.

2

I’m also trying to wrap my head around this. How would Remix app look like using managed pricing model. Docs say shopify hosts that subscription page and url https://admin.shopify.com/charges/{app_handle}/pricing_plans is provided, but I can’t seem to find any information on how to use it in Remix app. As an example with “Manual Pricing” I do

await billing.require({
plans: [PLAN_NAME],
isTest: false,
onFailure: async () => billing.request({ plan:PLAN_NAME }),
});

to check if subscription is active and redirect request page. I should probably redirect to https://admin.shopify.com/charges/{app_handle}/pricing_plans but this page is outside the app context and all redirects seem to fail. If I enter that url manually it all works of course. Any example would be very valuable.

3

I have faced the same problem you described, the Shopify documentation did not mention how to proceed having this Managed Pricing enabled.

What I ended up doing was:

  • Create you plans array in your code using the same name you have used when you have set the pricing plans

  • In the app main page loader you will be able to retrieve the subscription plans enabled, then you won’t be able to redirect to the price managed page from the loader but you can set on the settings that will be used front end the information regarding the plan and also the shop name.

  • In the front end side, having the properties related to the payment status on your settings object, you can redirect the user the managed payment page, eg:

useEffect(() => {
if (settings.redirectPayment) {
window?.top?.location.replace(`https://admin.shopify.com/store/${shopName}/charges/${appName}/pricing_plans`);
}
}, []);

It is just a workaround until they guide us into a solution.

4

I am also facing the same problem, the documentation says so much but so little at the same time.

5

hmm where is the settings object located?

6

@matas-bitbybit
For anyone who needs help with this, check out https://shopify.dev/docs/apps/launch/billing/redirect-plan-selection-page

7

That’s the way - it’s a modification to app.jsx with this:

// 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 json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
};