If you are building a Shopify app as a business, billing is part of the product experience. Merchants need a clear plan, a smooth approval flow, and predictable access to the features they paid for.
Why Billing Matters
Billing turns a useful app into a sustainable product. The goal is not only to charge merchants, but to help them understand the value of each plan and upgrade at the right moment.
Types of App Charges
One-Time Charges
Use one-time charges for setup tools, migrations, small utilities, or features that do not require ongoing infrastructure.
Recurring Subscriptions
Subscriptions are the most common model for SaaS-style Shopify apps. They work well when the app creates ongoing value.
Usage-Based Billing
Usage-based pricing fits apps where cost or value scales with activity, such as messages sent, orders processed, AI credits, or records synced.
Free Trials
A free trial gives merchants time to experience value. Design onboarding so they reach the first useful result quickly.
Billing in React Router Apps
Apps scaffolded with Shopify’s React Router template include helpers through @shopify/shopify-app-react-router. A common pattern is to check billing from the app layout loader.
export const loader = async ({ request }) => {
const { billing, redirect, session } = await authenticate.admin(request);
const { hasActivePayment } = await billing.check();
if (!hasActivePayment) {
const storeHandle = session.shop.replace('.myshopify.com', '');
return redirect(
`https://admin.shopify.com/store/${storeHandle}/charges/YOUR_APP_HANDLE/pricing_plans`,
{ target: '_top' }
);
}
return { ok: true };
};Handling Billing State
Do not check billing only during install. Check paid routes and important actions. If a merchant loses access, explain what happened and show a clear path to upgrade or restore billing.
Gating Features
Feature gates should be friendly. Tell merchants what is locked, why it is locked, and what plan unlocks it.
if (!hasActivePayment) {
return json({
locked: true,
message: 'Upgrade to sync more than 50 products.',
});
}Testing Billing
Test first install, plan approval, returning to the app, cancellation, reinstall, and plan changes. Confirm your app handle, pricing page URL, and top-level redirect behavior.
Common Billing Errors
If a redirect does nothing, check iframe-safe redirect handling. If the plan page returns 404, verify your app handle and managed pricing setup. If paid features stay locked after approval, re-run billing checks after the merchant returns.
Next Steps
Start with one simple plan, centralize billing checks, and write copy that helps merchants understand the value of upgrading.
Learn to build a complete monetized Shopify app in the course on codewith Mehedi.
