Demo Screens
These screens are the subscription surface actually running — not screenshots, not mockups. Each one talks to the real API. Every screen opens with a connection box where you paste your own keys; no key is ever committed to the page source.
The demo screens are for test environments. The card step opens a 1.00 TRY verification authorization + 3DS — run them while the merchant is wired to the TestBank acquirer. The screens are noindex, and API calls are rejected until this domain is added to the allowed-origins list in the dashboard.
The screens
Each one runs embedded in its own page inside these docs — they are in the sidebar too.
| Screen | Mode | What it shows | Key required |
|---|---|---|---|
| Pricing page | Mode 0 — Catalog | Plans and branding for anonymous visitors | Publishable key |
| Full portal flow | Mode 1 — Prebuilt UI | One mount(): OTP → plan → card → subscription → dashboard | Merchant bearer token |
| Your own UI | Mode 2 — Headless | Every screen is yours, the API is ours | Merchant bearer token |
| Partial embed | Mode 3 — Hybrid | Your plan list + Lunixi's card component | Merchant bearer token |
| Customer portal link | Hosted | No code at all, just a cp_ link | Portal token |
Every screen also runs standalone: the “Open in a new tab” link at the top right of each demo takes you to the full-screen version.
Before you run them
Enable SDK embed
In the dashboard under Subscription → Portal Settings → SDK Embed Security, SDK Embed must be on. While it is off, only the hosted portal works.
Add your origin to the allow-list
Add the address you will open the demo from to the allowed origins list on the same screen. Matching is exact — no wildcards; the scheme and port must match character for character. Calls from an origin that is not listed are rejected.
Select the allowed modes
Check the modes you intend to use under Allowed SDK Modes. An empty list means all modes are permitted. With FULL off Mode 1 fails at bootstrap, with HEADLESS off Mode 2 fails, with HYBRID off Mode 3 fails.
Get your key
A publishable key from the dashboard for the catalog demo; your dashboard session's bearer token for the other three modes. The hosted portal demo needs neither — only the cp_ token you generate on the Portal Links screen.
Publish at least one active plan
Dashboard → Subscription → Plans. With no published active plan the lists come back empty and the flow stops at plan selection.
Where the keys are kept
The demo screens carry no key in their source and send none to any server of ours:
- Merchant bearer token and portal token →
sessionStorage. Cleared when you close the tab. - API/CDN addresses and publishable key →
localStorage. Both are public values anyway.
The demo screens call sdk-session from the browser so you can watch the integration flow live. This is not the production pattern: POST /api/v1/subscriptions/portal/sdk-session is protected by BearerAuthGuard and must be called from your own server. The only things that should reach the browser are the returned portalToken and sessionProof.
Flow at a glance
All four modes share one spine; what differs is who draws which part.
portalToken is minted with the secret key and only that token reaches the browser. No customer data is readable before verification completes.| Who draws the step | Mode 0 | Mode 1 | Mode 2 | Mode 3 |
|---|---|---|---|---|
| Plan list | you | Lunixi | you | you |
| OTP screen | — | Lunixi | you | you |
| Card form | — | Lunixi | Lunixi (iframe) | Lunixi |
| Dashboard | — | Lunixi | you | you |
For endpoint contracts and code samples see Pricing & Portal SDK; for the portal session model see Customer Portal.
Common failures
| What the log says | Cause | Fix |
|---|---|---|
sdk-session failed (HTTP 401) | Bearer token expired or wrong | Get a fresh token from the dashboard |
sdk-session failed (HTTP 403) | Origin not allow-listed, or SDK embed off | Add the origin / turn embed on in Portal Settings |
PORTAL_SESSION_REQUIRED | The card component requires a verified session | Complete the OTP step first |
| Empty plan list | No active plan, or the portal link restricts plans | Publish a plan / widen the link's allowed plans |
Card field failed to load | The checkout bundle could not be fetched | Check the CDN address and any network/CSP restrictions |