Redirecting Users to Billing Confirmation URL in Embedded Shopify App

[sanjaymakwana05]

Hi @lizkenyon I hope you are doing well. thank for your help. and suggestion or the new issue.

Issue:

I am trying to redirect users to the billing confirmation URL using the following code:

The URL logged in is_return is correct, and it works when manually opened in a browser. However, since our app is embedded, it does not open the billing confirmation URL as expected.

P
Expected Behavior:

When a user initiates a subscription plan, they should be redirected to the billing confirmation URL within the embedded Shopify app environment.

Observed Behavior:

The redirect does not work inside the embedded app.

Steps to Reproduce:

1. Create the shopify remix app using the CLI
2. run the app it was working expected.
3. add the billing plan as the document mention. I have implemented the monthly fix plus usage base. [ [Shopify help doc link ](Combine time and usage-based subscriptions)]
4. Yes for the fixed monthly plan it was working as expected this link it working expected [].
5. while the using the {Combine time and usage-based subscriptions} this feature us not working as expected here i have reported the issue
6. if I am using the direct Graphql API it was not redirecting

Node js Package version
"dependencies": { "@prisma/client": "^6.3.1", "@remix-run/dev": "^2.7.1", "@remix-run/node": "^2.7.1", "@remix-run/react": "^2.7.1", "@remix-run/serve": "^2.7.1", "@shopify/app-bridge-react": "^4.1.2", "@shopify/polaris": "^12.0.0", "@shopify/shopify-app-remix": "^3.7.3", "@shopify/shopify-app-session-storage-prisma": "^6.0.1",

Trigger the subscription plan creation.

Capture the confirmationUrl.

Attempt to redirect using return redirect(is_return);.

The redirection does not occur within the embedded app.

Potential Cause:

Since the app is embedded, Shopify might block direct navigation. This may require using the App Bridge's Redirect component to handle the redirection properly.

I am trying to redirect users to the billing confirmation URL using the following code:
I am referring this Doc - https://shopify.dev/docs/apps/launch/billing/subscription-billing/combine-time-and-usage

let is_return = plan.data.appSubscriptionCreate.confirmationUrl;
console.log("is_return :- ", is_return);

return redirect(is_return);

The URL logged in is_return is correct, and it works when I manually open it in a browser. However, since our app is embedded, it does not open the billing confirmation URL as expected.

Could you please help me with a solution for handling this redirect properly in an embedded Shopify app?

Thank you!

[lizkenyon]

Hi 👋

Could you please take a look at the billing documentation for the Shopify Remix package. This will handle your redirects for you correctly.

e.g

  const { billing } = await authenticate.admin(request);
  const billingCheck = await billing.require({
    plans: [MONTHLY_PLAN],
    onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),
  });

[sanjaymakwana05]

Hi @lizkenyon Thank you so much for your help earlier—your guidance on setting up monthly and yearly recurring subscriptions worked perfectly!

Now, I’m looking to combine both time-based and usage-based billing in my Shopify app. I noticed the usage-based part was previously flagged as a feature request , and I’m not sure if it's fully supported in the latest version yet.

I'm currently using the Shopify Remix App Template (V3) and referencing this section in the docs:
🔗 https://shopify.dev/docs/api/shopify-app-remix/v3/apis/billing#billing-propertydetail-createusagerecord

My goal is to allow merchants to subscribe to a monthly or yearly plan with additional usage charges counted and billed dynamically. I’ve tested the Remix example, but there were some gaps when trying to implement usage billing alongside recurring plans.

Could someone from the team please confirm:

Is combined time + usage-based billing officially supported in the current Remix V3 template?

If yes, are there any examples or updates planned to support this flow?

If no, is it still being tracked as a feature request?

Thanks again for all your amazing work—loving the direction the Remix app template is going!

[sanjaymakwana05]

more info about the my code base .

` const { admin, session, redirect } = await authenticate.admin(request)
... code for the create app subscription.
.. getting the correct confirm URL from the shopify graphQL.

return redirect(is_confirmationUrl, { target: '_top' });   `

[lizkenyon]

Yes, usage based billing is supported! And yes you can have recurring and usage based billing. You will need to define two lineitems in your billing config. A usage based billing, and a recurring billing.

Something similar to this.

const shopify = shopifyApp({
  // ...etc
  billing: {
    [USAGE_PLAN]: {
      lineItems: [
        {
          amount: 5, //usage max
          currencyCode: 'USD',
          interval: BillingInterval.Usage,
        },
         {
          amount: 5,
          currencyCode: 'USD',
          interval: BillingInterval.Every30Days,
        }
      ],
    },
  }
});

[sanjaymakwana05]

@lizkenyon Thanks lot for the Solution it was working as expected.