Skip to main content

Getting started with flat-rate billing

Flat-rate billing means charging a fixed amount per billing cycle. £99 per/year, £14 per/14 days and £20 per/month are all examples of this billing model.

Following this short guide will take you from zero to being up-and-running with a flat-rate billing model in your application.

1. Create your product in Salable​

Before you can start implementing Salable into your codebase, you will need to sign up for an account and create a product in the Salable dashboard.

You will need to create a product, the plans that you want the users to be able to subscribe to, and any features your users should be able to access depending on their subscription.

As an example, if your application was a music streaming service. You may offer “Basic” and “Pro” plans, with “Ad-Free Listening”, “Curated Playlists”, and “Unlimited Playlists” as your features.

2. Accepting payment​

To allow users to pay for access to your product, you will need to dynamically generate a checkout link.

When a user successfully checks out, a subscription is created for the provided plan. The plan, through its features, will determine what level of access the grantee gets to your product.

The Grantee, provided when creating a checkout link, is a string that uniquely identifies who the seat on the subscription belongs to. As an example this could be:

  • A Trello board ID, granting the board's users access to the seat.
  • An organisation ID, giving the entire team access to the seat.
  • A user ID, giving an individual user access to the seat.

Read The Grantee System for further detail on Grantees and how Subscriptions are assigned.

The Owner being passed in represents the entity that is purchasing the subscription. For example, in many systems this would be the organisation ID or the user's ID.

import { getCheckoutLink } from '@salable/js'

const { checkoutUrl } = await getCheckoutLink({
  apiKey: 'YOUR_SALABLE_API_KEY', // you can find this in the Salable dashboard.
  planUuid: 'YOUR_PLAN_ID', // the ID of one of the plans you created in the Salable dashboard.
  successUrl: 'https://your.app/payment-success'
  cancelUrl: 'https://your.app/payment-cancelled',
  granteeId: 'A_GRANTEE_ID',
  owner: 'AN_OWNER_ID',
});

3. Performing feature checks​

In your application, you will only want to allow the grantee to perform certain actions if they have an active subscription.

import { getGrantee } from '@salable/js';

const { hasCapability } = await getGrantee({
  apiKey: 'YOUR_SALABLE_API_KEY',
  productUuid: 'YOUR_PRODUCTS_UUID',
  granteeId: 'A_GRANTEE_ID',
});

const granteeHasFeature = hasCapability('YOUR_FEATURE_NAME');

const granteeIsOnPlan = hasCapability('YOUR_PLAN_NAME');

As seen in the above example, you can perform feature checks based on the plan or the features on it. We would recommend that in most cases you grant access based on the features. This recommendation is covered in greater detail in The Salable Way.

4. Allowing subscription cancellation​

The final thing needed to have the basic flow implemented is to allow your users to cancel their subscriptions from within your application.

You have full control over whether the subscription cancels immediately or at the end of the current cycle by providing the when query parameter.

import { Salable } from '@salable/node-sdk';

const salable = new Salable('YOUR_SALABLE_API_KEY', 'v2');
await salable.subscriptions.cancel(
  'YOUR_SUBSCRIPTION_ID',
  { when: 'end' }, // or 'now' if you want it to cancel immediately
);

5. Further considerations​

You now have a basic but fully functional flat-rate billing flow set up in your application. Your users can pay for a plan, get access to limited features, and cancel their subscription.

Depending on your application, you may also want to implement the following:

If you want to see a fully implemented demo in action, check out our Next.js flat-rate billing demo or our Miro flat-rate billing demo.