How to Implement a Billing Plan with Trial in a Shopify Remix App?

If you’re developing a Shopify app, then billing is one of the first steps to monetizing your app. As opposed to offering multiple tiers of plans, many apps simply start with one “Pro” plan and allow users to experiment with the app in a free trial period.

In this article, we will take you through the process of implementing a $9.99/month pro plan, which includes a 7-day trial period for the user, using Shopify’s Billing API and storing the billing info on the back end with Prisma.

What We’ll Build

• A single recurring billing plan (the Pro Plan)
• A 7-day free trial for first-time users
• A billing approval via Shopify’s process
• A way of tracking the status of the plan with a Prisma database

Steps to Implement a Billing Plan with Trial in a Shopify Remix App:

Step 1: Define Your Billing Plan in shopify.server.js

Shopify includes built-in billing support through shopifyApp(). This is the place where you will define your app’s billing model and trial days.

Here’s how this works:

// shopify.server.js
export const PRO_PLAN = "Pro Plan";

const shopify = shopifyApp({
  billing: {
    [PRO_PLAN]: {
      amount: 9.99,
      currencyCode: "USD",
      interval: BillingInterval.Every30Days,
      trialDays: 7, // Offer a 7-day trial
    },
  },
});

Explanation:

• amount: The monthly price of the plan.
• currencyCode: The currency used for billing.
• interval: How often the user will be billed (Every30Days, Annual, etc.).
• trialDays: The number of trial days the merchant gets before being billed.

By setting trialDays: 7, Shopify will automatically give the merchant a 7-day trial period before charging them.

Step 2: Trigger the Billing Flow

When the merchant clicks the Upgrade button in your app, you are going to have to create a billing request and redirect them to a Shopify billing confirmation screen.

// routes/billing.jsx

import { redirect } from "@remix-run/node";
import { authenticate, PRO_PLAN } from "../shopify.server";

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

  const confirmationUrl = await billing.request({
    plan: PRO_PLAN,
    isTest: false, // set to true during development
    returnUrl: `https://your-app.com/after-billing?shop=${session.shop}`,
  });

  return redirect(confirmationUrl);
}

Explanation:

• billing.request(): Shopify prepares the billing confirmation page.
• isTest: Set true if you are in development, so you are not charged for testing the billing requests.
• returnUrl: When the plan is approved, Shopify will return to this URL with the parameters charge_id and shop.

Step 3: Handle the Billing Redirect and Save Data

After the merchant approves the plan, Shopify will redirect the merchant to your returnUrl. In this loader function, you will need to capture the redirect query, update the merchant’s plan, and save the charge_id into your database.

// routes/after-billing.jsx

import { PrismaClient } from "@prisma/client";
import { redirect } from "@remix-run/node";

export const loader = async ({ request }) => {
  const prisma = new PrismaClient();
  const url = new URL(request.url);
  const shop = url.searchParams.get("shop");
  const charge_id = url.searchParams.get("charge_id");

  await prisma.session.update({
    where: { shop },
    data: {
      plan_id: 1, // your internal plan ID for Pro
      charge_id,
    },
  });

  return redirect(`/app/dashboard?shop=${shop}`);
};

Explanation:

• plan_id: You will need to define your own internal plan ID in your database.
• charge_id: This is returned to you from Shopify and can then be used for billing history in your app or cancellation.
• redirect(): Send the merchant back to your app’s dashboard.

Step 4: Add an “Upgrade” Button in Your UI

You can now let users start the billing flow by clicking a button in your app interface:

<Button onClick={() => fetch("/billing", { method: "POST" })}>
  Upgrade to Pro ($9.99/month – 7-day free trial)
</Button>

Alternatively, you can improve your in-app experience by making use of useFetcher() from Remix.

Optional: Use the Plan Data to Restrict Features

After you have saved the merchant’s plan status to your database, you can check the status in your loaders or middleware to restrict premium features only to paid users:

if (user.plan_id !== 1) {
  return redirect("/upgrade");
}

Conclusion

That’s it! You now have a complete billing system in your Shopify Remix app that uses a plan with a free trial!

Recap:

• Created a recurring billing plan that supports a trial.
• Triggered billing acceptance through Shopify’s Billing API.
• Saved subscription information using Prisma.
• Redirected users after billing is complete.

This simple billing approach works really well for most early-stage apps, and in the future, you can expand on it and add additional tiers.

FAQs

1. Can I change the trial days after the user accepts the plan? 

No, you can’t change trial days once a user accepts a subscription. You would need to cancel the subscription and then create a new subscription.

2. Can I have multiple billing plans?

Yes, you can offer multiple plans (Basic, Pro, Premium). Present options to the user and initiate the appropriate mutation accordingly.

3. How can I test billing on development stores?

You can test billing flows on development stores through Shopify without any charges. You can use it to test the full flow.