Mode 3 — Hybrid
The middle ground between the two modes: the plan list is your design, the card form is Lunixi's prebuilt component (Lunixi.portal.cardForm.mount()). You keep your own storefront and hand over only the most sensitive part of the flow.
The two pieces create separate portal clients; sessionStorageKey is what carries the shared session between them. If the key differs, the card component asks for OTP a second time and fails with PORTAL_SESSION_REQUIRED.
What to look at
- The HTML of the plan list on the left belongs to the demo page; the data comes from
client.plans(). The card form on the right is entirely the SDK's. - The card component requires a verified session, which is why the flow forces the OTP step first.
- Selecting a plan re-mounts the card form — the log shows
PLAN_SELECTED_IN_MERCHANT_UIfollowed byCARD_FORM_MOUNTED.
⚠️
The card step opens a real verification authorization. Run it while the merchant is wired to the TestBank acquirer.
What you need first
Your dashboard session's bearer token, a customer ID, an allow-listed origin, and HYBRID among the allowed modes — details in the Overview.