Without React

Elapse does not put React in your frontend. Your app can be Vue, Svelte, Rails, Django or plain HTML. The subscriber signs with their passkey in a window Elapse opens, and one script draws the meter afterwards — that script is the only thing Elapse adds to your page.

Already using React? Install @elapse/react and compose <Authorize> and <Meter> yourself, so your app ships one copy of React instead of two.

Your server does not change

Everything before the page is the same for every language. Follow the Quickstart — it has a cURL tab beside every call, so creating the Product, creating the Checkout session and handling subscription.canceled work in Python, Go, Ruby, PHP or anything that speaks HTTP. Your secret key stays there, where it belongs. Only the Quickstart’s last step — rendering the meter — is written in React. This page is that step in your stack instead.

Your page

The cs_… session id is created per subscriber by your server, so the page asks for one when the subscriber starts:

<button id="start">Start</button>
<div id="elapse"></div>

<script type="module">
  import { mount } from "https://cdn.jsdelivr.net/npm/@elapse/react/dist/elapse.browser.js";

  document.querySelector("#start").onclick = async () => {
    // Your own endpoint. It calls POST /v1/checkout/sessions with your secret key and
    // returns the cs_… id — Quickstart, "Create a Checkout session on your server".
    const { session } = await fetch("/api/session", { method: "POST" }).then((r) => r.json());

    mount("#elapse", {
      publishableKey: "pk_test_…",   // publishable, safe in the page; an sk_ key throws
      session,
      onStarted: () => showYourProduct(),      // checkout-mode products
      onAuthorised: () => yourServerStarts(),  // merchant-mode products — see below
      onStopped: () => hideYourProduct(),
    });
  };
</script>

That is the whole frontend. mount renders the authorisation step, opens the signing window, and replaces itself with the live meter when the subscriber accepts. The build carries its own React, react-dom and motion (~65 KB gzipped), so you install nothing and your framework never sees them.

Options

Option
`publishableKey`	—	`pk_test_…` or `pk_live_…`. A key starting with `sk_` throws.
`session`	—	The `cs_…` your server created.
`onAuthorised`		The subscriber signed, and the meter is held. Merchant-mode products only.
`onStarted`		The subscriber signed and the meter is running. Checkout-mode products only.
`onStopped`		It stopped; the receipt is on screen.
`onPauseRequest`		Shows Pause. See below.
`onResumeRequest`		Shows Resume. See below.
`onError`		Something failed; the message is safe to show.
`sound`	`true`	Two short cues, at start and stop. Never one per second.
`baseUrl`	`https://api.elapse.finance`	The Elapse API.
`appOrigin`	`https://elapse.finance`	Where the signing window lives.

A second mount on the same element replaces the first rather than stacking.

Which of the two fires

onAuthorised and onStarted are alternatives, not a sequence. Exactly one of them fires when the subscriber signs, and which one is decided by the Product’s start_mode:

`start_mode`	Fires	What it means
`checkout`	`onStarted`	the meter is already running; show your product
`merchant`	`onAuthorised`	the money is held and nothing is accruing yet

Merchant mode exists for a resource that has to be ready first — a container to boot, a runner to warm, a stream to open. You do that work, then call subscriptions.start from your server, and the meter begins. Until you do, the subscriber is charged nothing; a session you never start is cancelled and refunded in full after fifteen minutes. So a checkout-mode integration listens for onStarted, and a merchant-mode one listens for onAuthorised and starts the meter itself. Passing both, as above, is the safe default while you are deciding.

Where access is really decided

onStarted and onStopped are for your interface — reveal the product, hide it again. They are browser callbacks, so they are not proof of anything: a closed laptop fires no callback, and neither does a tab that crashed. Entitlement belongs on your webhook endpoint, where subscription.created and subscription.canceled arrive signed from Elapse. Grant on one, revoke on the other, and verify the signature before you parse the body. Signatures has the scheme and a test vector; the events catalogue has every payload you can receive. While you are building, elapse listen --forward localhost:3000/webhooks delivers them to your laptop with no tunnel.

Pause and Resume

Leave onPauseRequest and onResumeRequest out and the meter shows no such buttons. Pass them and it shows both — as requests to you. Nothing is signed in the browser and nothing reaches Elapse from it. Your server answers by calling subscriptions.pause and subscriptions.resume, and the meter follows once the change confirms. Paused seconds are never billed. The subscriber never gets a Stop button for a meter you started; stopping it stays yours, through whatever control your own page offers. Subscriptions has the rule.

Webhooks

SDKs

API reference

Your server does not change

Your page

Options

Which of the two fires

Where access is really decided

Pause and Resume

​Your server does not change

​Your page

​Options

​Which of the two fires

​Where access is really decided

​Pause and Resume

Your server does not change

Your page

Options

Which of the two fires

Where access is really decided

Pause and Resume