Checkout UI Extensions & Usage Billing API

[StevenFitzAA]

Hi,

I have a question around a Checkout UI extension I am building and how this can read/write to the Billing API for my remix app. 

Let's say to use my Checkout UI extension the user needs to initially set up a subscription. How are people going about checking in the React Typescript Checkout UI extension the state of this subscription for the store?

Or even things like I my billing config uses usage type for billing subscription, how can the extension detect if the user has hit the capped amount for the usage for that month incase you want to hide the extension or stop the functionality etc?

I know in the embedded app pages you can query things using billing API in your remix app etc, but what's the way forward for Checkout UI extension to read the subscription/billing state for the store?

[bootsgridDev]

Have you found out the solution?

I'm also stuck in this , Please provide solution if you have solved this one.

[ShopifyDevSup]

Hey @StevenFitzAA  and @bootsgridDev . 

This is an interesting question. Looking at our documentation here, it is noted: 

An app extension isn’t an app. It's a mechanism that lets an app add features to certain defined parts of several Shopify user interfaces.

With this in mind, any billing API related calls you would need to use the admin API for those requests. 

As for enabling and disabling checkout UI extensions (for example when a capped amount is hit), we have a great post here that explains how to do that. 

The recommended approach is to use the available_if condition using an app metafield to control visibility https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration#conditional-app-...

Hope that helps. 

- Kyle G.

[bootsgridDev]

Hi @ShopifyDevSup 

Thankyou for the time you have taken to respond to my query.

But the post you have mentioned, using "available_if" attribute, which is working only in theme app extension. How can I execute this in my checkout ui extensions.

Example:   I want to enable my custom checkout field extensions(checkbox, textfield, select option components) only to my active subscribed users. Please explain how to do that.? I have stored my subscription status in  one metafield, how can I use it to enable or disable my checkout ui extensions in theme editor.