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.
01
Your plans
Set what each plan includes.
02
API key
Create the key your server uses.
03
Payment gateway
Connect Stripe, or another provider.
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.
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.
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.
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.