License an Adobe or Figma plugin

Written for developers

This is a step-by-step technical guide to adding a license screen to your product: it has code to copy and API calls to make. If you sell the product but don't write its code, read Not a developer? Start here and send this page to your developer.

This covers Figma plugins and Adobe UXP plugins (Photoshop, Illustrator, InDesign, XD and others). Both run your interface as a small web page, so the license screen is plain HTML and JavaScript. The customer pastes the key, the plugin activates that install, and it re-checks in the background.

Licensr does not host your plugin. You publish it on Figma Community or the Adobe Marketplace (or distribute it yourself), and link your buy page from the listing.

Product settings

Setting	Value
Activation mode	Seat: one activation per install.
Client type	Browser.
Allowed websites	Leave Allowed websites empty (under Advanced options). Figma sends Origin: null, which cannot be listed.
Identifier	A random ID your plugin creates once and stores. The code below does this.

Create a plan

In the admin panel, open your product and add a plan: one price with a limit on how many devices or websites one key can be used on. Keep the defaults if you are unsure. You can add more plans later. See the Quick start.

Also create a Client API key on the product (shown once, starts with pk_test_ or pk_live_). This is the key you put in your product.

Get a test license

You do not have to pay to try your integration. In the admin panel go to Customers → Issue license, enter your own email, pick the product and plan, and issue it. The key (starts with lic_) arrives by email and is shown once on screen. The dashboard checklist has a shortcut for this.

Use your pk_test_ key against https://api.staging.licensr.app while you build, then switch to pk_live_ and https://api.licensr.app when you release.

What your license screen must do

Your product needs one small screen: a text box for the key, an Activate button, and a Deactivate button. It follows these rules, whatever the platform:

1. Activate, then validate. When the customer clicks Activate, call activate (this registers the device or website against the plan's limit), then validate. Unlock only if the validate response has valid: true. Save the key and the activation_id from the activate response.
2. Check again in the background. Call validate at every launch and about once a day while the product runs. A refund, a cancelled subscription, or an expired license happens after the sale, and this daily check is how your product finds out. Without it, a refunded key keeps working forever.
3. Lock immediately on valid: false. If Licensr cannot be reached, stay unlocked (optionally lock after a few days with no answer). Try again later.
4. Offer a Deactivate button. It calls deactivate with the saved activation_id, forgets the key, and locks the product. This lets a customer move to a new computer without asking you for help.

Messages to show when activate fails (read detail.error in the response):

Code	Say
license_not_found	"We could not find that key. Check for typos."
activation_cap_exceeded	"This key is already in use on the maximum number of devices. Deactivate it on another device first."
license_inactive	"This license is no longer active. Contact the seller."
no response at all	"Could not reach the license server. Try again."
any other code	"Something went wrong (code)." Show the code so the customer can send it to you.

The full list is in Errors.

Figma

We make the calls from the UI page (ui.html). The plugin code (code.ts) keeps the saved license in figma.clientStorage and passes it to the UI page through messages.

manifest.json must allow the Licensr API:

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"],
  "networkAccess": {
    "allowedDomains": ["https://api.licensr.app", "https://api.staging.licensr.app"]
  }
}

code.ts stores the license and relays it to the UI:

figma.showUI(__html__, {width: 320, height: 240});

async function sendState() {
  const license = await figma.clientStorage.getAsync('license');
  let deviceId = await figma.clientStorage.getAsync('deviceId');
  if (!deviceId) {
    deviceId = Math.random().toString(36).slice(2) + Date.now().toString(36);
    await figma.clientStorage.setAsync('deviceId', deviceId);
  }
  figma.ui.postMessage({type: 'state', license, deviceId});
}
sendState();

figma.ui.onmessage = async (message) => {
  if (message.type === 'save') await figma.clientStorage.setAsync('license', message.license);
  if (message.type === 'clear') await figma.clientStorage.deleteAsync('license');
  await sendState();
};

The UI page then uses the same call, activate, validate and deactivate functions shown in the Adobe section below, sending save or clear to code.ts instead of using localStorage. Run the background check when the UI opens and once a day while it stays open.

Adobe UXP

Add network permission to manifest.json:

{
  "requiredPermissions": {
    "network": {"domains": ["https://api.licensr.app", "https://api.staging.licensr.app"]}
  }
}

Then in your panel's script:

const API = 'https://api.staging.licensr.app'; // production: https://api.licensr.app
const KEY = 'pk_test_...'; // Client key, safe to ship
const SLUG = 'my-plugin';

async function call(path, body) {
  try {
    const res = await fetch(API + path, {
      method: 'POST',
      headers: {Authorization: `Bearer ${KEY}`, 'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    return await res.json();
  } catch {
    return null; // network problem: do not lock
  }
}

function deviceId() {
  let id = localStorage.getItem('deviceId');
  if (!id) {
    id = Math.random().toString(36).slice(2) + Date.now().toString(36);
    localStorage.setItem('deviceId', id);
  }
  return id;
}

// Customer clicked "Activate".
async function activate(licenseKey) {
  const activation = await call('/v1/license/activate', {
    license_key: licenseKey,
    plugin_slug: SLUG,
    activation_type: 'seat',
    identifier: deviceId(),
  });
  if (!activation?.activation_id) return activation?.detail?.error ?? 'network';
  const check = await call('/v1/license/validate', {license_key: licenseKey, plugin_slug: SLUG});
  if (!check) return 'network';
  if (!check.valid) return check.detail?.error ?? 'license_inactive';
  localStorage.setItem(
    'license',
    JSON.stringify({key: licenseKey, activationId: activation.activation_id, valid: true})
  );
  return null; // success
}

// Customer clicked "Deactivate".
async function deactivate() {
  const license = JSON.parse(localStorage.getItem('license') || 'null');
  if (license) await call('/v1/license/deactivate', {license_key: license.key, activation_id: license.activationId});
  localStorage.removeItem('license');
}

// When the panel opens, and again every 24 hours while it stays open.
async function check() {
  const license = JSON.parse(localStorage.getItem('license') || 'null');
  if (!license) return;
  const result = await call('/v1/license/validate', {license_key: license.key, plugin_slug: SLUG});
  // No true/false answer (offline, rate limited, server error): keep the previous state.
  if (typeof result?.valid !== 'boolean') return;
  license.valid = result.valid;
  localStorage.setItem('license', JSON.stringify(license));
}
check();
setInterval(check, 24 * 60 * 60 * 1000);

Gate your features on license.valid. Older Adobe apps that use the CEP panel format can use the same code with a normal browser fetch.

Link your buy page

Licensr does not host your download. Host the file on your own website or store, then add a Buy button that links to your Licensr buy page (the dashboard shows the full link, which looks like /buy/your-slug). Customers pay there and get their key by email, then paste it into your license screen.

Go live

1. Swap your pk_test_ key for the pk_live_ key and use https://api.licensr.app in the release build.
2. Buy your own product once, using the buy page, to see the whole flow.
3. Check the dashboard: the Get started checklist shows You're live! when payments, a product, a plan, a test license, and a first check from your product are all done.

Stuck? The license calls guide lists every field and error.