Walkthrough

Get started with UsageGate

Every click from an empty workspace to a paying customer, with screenshots: your plans, an API key, Stripe or another payment provider, and the code in your app.

  1. 01

    Your plans

    Set what each plan includes.

  2. 02

    API key

    Create the key your server uses.

  3. 03

    Payment gateway

    Connect Stripe, or another provider.

  4. 04

    Your code

    Free plan on sign-up, a check before each paid action.

Official walkthrough

From an empty workspace to a paying customer.

Pick how customers pay you, then tick each step as you go. Your progress is saved on this device. In a hurry? The 5-minute version.

01

Access rules

One table: plans across the top, feature keys down the side, and what each plan gets in each cell.

01.1Open Access rules

New workspaces already have Free, Starter and Pro filled in. Edit the numbers, or add your own plans and features.

  • Plans — Free, Starter, Pro (columns)
  • Features — ai_credits, export_pdf, seat_limit (rows)
  • Cells — type 10, leave empty, or tick on-off
Access rules · plan table

01.2Add or rename plans

Use + Plan for each thing you sell. Click the id under a plan name to copy it. Mark one free plan as Default free: that is where customers land when they cancel.

+ Plan · add a column

01.3Add the feature keys your code will ask about

Feature keys are the names your code asks about. Keep them short and stable: renaming one later means changing your code.

your app
await gate.canAccess(userId, "generate_videos");
await gate.consume(userId, "ai_credits", 1);
+ Feature · add a row

01.4Fill what each plan includes, then Save

Type a number for credits or limits, tick on/off features, leave a cell empty for "not included". Then Save.

Filled plan table · Saved
02

API key

Your server uses this key to talk to UsageGate. It is shown once, so copy it right away.

02.1Generate your secret key

Open API keys, press Generate key, and copy the gk_live_… value. Lost it? Revoke it and create a new one.

.env
USAGEGATE_KEY=gk_live_…

// server only — never expose this to the browser
const gate = new GateClient(process.env.USAGEGATE_KEY!);
API keys · shown once
03

Payment gateway

How customers pay you. Pick Stripe or another provider; the next steps follow your choice.

03.1Select Stripe or Other

Pick one here, then choose the same one in Dashboard → Payment gateway and Save.

03.2Create a product

In the Stripe dashboard open Product catalog and press Create product.

Stripe · product catalog

03.3Name it and set the price

Name: Starter. Pricing: Recurring → Monthly → €10.00. Add product.

Add a product · €10.00 / month

03.4Open the product

The product page shows the default price row and the product ID.

Starter · active

03.5Copy the price ID

Open the price and copy the price_… identifier. That is the value UsageGate stores, not the product ID.

price_… identifier

03.6Paste it on the plan column

Back in Access rules, paste the price ID into the plan’s Stripe price id field and Save.

Plan column · Stripe price id
04

Webhook

Stripe tells UsageGate when someone pays, upgrades or cancels, so their limits change on their own.

04.1Add an event destination

Stripe → Webhooks → Add destination. Listen to: Your account.

Stripe · webhooks

04.2Select four events

Search and check exactly these — nothing else is needed.

  • invoice.paid
  • customer.subscription.created
  • customer.subscription.updated
  • customer.subscription.deleted
Selected events

04.3Choose Webhook endpoint

Destination type → Webhook endpoint → Continue.

Choose destination type

04.4Point it at UsageGate

Endpoint URL, then create the destination.

endpoint
https://www.usagegate.io/api/webhooks/stripe
Create an event destination

04.5Reveal the signing secret

On the destination details page, reveal and copy the whsec_… signing secret.

Signing secret · whsec_…

04.6Paste it back into UsageGate

In Dashboard → Payment gateway, paste the signing secret and Save. Stripe and UsageGate are now connected.

UsageGate · Stripe configuration
05

Your app

Three things in your code: put new users on Free, check before each paid action, and send upgrades to Checkout.

Prefer an agent? Copy for Cursor and paste the setup prompt into your product repo.

05.1Install the SDK

On your server only; the key never goes in browser code.

your-app.ts
npm install @usagegate/sdk

import { GateClient } from "@usagegate/sdk";

const gate = new GateClient(process.env.USAGEGATE_KEY!);

05.2Assign Free on signup

New users have no plan until you give them one. Call this after sign-up; it is safe to repeat on every login. Free credits refill monthly on their own.

signup
await gate.grantPlan(userId, "plan_free");

05.3Check before each paid action

Spend a credit first; only do the work if it succeeded. For an on/off feature, use canAccess instead. A "no" is a normal answer: return 402 and offer an upgrade.

generate.ts
const spent = await gate.consume(userId, "ai_credits", 1);
if (!spent.success) {
  return Response.json({ error: "upgrade" }, { status: 402 });
}

const result = await doTheWork();

// On/off feature:
// if (!(await gate.canAccess(userId, "export_pdf"))) return 402;

05.4Upgrade: send them to Checkout

Create the Checkout session on your paid Price, with your user's id in end_user_id. The webhook from chapter 04 applies the paid plan; don't call grantPlan or grant after it.

app/api/checkout/route.ts
const session = await stripe.checkout.sessions.create({
  mode: "subscription",
  line_items: [{ price: process.env.STRIPE_PRICE_PRO!, quantity: 1 }],
  subscription_data: {
    metadata: { end_user_id: userId },
    // trial_period_days: 7,  // optional free trial
  },
  success_url: `${origin}/billing?ok=1`,
  cancel_url: `${origin}/billing`,
});

return Response.redirect(session.url!, 303);

Milestone complete — your app is gated.

Watch balances on the dashboard. Need a detail? The SDK and Stripe pages are reference, not another start.