Billing

Fully-featured billing on mobile is coming soon

For now, billing has a limited functionalities on mobile, we're mostly relying on the web app to handle billing.

We are working on a fully-featured mobile billing to help you monetize your mobile app easier. Stay tuned for updates.

Fetching customer data

When your user purchased a plan from your landing page or web app, you can easily fetch their data using the API.

To do so, just invoke the getCustomer query on billing router:

CustomerScreen.tsx

import { api } from "~/lib/api/trpc";
 
export default function CustomerScreen() {
  const { data: customer, isLoading } = api.billing.getCustomer.useQuery();
 
  if (isLoading) return <Text>Loading...</Text>;
 
  return <Text>{customer?.plan}</Text>;
}

You may also want to ensure that user is logged in before fetching their billing data to avoid unnecessary API calls.

CustomerScreen.tsx

import { api } from "~/lib/api/trpc";
 
export default function CustomerScreen() {
  const { data: user } = api.user.get.useQuery();
  const { data: customer } = api.billing.getCustomer.useQuery(undefined, {
    enabled: !!user, 
  });
 
  if (!user || !customer) {
    return null;
  }
 
  return (
    <View>
      <Text>{user.email}</Text>
      <Text>{customer.plan}</Text>
    </View>
  );
}

Billing

Fetching customer data

On this page